Published
Edited
Jul 29, 2020
5 stars
function slopeChart(multipleData) {
const chartSpace = d3.select(this);
const n = multipleData.visits.length;
const x = d3.scalePoint()
.domain(d3.range(n))
.range([params.multiples.margin, params.multiples.width + params.multiples.margin])
.padding(0.5);
const y = d3.scaleLinear()
.domain(sharedYExtent)
.range([params.multiples.height - params.multiples.margin, params.multiples.margin]);
const line = d3.line()
.x((d, i) => x(i))
.y(y);
const plots = chartSpace.append('g')
.selectAll('g')
.data([multipleData])
.join('g')
plots.append('path')
.attr("d", d => line(d.visits))
.attr("fill", "none")
.attr("fill-opacity", 0.5)
.attr("stroke", "#4EA376")
.attr("stroke-width", 1);
plots.append("text")
.attr("class", "cat-name")
.attr("x", params.multiples.width / 2)
.attr("y", params.multiples.height + params.multiples.margin)
.attr("text-anchor", "middle")
.style("font-size", 9)
.text(d => d.name.slice(0,3) + "…");
}
function translate(d, i) {
return `translate(
${(params.multiples.width - params.multiples.margin) * (2 * (i % params.multiples.columns) + 1)},
${(params.multiples.width - params.multiples.margin) * ((2 * Math.floor(i / params.multiples.columns)) + 1)}
)`;
}
mutable params = {
let output = {};
output["svg"] = {
"width": 954,
"height": 240
};
output["margin"] = {
"top": 36,
"right": 24,
"bottom": 72,
"left": 24
};
output["padding"] = {
"top": 4,
"right": 12,
"bottom": 4,
"left": 12
};
output["multiples"] = {
"margin": 4,
"width": (output["svg"]["height"] / 10),
"height": 60,
"columns": Math.floor(output["svg"]["width"] / 60)
};
output["plot"] = {
"x": output["margin"]["left"],
"y": output["margin"]["top"],
"width": output["svg"]["width"] - output["margin"]["left"] - output["margin"]["right"],
"height": output["svg"]["height"] - output["margin"]["top"] - output["margin"]["bottom"]
};
return output;
}
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.
