I'm a rookie programmer trying to make an interactive choropleth map. After getting help on here with several issues already, the last big problem is that the map legend is incorrect. The legend should show a different color for each quantile class, but, as of now, associates the darkest color with the 2nd-largest class (rather than for the largest only) and then repeats that color for the largest class. Also, for most of the available quantile selection options, the lightest shade is absent from the legend. Here's a screenshot that shows that the full range of colors (5 classes in the example) displays correctly on the map itself, but not on the legend.
I would think that the problem is somewhere within the following code, perhaps especially in the last long block of code under the heading "Calculating quantiles based on selections from dropdown menus and updating the legend." I wonder if something is off in the way the value labels are being added to the legend, which might be confusing the way the color is associated. Any insights would be greatly appreciated!
The dropdown menus:
<div id="mapcontrols" style="position:absolute; top: 35px; left:625px;">
<div>
<p>Data to map:
<select id="NumerSelection" class="MainData" style="width:225px;">
<option value="d.OneFill" selected>Inverse (numerator set to 1)</option>
<option value="d.pop11">County Population, July 2011</option>
<option value="d.Members">Total Enrollees</option>
<option value="d.Patients">Total Patients</option>
<option value="d.MemberMonths">Member-months of Enrollment</option>
<option value="d.AvgMembers">Average Number of Enrollees</option>
<option value="d.id">County ID</option>
</select></p>
<p>Denominator:
<select id="DenomSelection" class="MainData" style="width:225px;">
<option value="d.OneFill" selected>raw rate</option>
<option value="d.pop11">County Population, July 2011</option>
<option value="d.Members">Total Enrollees</option>
<option value="d.Patients">Total Patients</option>
<option value="d.MemberMonths">Member-months of Enrollment</option>
<option value="d.AvgMembers">Average Number of Enrollees</option>
<option value="d.id">County ID</option>
</select></p>
<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>
Number of quantiles:
<select id="TileSelection" class="MainData"">
<option value="3">3</option>
<option value="4">4</option>
<option value="5" Selected>5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select></p>
</div>
<div id="legenddiv"><p>Legend:</p></div>
</div>
Setting up the legend SVG and default color scheme:
var LegendContainer = d3.select('div#legenddiv')
.append('svg')
.attr('width', 100)
.attr('height', 300)
.attr('id', 'Legendsvg')
.attr('class', 'Blues')
;
Simultaneously updating the color scheme of the map polygons as well as the legend boxes based on selection from the color scheme dropdown menu:
d3.select("select#ColorSelection")
.on("keyup", function() {d3.selectAll("svg#Mapsvg, svg#Legendsvg").attr("class", this.value)})
.on("change", function() {d3.selectAll("svg#Mapsvg, svg#Legendsvg").attr("class", this.value)});
Formatting the values to be displayed:
function makenice(d) {
if(d==0){return 0;}
dec = Math.ceil(Math.log(d < 0 ? -d: d)/Math.log(10))
magnitude = Math.pow(10,3-dec)
n = Math.round(d*magnitude)/magnitude
if(dec>3){ d= numeral(n).format('0,0.[0]');}
else{ d = numeral(n).format('0.00[0000000000]');}
return d
};
Grabbing the data from an external CSV file:
d3.csv('testdata.csv', function(data)
{
...
Calculating quantiles based on selections from dropdown menus and updating the legend:
d3.selectAll('select.MainData').on('change', function() {
var Nu = document.getElementById('NumerSelection')
Numer = Nu.options[Nu.selectedIndex].value;
var Nd = document.getElementById('DenomSelection')
Denom = Nd.options[Nd.selectedIndex].value;
var Qt = document.getElementById('TileSelection')
ntiles = Qt.options[Qt.selectedIndex].value;
var DataArray =(data.map(function(d, i) {return +eval(Numer) / +eval(Denom);})).sort(function(a,b){return a-b});
//set up quantiles
var quants = d3.scale.quantile()
.domain(DataArray)
.range(d3.range(0,ntiles).map(function(i) {return 'q' + i + '-' + ntiles;}))
;
var legendquant = quants.copy();
//regenerate values for legend
var legend = legendquant.quantiles();
legend.unshift(d3.min(DataArray));
legend.push(d3.max(DataArray));
legend.reverse();
//Create the legend
var delabeltext = d3.select('svg#Legendsvg').selectAll('text').remove();
var delabelboxes = d3.select('svg#Legendsvg').selectAll('rect').remove();
console.log(legend)
var legends = d3.select('svg#Legendsvg')
var legendbars = legends.selectAll('text')
.data(legend)
.enter()
.append('text')
.attr('x', 40)
.attr('y', function(d, i) {return (i*30+30)})
.text(function (d) {return d})
;
legend.pop();
legend.reverse();
if (Nu.options[Nu.selectedIndex].text != 'Inverse (numerator set to 1)') {
legend.reverse(); }
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)} )
;