d3tip = require("d3-tip")
width = 1500
height = 500
step = (width-margin.right-margin.left)/15;
x = d3.scaleOrdinal()
.domain(["", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"])
.range(d3.range(margin.left, margin.left + 9*step, step));
y = d3.scaleLinear()
.domain([0, data.reduce((acc, value) => {
return (acc = acc > value.y ? acc : value.y);
}, 0) + 0.5])
.range([height-margin.bottom, margin.top])
xAxis = g => g
.attr("id", "axis")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
.attr("opacity", "0")
.selectAll("text")
.attr("transform", "translate(10,0)rotate(-45)")
.style("text-anchor", "end")
.style("font-size", 16)
.style("fill", "#69a3b2")
yAxis = g => g
.attr("id","yaxis")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickSizeOuter(0))
.attr("opacity", "0")
.selectAll("text")
.style("text-anchor", "end")
.style("font-size", 16)
.style("fill", "#69a3b2")
data[14]["name"]
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
myColor = d3.scaleOrdinal()
.domain(["a","b","c"])
.range(["#CC333F","#00A0B0", "#EDC951"]);
popularComp = FileAttachment("Popular-Comp.json").json()
myColor("first")
margin = ({top: 25, right: 20, bottom: 75, left: 50})
d3 = require("d3@6")
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.
