Search code examples
htmlcssdictionaryd3.jscolorbrewer

Updating map polygons and map legend with selected color option from dropdown menu?

I am a rookie programmer trying to make an interactive map with d3. So far, I have been able to update the colors of the polygons in the SVG choropleth (quantile) map by selecting a Colorbrewer CSS color scheme from a dropdown menu. 

d3.select("select#ColorSelection")
    .on("keyup", function() {d3.selectAll("svg#Mapsvg").attr("class", this.value)})
    .on("change", function() {d3.selectAll("svg#Mapsvg").attr("class", this.value)});

However, the color boxes for the map legend are stuck on the blue color scheme, no matter what other color scheme option is chosen in the dropdown menu. Here is an example. I have tried some things, such as adding additional code that simply copies the code above, but replaces "svg#Mapsvg" with the map legend "svg#Legendsvg", but have not had any luck.

How can I update the map legend ("svg#Legendsvg") and the map itself with the same color scheme selected from the dropdown menu?

Apologies ahead of time if I am missing something very basic. Thanks for any help you can offer!

Here is the code for the map legend color boxes, for reference:

var legends = d3.select('svg#Legendsvg')
var legendbars = legends.selectAll('rect')
        .data(legend)
        .enter()
        .append('rect')
        .attr('x', 5)
        .attr('y', function(d, i) {return (i*30)+25})
        .attr('height',28)
        .attr('width',30)
        .attr('class', function (d) {return quants(d)} )
        ;

And reference code for the dropdown menu:

    <p>Color Scheme: 
        <select id="ColorSelection">
        <option value="Blues" selected>Blues</option>
        <option value="Greys">Greys</option>
        <option value="Greens">Greens</option>
        <option value="Oranges">Oranges</option>
        <option value="Reds">Reds</option>
        <option value="Purples">Purples</option>
        <option value="YlGn">Yellow-Green</option>
        <option value="YlGnBu">Yellow-Green-Blue</option>
        <option value="GnBu">Green-Blue</option>
        <option value="BuGn">Blue-Green</option>
        <option value="PuBuGn">Purple-Blue-Green</option>
        <option value="PuBu">Purple-Blue</option>
        <option value="BuPu">Blue-Purple</option>
        <option value="RdPu">Red-Purple</option>
        <option value="PuRd">Purple-Red</option>
        <option value="OrRd">Orange-Red</option>
        <option value="YlOrRd">Yellow-Orange-Red</option>
        <option value="YlOrBr">Yellow-Orange-Brown</option>
        </select></br>
Solution

  • It does not appear that you have actually given your legend bars an id value of Legendsvg. So if you try selecting using #Legendsvg d3 will not get the elements you are trying to select. Try adding 

    .attr(id, "Legendsvg")

    to your legend creation statements and then edit your keyup / change functions to: 

    {d3.selectAll("svg#Mapsvg, svg#Legendsvg")...