Published
Edited
Nov 15, 2019
svg = {
const svg = DOM.svg(w, h);
const mag = h / dataset[6];
const rects = d3.select(svg).selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i){
return i * (w / dataset.length);
})
.attr("y", function(d){
return h-d * mag;
})
.attr("width", w / dataset.length - 4)
.attr("height", function(d){
return d * mag;
})
.attr("rx", 5)
.attr("ry", 5)
.attr("fill", function(d, i){
if(i%2 == 0)
return "#a3397d";
else
return "#eb5d06"
})
.attr("opacity", function(d){
return d/5;
});
const texts = d3.select(svg).selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return d;
})
.attr("x", function(d, i){
return (i + 0.3) * (w / dataset.length);
})
.attr("y", function(d){
if(d <= 2)
return h - (d * mag)
else
return h - (d * mag) + 15;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", function(d){
if(d <= 2)
return "#1d0f2d"
else
return "#f5ede3"
})
.attr("opacity", function(d){
return d/5;
});
return svg
}
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.
