Data visualization design and development
chart = {
const svg = d3.select(DOM.svg(width, height));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
let clipRect = svg.append("clipPath")
.attr("id", "rect-clip")
.append("rect")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", width - margin.left - margin.right)
.attr("height", height - margin.top - margin.bottom);
let clipGroup = svg.append("g")
.attr("class", "clip-group")
.attr("clip-path", "url(#rect-clip)");
clipGroup.selectAll(".chart-line")
.data(data)
.enter().append("path")
.attr("class", "chart-line")
.attr("d", d => line(d))
.style("fill", "none")
.style("stroke", (d, i) => lineColors[i])
.style("stroke-width", 5)
.style("stroke-linejoin", "round")
.style("stroke-linecap", "round");
let labels = clipGroup.selectAll(".topic-label")
.data(data)
.enter().append("text")
.attr("class", "topic-label")
.attr("x", d => xScale(parseTimeWithT(d[d.length - 1].time)))
.attr("y", d=> yScale(d[d.length - 1].views))
.style("fill", (d, i) => lineColors[i])
.text((d, i) => `Topic ${i+1}`);
labels.style("text-anchor", "end")
.style("font-family", "sans-serif");
svg.style("background-color", "white")
svg.selectAll(".y.axis line")
.style("stroke", "grey")
.style("stroke-dasharray", "1,3");
svg.selectAll(".y.axis path")
.style("display", "none");
svg.selectAll(".axis text")
.style("font-size", "1.2em")
.style('font-family', 'Source Sans Pro');
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.
