Develop Reference

Choropleth map using D3.js and CSV file

I am using d3.js in a project for university where I have to visualize the world Choropleth world MAP passing the data to color the country form a file csv internally built this way:
nationality,victims
Austria,4500
France,1345
China,16000000
Italy,452345
Hungary,70000
and so on.
Until I create only the world map it works and a map will show on the web.
When I add the d3.csv part to read data it shows nothing.
I attached the code below:
function mapRender(){
var width = 900;
var height = 550;
//Select the div to show the maps
var svg = d3.select("#map")
.append("svg")
.attr("width", width)
.attr("height", height)
.append('g')
//Setting the color domains for the choropleth maps
var color = d3.scaleThreshold()
.domain([0, 50000, 100000, 150000, 200000, 500000, 1000000, 5000000, 10000000, 20000000])
.range(["#ffff00", "#FFF933", "#DCFF33", "#97FF33", "#40FF33", "#33FFA7", "#33FFFB", "#33AAFF", "#336EFF"]);
var projection = d3.geoMercator()
.scale(125)
.translate([width / 2, height / 1.4]);
var path = d3.geoPath().projection(projection);
d3.json("https://unpkg.com/world-atlas#1/world/110m.json", function (error, world) {
if (error) throw error;
//Load data from CSV file
d3.csv("../datasets/csv/choropleth.csv", function (data) {
var dataByName = {};
data.forEach(function (d) {
dataByName[d.nationality] = +d.victims;
});
svg.append("path")
.datum(topojson.feature(world, world.objects.land))
.append("path")
.attr("d", path)
.attr("fill", function(d) {
return color(dataByName[d.nationality]);
});
// .attr("fill", "#000000")
// .attr("d", path);
})
})
}
Anyone that can help me to understand why it doesn't work?

Choropleth Not Displaying

I'm working on a project in d3.js, and I can't seem to make my map work. Every time I run it there are no syntax errors, but there's only a blank screen. Here's the code:
<svg id="my_dataviz" width="1000" height="1000"></svg>
<script>
// 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.geoMercator()
.scale(10000)
.center([30, -85])
.translate([width / 2, height / 2]);
// Data and color scale
var data = d3.map();
var colorScale = d3.scaleThreshold()
.domain([-5000, -3000, -1000, 1000, 3000, 5000])
.range(d3.schemeReds[7]);
// Load external data and boot
d3.queue()
.defer(d3.json, "G2.geojson")
.defer(d3.csv, "ps.csv", function(d) { data.set(d.GEOID20, +d.PRE_SC); })
.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.get(d.id) || 0;
return colorScale(d.total);
});
}
</script>
</body>
</html>
I made sure that my projection was WGS 84. If I have any errors in the code please let me know! Thank you all!

How to make to drawing a SVG with D3.js?

I'm trying to draw a map in an SVG with the GEOJSON data that I bring from this API, the SVG paths are filled with the data, however, the SVG is blank, as can be seen when executing the code below. Notice the document.write, the data is returned correctly.
var svg = d3.select("svg")
d3.json('https://api.mocki.io/v1/d214eb47')
.then(data => {
svg.append('g')
.selectAll('path')
.data(data.features)
.enter()
.append('path')
.attr('d', d3.geoPath().projection(d3.geoMercator()))
document.write(JSON.stringify(data));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.6.0/d3.min.js"></script>
<svg width="600" height="600"></svg>
I tested it with another GEOJSON file, and managed to draw in SVG as seen when executing the code below:
const link = "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson";
var svg = d3.select("svg")
d3.json(link)
.then(data => {
svg.append("g")
.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d", d3.geoPath()
.projection(d3.geoMercator())
)
//document.write('data ', JSON.stringify(data))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.6.0/d3.min.js"></script>
<svg width="600" height="600"></svg>
Does anyone know what's wrong with the first code snippet?

There is no issue in the data, the problem here is just that you're trying to map a very small region (San Francisco), unlike the world map in your second example. That said, you should set the scale and the center of the projection. In your case:
const projection = d3.geoMercator()
.scale(100000)
.center([-122.3, 37.75])
The resulting code:
var svg = d3.select("svg");
const projection = d3.geoMercator()
.scale(100000)
.center([-122.3, 37.75])
d3.json('https://api.mocki.io/v1/d214eb47')
.then(data => {
svg.append('g')
.selectAll('path')
.data(data.features)
.enter()
.append('path')
.attr('d', d3.geoPath().projection(projection))
})
path {
fill: wheat;
stroke: darkslateblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.6.0/d3.min.js"></script>
<svg width="600" height="600"></svg>
But it's way easier just using fitExtent with your SVG width and height:
const projection = d3.geoMercator()
.fitExtent([
[0, 0],
[600, 600]
], data)
And here is the resulting code:
var svg = d3.select("svg");
d3.json('https://api.mocki.io/v1/d214eb47')
.then(data => {
const projection = d3.geoMercator()
.fitExtent([
[0, 0],
[600, 600]
], data)
svg.append('g')
.selectAll('path')
.data(data.features)
.enter()
.append('path')
.attr('d', d3.geoPath().projection(projection))
})
path {
fill: wheat;
stroke: darkslateblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.6.0/d3.min.js"></script>
<svg width="600" height="600"></svg>

Your GeoJSON file has very small areas that are displayed but with practically zero size shapes in given projection and default SVG viewBox.
Check how I've found the boundaries of the SVG G element with your geodata. I then used that to define SVG viewBox attribute. If SVG width or height are not set then SVG will expand to available "container" size. So you can add a surrounding DIV element and set its size if you wish (fitting SVG in your container and thus in your layout).
UPDATE: you can even change the SVG viewBox attribute later with javascript by using returned values from the getBBox() function. The other possibility in another answer is of course great, too (fitting extent of your SVG).
var svg = d3.select("svg");
const link = "https://api.mocki.io/v1/d214eb47";
//const link = "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson";
d3.json(link)
.then(data => {
svg.append('g')
.selectAll('path')
.data(data.features)
.enter()
.append('path')
.attr('d', d3.geoPath().projection(d3.geoMercator()));
//console.log(data.features);
console.log(document.getElementsByTagName("g")[0].getBBox());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.6.0/d3.min.js"></script>
<svg viewBox="152.95315551757812 140.7493133544922 0.421722412109375 0.4228363037109375"></svg>

Why is my choropleth coming out all the same colour?

This is my first question on here so please bear with.
I'm trying to make a choropleth (a map where different sections are coloured in based on some value assigned to them) using d3.js. I'm using the example given at https://www.d3-graph-gallery.com/graph/choropleth_basic.html, but changing the map to one of Scotland and changing the values to population density.
When I run it, I get a map but it's all coloured in the same shade of blue. I've tried changing the domain of colorScale but to no avail.
This is what I've got at the minute:
// 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 = d3.map();
var colorScale = d3.scaleThreshold()
.domain([0, 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.set(d.code, +d.density);
})
.await(ready);
function ready(error, topo) {
console.log(data);
// 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.get(d.id) || 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>
Any suggestions for fixing it would be greatly appreciated. Thank you!

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>

How to control the order of the layers on a map in d3js

I have a simple question about making maps with d3js. I want to make a map with two layers. One layer is the contour of the map (geoJson) and the other layer contains the streets (topoJson). My problem is that streets layer always is loaded in front of the layer of contour, no matter which one is written before in the code. I would like the opposite situation: the contour layer in front of the streets. I think this problem happen because both request are asynchronous and the contour layer is loaded before because is the lightest.
Here is the code...
//Width and height
var w = 900;
var h = 500;
//Define map projection
var projection = d3.geo.transverseMercator()
.center([2.5, -34.65])
.rotate([61.5, 0])
.scale((h * 750.5) / 3)
.translate([(w/2), (h/2)]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in TopoJSON data
d3.json("streets.json", function(error, topology) {
svg.selectAll("path")
.data(topojson.feature(topology, topology.objects.layer1).features)
.enter()
.append("path")
.attr("d", path)
.style("fill", "white")
.style("stroke", "#cccccc");
});
//Load in GeoJSON data
d3.json("contour.geojson", function(json) {
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill","white")
.style("stroke","black")
.style("stroke-width",4);
});
Is it possible load first the layer of streets, wait until the streets were drawn and then load the layer of contour?
Thanks in advance.

I would create two separate g elements for the layers in the beginning. This way you can control their order:
var countourG = svg.append("g"),
streetG = svg.append("g");
d3.json("streets.json", function(error, topology) {
streetG.selectAll("path")...
});
d3.json("contour.json", function(error, topology) {
contourG.selectAll("path")...
});