Past: Reuters Graphics, The Times, BBC News Labs.
🇫🇷 in 🇩🇪
chart = {
const svg = d3.select(DOM.svg(width, height))
.style("width", width)
.style("height", height);
const clrs = d3.scaleOrdinal(d3.schemeSet2);
//The line SVG Path we draw
lineData.map((shape, index) => {
const lineGraph = svg.append("path")
.attr("d", lineFunction(shape.coordinates))
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("fill", clrs(shape.name))
})
console.log('lol', lineData)
svg.append("g")
.selectAll("text")
.data(tradEventsWithCoordinates)
.enter().append("text")
.attr("x", d => d.x - 100)
.attr("y", d => (d.y1 + d.y0) / 2)
.text(d => d.name)
// .attr("dy", 10)
.call(wrap, 100);
let text = svg.append("g")
.selectAll("text")
.data(eaveEventsWithCoordinates)
.enter().append("text")
.text(d => d.name)
.attr("x", d => d.x +5)
.attr("y", d => (d.y1 + d.y0) / 2)
// .attr("dy", 1)
.call(wrap, 100)
return svg.node();
}
traditionalEvents = [
{id: "t.abs", name: "Abstained", duration: 4},
{id: "t.conconf", name: "conconf", duration: 325},
{id: "t.connoconf", name: "connoconf", duration: 24},
{id: "t.labnoconf", name: "labnoconf", duration: 253},
]
eaveEvents = [
{id: "e.abs", name: "Abstained", duration: 4},
{id: "e.conconf", name: "conconf", duration: 340},
{id: "e.connoconf", name: "connoconf", duration: 24*2},
{id: "e.labnoconf", name: "labnoconf", duration: 24*8},
]
humanizedEdges = [
{source: "t.abs", target: "e.abs", value: 1, name: 'abs'},
{source: "t.conconf", target: "e.conconf", value: 1, name: 'conf'},
{source: "t.connoconf", target: "e.connoconf", value: 1, name: 'connoconf'},
{source: "t.labnoconf", target: "e.labnoconf", value: 1, name: 'labnoconf'},
]
function addCoordinates(events, xPos) {
return events.reduce((acc, event) => {
let base = {
...event,
x: xPos,
id: event.id,
};
if (acc.length === 0) {
base.y0 = yScale(0);
base.y1 = event.duration === 0 ? 0 : yScale(event.duration);
} else {
let prev = acc[acc.length-1];
base.y0 = prev.y1 + 25;
base.y1 = prev.y1 + (event.duration === 0 ? 0 : yScale(event.duration));
}
acc.push(base);
return acc;
}, []);
}
lineData = _.reverse(humanizedEdges.map((edge, index) => {
console.log(edge, index)
let source = findById(tradEventsWithCoordinates, edge.source),
target = findById(eaveEventsWithCoordinates, edge.target);
return {name: edge.name, coordinates: [
[source.x, source.y0], // source top
[source.x, source.y1], // source bottom
[target.x, target.y1], // target top
[target.x, target.y0], // target bottom
[source.x, source.y0], // source top - go back to where we started
]};
}))
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.
