Public
Edited
Apr 25, 2023
1 star
Insert cell
Insert cell
Insert cell
Insert cell
nepal_tanahu_immunization_2016_2018_slope_chart =
slopeChart(sampleData, { 
// Required
x: "year",
y: "rate",
z: "indicator",

// Optionals
marginLeft: 80,
marginRight: 80,
width: 960,
height: 400,
yFormat: "%"
})
Insert cell
Insert cell
Insert cell
function slopeChart(
data,
{
/*
* Required
*/
x, // key for column name, or function given d in data, returns a (ordinal) column name
y, // key for value, or function given d in data, returns a (quantitative) value,
z = () => "", // key for series name, or function given d in data, returns a (categorical) series name

/*
* Optional
*/
color = main.grey["1000"],
stroke = main.blue["600"],
strokeWidth = 1.5,
haloWidth = 6,
yFormat, // D3 format specifier, refer https://github.com/d3/d3-format/blob/main/README.md#locale_format
...rest
} = {}
) {
const X = typeof x === "string" ? (d) => d[x] : x;
const Y = typeof y === "string" ? (d) => d[y] : y;
const Z = typeof z === "string" ? (d) => d[z] : z;

return d3SlopeChart(data, {
x: X,
y: Y,
z: Z,
color,
yFormat,
stroke,
strokeWidth,
haloWidth,
...rest
});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more