Boston-based Senior Front End Developer
Public
Edited
Dec 22, 2023
1 star
window.data = {
xValues: [0.15, 0.17, 0.2, 0.17, 0.16, 0.15],
yValues: [0, 1, 2, 3, 4, 5]
}
Plot.plot({
width: 800,
height: 500,
marginBottom: 40,
marginTop: 30,
x: { label: "value", tickSize: 0, type: "band" },
y: { label: "count", tickSize: 0, type: "band" },
marks: [Plot.barX(window.data.xValues, {
y: window.data.yValues,
fill: (d, i) =>
["steelblue", "orange", "green", "gray", "red"][i % ["steelblue", "orange", "green", "gray", "red"].length],
// NOTE: Need to reduce spacing between bars
insetBottom: -6,
// NOTE: Do I need this to modify the chart margins, or should I modify the label for default 'type'?
// transform: (data, facets, options) => {
// console.log("transform: ", { data, facets, options });
// return {
// data,
// facets,
// };
// },
tip: {
// NOTE: Needed for proper ordering of values in the tooltip
format: {
y: true,
x: true,
// NOTE: Why does this show up in the tip?
fill: false,
},
},
})],
className: "horizontal-bar-plot",
});
Plot.plot({
width: 800,
height: 500,
marginBottom: 40,
marginTop: 30,
x: { label: "value", tickSize: 0 },
y: { label: "count", tickSize: 0, type: "band" },
marks: [Plot.barX(window.data.xValues, {
y: window.data.yValues,
fill: (d, i) =>
["steelblue", "orange", "green", "gray", "red"][i % ["steelblue", "orange", "green", "gray", "red"].length],
// NOTE: Need to reduce spacing between bars
insetBottom: -6,
// NOTE: Do I need this to modify the chart margins, or should I modify the label for default 'type'?
// transform: (data, facets, options) => {
// console.log("transform: ", { data, facets, options });
// return {
// data,
// facets,
// };
// },
tip: {
// NOTE: Needed for proper ordering of values in the tooltip
format: {
y: true,
x: true,
// NOTE: Why does this show up in the tip?
fill: false,
},
},
})],
className: "horizontal-bar-plot",
});
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.
