I have hunted around the darkest corners of the web for one hour but have not found a satisfactory answer to my question, or indeed a satisfactory demonstration.
I am trying to amend M Bostock's US unemployment choropleth map that applies D3 scale chromatic. I am stumped. I am unable to amend the script to work with my data.
I have values ranging from 2,000 to 150,000. I would like to set up ten 'buckets' as follows:
[2000, 3000, 4000, 5000, 10000, 15000, 20000, 30000, 50000, 100000]
How would I need to amend the below script so that my colours are displayed properly when I feed the numbers?
var x = d3.scaleLinear()
.domain([1, 10])
.rangeRound([600, 860]);
var color = d3.scaleThreshold()
.domain(d3.range(2, 10))
.range(d3.schemeBlues[9]);
I have worked out that 'rangeRound' affects the placement of the legend on the page. Other than that, I am stuck.
Thank you.
The answer to my question is as follows:
var myDomain = [10000, 15000, 20000, 30000, 50000, 75000, 100000, 140000]
var x = d3.scaleLinear()
.domain(myDomain)
.rangeRound([500, 860]);
var color = d3.scaleThreshold()
.domain(myDomain)
.range(d3.schemeOranges[8]);
Credit goes to Gerardo Furtado. An unexpected consequence of amending the script in this way is that the legend is now messed up and blown out of proportion. I have posted a separate question where I highlight the issue.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments