Plot.plot({
marginLeft: 150,
marks: [
Plot.barX(data, {x: "POP_2015", y: "Metro"}),
]
})
Plot.plot({
y: {axis: false},
marks: [
Plot.barX(data, {x: "POP_2015", y: "Metro", fill: "gray"}),
Plot.text(data, {y: "Metro", text: "Metro", dx: 4, textAnchor: "start", frameAnchor: "left", fill: "currentColor", stroke: "white"})
]
})
Plot.plot({
marginLeft: 18,
y: {axis: false},
marks: [
Plot.barX(data, {x: "POP_2015", y: "Metro", fill: "gray"}),
Plot.axisY({textAnchor: "start", dx: 16, tickSize: 0, textStroke: "white"})
]
})
data = d3.shuffle(citywages).slice(0, 20)
Plot.plot({
x: {reverse: true, labelAnchor: "left"},
y: {axis: "right", label: null},
marginLeft: 30,
marginRight: 350,
marks: [Plot.barX(data, {x: "POP_2015", y: "Metro"})]
})
Plot.plot({
marginTop: 6,
height: data.length * 28,
y: {axis: false, paddingInner: 0.7},
marks: [
Plot.barX(data, {x: "POP_2015", y: "Metro"}),
Plot.text(data, {y: "Metro", text: "Metro", dy: -10, textAnchor: "start", frameAnchor: "left"})
]
})
Plot.plot({
marginTop: 6,
height: data.length * 22,
y: {axis: false},
marks: [
Plot.ruleY(data, {x: "POP_2015", y: "Metro", strokeWidth: 2}),
Plot.text(data, {y: "Metro", text: "Metro", dy: -6, textAnchor: "start", frameAnchor: "left"})
]
})
Inputs.table(data, {height: "auto", columns: ["Metro", "POP_2015"], width: 400, layout: "auto"})
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.
