Published
Edited
Aug 26, 2020
Importers
md`# Line Chart`
getLineChart = function(data, metrics=[], {
color="cornflowerblue"
}={}) {
const accessors = [
metrics[0] ? d => d[metrics[0]] : d => d,
metrics[1] ? d => d[metrics[1]] : d => d,
metrics[2] ? d => d[metrics[2]] : d => d,
]
const dms = getDimensions({
width: width,
height: 500,
marginBottom: 50,
marginLeft: 100,
})
const {wrapper, svg, bounds} = drawChart(dms)
const xScale = getScaleWithAxis(
"x", dms, data, accessors[0], bounds, metrics[0]
)
const x = d => xScale(accessors[0](d))
const yScale = getScaleWithAxis(
"y", dms, data, accessors[1], bounds, metrics[1]
)
const y = d => yScale(accessors[1](d))
const line = d3.line()
.x(x)
.y(y)
bounds.append("path")
.datum(data.sort((a,b) => x(a) - x(b)))
.attr("fill", "none")
.attr("stroke", color)
.attr("stroke-width", 1.5)
.attr("d", line);
return wrapper.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.
