ImportCategories.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data = FileAttachment("ImportCategories.csv").csv({typed: true})
Inputs.table(data)
groupedData = d3
.groups(data, (d) => d["Country"])
.filter(([country, data]) => country)
.map(([country, data]) => ({
country,
number: data.length
}))
sortedData = groupedData.slice().sort((a, b) => d3.descending(a.number, b.number))
<div>
${chart}
</div>
margin=({top:20, bottom:19, left:40, right:40})
xScale = d3
.scaleBand()
.domain(sortedData.map((d) => d.country)).padding(0.1)
.range([margin.left, width - margin.right])
.paddingInner(0.02)
colorScale = d3.scaleOrdinal(d3.schemeCategory10)
.range(["#98abc5", "#8a89a6", "#77D0BA", "#6b486b", "#a05d56", "#d0743c", "#ff8c00", "#c1aac0", "#DE6C83", "#ECB0E1", "#c9ddff"])
yScale = d3.scaleLinear()
.domain([0, d3.max(groupedData, d=> d.number)])
.range([height -margin.bottom, margin.top])
xAxis = d3.axisBottom(xScale)
yAxis = d3.axisLeft(yScale)
chart = {
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.selectAll("rect")
.data(groupedData)
.join("rect")
.attr("width", xScale.bandwidth())
.attr("height", (d) => height - yScale(d.number))
.attr("x", (d) => xScale(d.country))
.attr("y", (d) => yScale(d.number))
.attr("fill", (d) => colorScale(d.country))
;
svg.append("g")
.style("transform", `translate( 0px, ${height-margin.bottom }px)`)
.call(xAxis);
svg.append("g")
.style("transform", `translate( ${margin.left}px, 0px)`)
.call(yAxis);
return svg.node();
}
Plot.plot({
y: {
grid: true
},
marks: [Plot.barY(groupedData, { x: "country", y: "number" ,
fill: ["#98abc5", "#8a89a6", "#77D0BA", "#6b486b", "#a05d56", "#d0743c", "#ff8c00", "#c1aac0", "#DE6C83", "#ECB0E1", "#c9ddff"] ,
sort: { x: "y", reverse: true }})]
})
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.
