Published
Edited
May 24, 2021
2 stars
url = "https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/test/data/countries.csv" // put your data here
data = {
let ar = await d3.csv(url, d3.autoType);
ar.forEach(d => { d.name = d.country; d.value = d.population_2020;}); // adjust accordingly to create d.name and d.value
ar.format = ",d";
ar.groupColumn = "region"; // set your group column here
return ar.sort(countriesSort);
}
groups = [...new Set(data.map(d => d[data.groupColumn]))]
spacing = 50
format = x.tickFormat(20, data.format)
x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([margin.left, width - margin.right])
xAxis = g => g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x).ticks(width / 150, data.format))
.call(g => g.select(".domain").remove())
barHeight = 25
height = Math.ceil((data.length + 0.1) * barHeight) + groups.length * spacing + margin.top + margin.bottom
margin = ({top: 30, right: 0, bottom: 10, left: 160})
d3 = require("d3@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
