Plot.plot({
// BASIC GRAPH CONFIGURATION //
width: 400,
height: 600,
marginTop: 50,
// SETTINGS FOR THE Y AXIS
y: {
grid: true,
ticks: d3.range(0, 101, 10),
tickFormat: (d) => (d === 0 ? `${d}` : `${d}%`), // This is how the ticks get their '%' symbol, but not the 0%
label: "{{Y Label Here}}",
},
// SETTINGS FOR THE X AXIS
x: {
label: "{{X Label Here}}",
},
// SETTINGS FOR THE COLOR SCALE / LEGEND
color: {
range: ["purple", "#ddd"],
legend: true,
domain: ["% Current", "% Target"]
},
// MARKS = EVERYTHING THAT IS "DRAWN" ON THE GRAPH //
marks: [
// MARK 1: GREY BARS BASED ON 'hardcodedData'
Plot.barY(hardcodedData, {
y: "percent_current", // notice how this value aligns with the column name in the dataset
x: "bar", // notice how this value aligns with the column name in the dataset (and matches the below)
fill: "#ddd",
insetLeft: 2,
insetRight: 2,
tip: true // ON/OFF switch for default TOOLTIP implementation!
}),
// MARK 2: PURPLE BARS BASED ON 'hardcodedData'
Plot.barY(hardcodedData, {
y: "percent_target", // notice how this value aligns with the column name in the dataset
x: "bar", // notice how this value aligns with the column name in the dataset (and matches the above)
fill: "purple",
insetLeft: 15, // inset value controls the amount of space between the purple and grey bars
insetRight: 15 // inset value controls the amount of space between the purple and grey bars
}),
// ... MARKS 3, 4, ETC.
/*
* TRY THIS OUT....
* - ruleY is the function to draw a horizontal line across a graph.
* - follow these steps to customize your own graph!
*
* step 1: add new mark
* > Plot.ruleY()
*
* step 2: set the data; this is all we need for a horizontal line, one Y value in an array `[x]`.
* > Plot.ruleY([45])
*
* step 3: create an object w/ options to further configure your line mark...
* > Plot.ruleY([45], {stroke: "green"}) // Draws a green line
* > Plot.ruleY([45], {stroke: "blue", strokeDasharray: "5"}) // Blue dashed line (5px dash length)
* > Plot.ruleY([45], {stroke: "pink", strokeWidth: 4}) // Pink line, 4px thickness (compared to default 1px)
*
* step 4: press [shift] + [Enter] on the keyboard to update the graph with your changes
* (or hit the play button in the top right of this window)
*/
// Plot.ruleY([50], {stroke: "green"}),
]
})
// This is the hardcoded data. Feel free to make changes to these values, but be sure and press the play button in the upper-right corner of this box to apply your data changes to the whole notebook! (You might wonder why your graph hasn't changed if you don't...)
hardcodedData = [
{bar: "#1", percent_current: 87, percent_target: 13},
{bar: "#2", percent_current: 63, percent_target: 45},
{bar: "#3", percent_current: 17, percent_target: 77},
]
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.
