London based data visualiser.
Public
Edited
Jun 28, 2023
{
let bandwidth = plotWidth/(data2.length+1);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const plot = svg
.append("g")
.attr("transform",`translate(${margin.left},${margin.top})`)
plot.append("line")
.attr("x1",0)
.attr("x2",plotWidth)
.attr("y1",plotHeight-valueScale(0))
.attr("y2",plotHeight-valueScale(0))
.attr("stroke","black")
data2.forEach((d,i)=>{
plot.append("rect")
.attr("x", i * bandwidth)
.attr("y", plotHeight - valueScale(d.negative ? d.start : d.end))
.attr("width", bandwidth/2)
.attr("height", valueScale(Math.abs(d.value)))
.attr("fill", (d.negative ? 'red':'green'))
.attr("stroke-width",1)
.attr("stroke",(d.negative ? 'red':'green'))
.attr("shape-rendering","crispEdges");
plot.append("line")
.attr("x1",i * bandwidth)
.attr("x2",(i+1) * bandwidth)
.attr("y1",plotHeight-valueScale(d.end))
.attr("y2",plotHeight-valueScale(d.end))
.attr("stroke","black")
.attr("stroke-width",1)
.attr("shape-rendering","crispEdges")
console.log("i",i, data2.length-1);
if(i == data2.length-1){
console.log("here");
plot.append("rect")
.attr("x",(i+1) * bandwidth)
.attr("y",plotHeight-valueScale(d.end))
.attr("width",bandwidth/2)
.attr("height",valueScale(d.end))
}
})
return svg.node();
}
height=500
margin = ({
top:20,
bottom:20,
left:20,
right:20
});
plotWidth = width - (margin.left + margin.right);
layout = {
let acc = 0;
return data.map(d=>{
let value = d;
let start = acc;
acc = acc + d;
let end = acc;
let negative = value<0;
return { start, end, value, data:d, negative }
})
}
dataExtent = {
let max;
let min;
data2.forEach((d,i)=>{
if(i==0){
max = Math.max(d.end, d.start);
min = Math.min(d.end, d.start);
}else{
min = d3.min([min, d.end, d.start]);
max = d3.max([max, d.end, d.start]);
}
})
return [min,max];
}
valueScale = d3.scaleLinear()
.domain(dataExtent)
.range([0,plotHeight])
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.
