colorScale = d3.scaleLinear()
.domain([0, 1])
.range(["lightgray", "steelblue"]);
data = FileAttachment("NAdata@5.csv").csv();
groupedData = d3.group(data, d => d.iso_code)
countries = Array.from(groupedData.keys())
xScale = d3.scaleBand()
.domain(variableNames)
.range([margin.left, width - margin.right])
.padding(0.1)
.align(0)
.round(true)
yScale = d3.scaleBand()
.domain(countries)
.range([margin.top, height - margin.bottom])
.padding(0.1)
.align(0)
.round(true)
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
let counter = margin.left;
groupedData.forEach((d,i,e)=> {
svg.selectAll(`rect_${i}`)
.data(groupedData.get(i))
.join('rect')
.attr('y', d => yScale(d.iso_code))
.attr('x', d => xScale(d.variable_name))
.attr('width', xScale.bandwidth())
.attr('height', yScale.bandwidth())
.attr('fill', d => colorScale(d['value'])) /*function(d) {
if (d[columns[i]] === "") {return "lightgray"}
else {return "brown"}
;}) */
})
const xAxis = svg.append("g")
.attr("id", "xAxisG")
.attr("transform", `translate(0 ,${margin.top})`)
.call(d3.axisTop(xScale))
.attr("font-size", 6)
.call(g => g.select(".domain")
.remove())
xAxis.selectAll("text")
.attr("transform", "rotate(-90)translate(8, 10)")
.style("text-anchor", "start")
svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(yScale))
.attr("font-size", 6)
.call(g => g.select(".domain")
.remove())
return svg.node();
}
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.
