score:2
Accepted answer
i think you may have misread the documentation for d3.scalethreshold
, because it says you need to have n
values in your domain if you have n + 1
values in your range. in your case, that makes n = 6
.
also, d.id
didn't exist. i used d.properties.lad13nm
instead, because that field contained the name of the relevant county.
finally, there was no need to use a map
, since you were only using it as an object of some sorts, so i just replaced it with a regular object.
// the svg
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// map and projection
var path = d3.geopath();
var projection = d3.geonaturalearth()
.scale(20 * width / math.pi)
.translate([width / 2 + 150, height / 2 + 2500]);
// data and color scale
var data = {};
var colorscale = d3.scalethreshold()
.domain([100, 200, 300, 400, 500, 600])
.range(d3.schemeblues[7]);
// load external data and boot
d3.queue()
.defer(d3.json, "https://raw.githubusercontent.com/squirrel-star/scotland/main/geojsonscotlandladjson.geojson")
.defer(d3.csv, "https://raw.githubusercontent.com/squirrel-star/scotland/main/scotlanddensitywithid.csv", function(d) {
data[d.code] = +d.density;
})
.await(ready);
function ready(error, topo) {
// draw the map
svg.append("g")
.selectall("path")
.data(topo.features)
.enter()
.append("path")
// draw each country
.attr("d", d3.geopath()
.projection(projection)
)
// set the color of each country
.attr("fill", function(d) {
d.total = data[d.properties.lad13nm] || 0;
return colorscale(d.total);
});
}
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<svg id="my_dataviz" width="400" height="400"></svg>
Source: stackoverflow.com
Related Query
- Why is my choropleth coming out all the same colour?
- Why are both of these lines coming up the same color?
- d3.v3 scatterplot with all circles the same radius
- D3 word-cloud: how to auto size the font so words will not run out , and to scale words to all the screen?
- How to set all descendant nodes and links to same colour as level 2 ancestor?
- d3 table coming out of the div boundary
- Display all the leafs on the same level with D3.JS
- Why doesn't the same group render a correct line chart and corresponding range chart?
- D3 - not all children nodes are shown at the same time
- Drawing a line using d3 is not visible when all data items are the same
- d3 circlepacking how to not zoom out when clicking the same node twice
- Transition all div elements with .tween at the same time with d3
- D3 - why is this sort function not updating all the elements in its selection?
- How to update all existing elements in the same level with same parent value?
- All elements take the same values
- Why text goes out of the box while using D3 Word Cloud example by Jason Davies?
- d3 chart is going out of the box, last circle is not coming properly
- Moving all nodes the same time including links?
- getting the array length the same across all objects
- Bar Chart Part 1 D3 why does it skip data that is the same value?
- Why is d3 keeping some of my elements when I want it to remove all of the elements?
- hovering does not work with all elements of the same class in d3.js
- Why are d, this, and the variable all undefined in my drag function?
- Why isn't my map function returning all the csv file rows in d3 js?
- why am i getting the same dates in the x axis?
- React Component List Returning D3 SVG With Images All The Same As First Image In The List
- getBoundingClientRect() returns the same values for all elements
- How to filter out nodes with the same parent as the current node in d3.js
- How to create a bar chart with C3 that doesn't group all columns in the same set
- Why does my array need parsing, when they look the same in the console?
More Query from same tag
- Displaying selections to an SVG rectangle (JavaScript)
- Apply d3 geo projection to an image
- How change position node for level in d3JS
- D3.js Decision Tree - text wraping, bounding box, # of load circles
- Using custom tick lables on x-axis in D3js
- how to use d3 to scroll whole page
- Undefined is not a function - JAVASCRIPT - D3
- Is it possible to run mulitple zoom on d3
- How to create a ul-li list from d3 nodes hierarchy?
- Can I use d3.js to draw the graph using json string or json object?
- D3 js - is it possible to draw straight lines between tree nodes?
- D3 select specific node by data
- How can I color ocean with topojson in d3 when I have coordinate info for land?
- d3 Reusable histogram
- Subset ordinal domain for a bar chart
- Unable to render charts using Wicked PDF
- Why adding google map will crash d3.js brush redraw outside debug mode?
- R shiny AngularJS working
- D3 selfnode link using d3.forcesimulation()
- How to implement asynchronous inside d3
- Difference between D3.js vs D3.min.js
- D3.js: Getting my own data for the layout
- Data joins in d3; I must not be understanding selections and/or data key functions properly
- What is `svg.call(zoom.event)` for?
- Force + Drag + Zoom : freeze after few seconds
- d3.js / javascript efficient code
- Can't access json from url d3.js
- How does each function and this keyword work together in d3?[chaining transitions]
- Appending svg solved the issue
- Typescript Type definition for d3 sankey