viewof bins = Inputs.range([3, 20], {step: 1, label: "Bins"})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.rectY(data, Plot.binX({y: "sum"}, {x: "flipper_length_mm", thresholds: bins}))
]
})
viewof positions = [
{ position: 0.1, label: "Left" },
{ position: 0.3, label: "Center-Left" },
{ position: 0.5, label: "Center" },
{ position: 0.7, label: "Center-Right" },
{ position: 0.9, label: "Right" }
]
viewof colors = ["darkblue", "lightblue", "white", "lightcoral", "darkred"]
width = 800
height = 100
colorScale = d3.scaleLinear()
.domain(positions.map(d => d.position))
.range(colors)
svg = html`<svg width=${width} height=${height}></svg>`
svg.selectAll("rect")
.data(positions)
.enter()
.append("rect")
.attr("x", d => d.position * width)
.attr("width", (1 / positions.length) * width)
.attr("height", height)
.attr("fill", d => colorScale(d.position))
svg.selectAll("text")
.data(positions)
.enter()
.append("text")
.attr("x", d => d.position * width + ((1 / positions.length) * width) / 2)
.attr("y", height / 2)
.attr("text-anchor", "middle")
.attr("dy", "0.35em")
.text(d => d.label)
svg.node()
viewof positions = [
{ position: 0.1, label: "Left" },
{ position: 0.3, label: "Center-Left" },
{ position: 0.5, label: "Center" },
{ position: 0.7, label: "Center-Right" },
{ position: 0.9, label: "Right" }
]
viewof colors = ["darkblue", "lightblue", "white", "lightcoral", "darkred"]
width = 800
height = 100
colorScale = d3.scaleLinear()
.domain(positions.map(d => d.position))
.range(colors)
svg = DOM.svg(width, height)
svg.selectAll("rect")
.data(positions)
.enter()
.append("rect")
.attr("x", d => d.position * width)
.attr("width", (1 / positions.length) * width)
.attr("height", height)
.attr("fill", d => colorScale(d.position))
svg.selectAll("text")
.data(positions)
.enter()
.append("text")
.attr("x", d => d.position * width + ((1 / positions.length) * width) / 2)
.attr("y", height / 2)
.attr("text-anchor", "middle")
.attr("dy", "0.35em")
.text(d => d.label)
svg
positions = [
{ position: 0.1, label: "Left" },
{ position: 0.3, label: "Center-Left" },
{ position: 0.5, label: "Center" },
{ position: 0.7, label: "Center-Right" },
{ position: 0.9, label: "Right" }
];
colors = ["darkblue", "lightblue", "white", "lightcoral", "darkred"];
width = 800;
height = 100;
colorScale = d3.scaleLinear()
.domain(positions.map(d => d.position))
.range(colors);
svg = DOM.svg(width, height);
svg.selectAll("rect")
.data(positions)
.enter()
.append("rect")
.attr("x", d => d.position * width)
.attr("width", (1 / positions.length) * width)
.attr("height", height)
.attr("fill", d => colorScale(d.position));
svg.selectAll("text")
.data(positions)
.enter()
.append("text")
.attr("x", d => d.position * width + ((1 / positions.length) * width) / 2)
.attr("y", height / 2)
.attr("text-anchor", "middle")
.attr("dy", "0.35em")
.text(d => d.label);
svg;
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.
