D3 v7 map visualization

Gustavo Luizon

unread,

Apr 24, 2022, 8:17:51 PM4/24/22

to d3-js

Please guys, im trying to understand why this code doesnt work for version 7 of d3.js. Its working for version 4

<!DOCTYPE html>

// The svg

var svg = d3.select("svg")

width = +svg.attr("width"),

height = +svg.attr("height");

// Map and projection - centraliza em bangkok

//var projection = d3.geoNaturalEarth1()

var projection = d3.geoMercator()

.scale(width / 1.3 / Math.PI)

.translate([width / 2, height / 2])

// Load external data and boot

d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){

// Draw the map

svg.append("g")

.selectAll("path")

.data(data.features)

.enter().append("path")

.attr("fill", "#69b3a2")

.attr("d", d3.geoPath()

.projection(projection)

)

.style("stroke", "#fff")

})

</script>

Gordon Woodhull

unread,

Apr 24, 2022, 8:46:16 PM4/24/22

to d3...@googlegroups.com

It’s probably the move from node-style callbacks to ES5 promises in D3 version 5:

https://github.com/d3/d3/blob/main/CHANGES.md#changes-in-d3-50

Unfortunately this causes a silent failure because the second argument to d3.json is ignored!

On Apr 24, 2022, at 8:18 PM, Gustavo Luizon <glu...@gmail.com> wrote:

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/9cef7c38-a8f9-4c02-8930-1d47394b1f52n%40googlegroups.com.

Yongjie Ji

unread,

Apr 25, 2022, 2:03:28 PM4/25/22

to d3-js

Bet the promise changed the way to get the data from d3.csv and d3.json

probably, you can change to

d3.json().then(data=>{}) to bind the data.

Reply all

Reply to author

Forward