The avatar for @daniellecarrick
Danielle
D3: Danielle Does Data
Public
Edited
May 9
1
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.cell(weather.slice(-365), {
x: d => d.date.getUTCDate(),
y: d => d.date.getUTCMonth(),
fill: "temp_max"
})
]
})
Insert cell
colorScale = d3.scaleLinear(minMax, ['white','#5277ff'])
Insert cell
colorScale(715)
Insert cell
viewof color = Inputs.color({label: "Favorite color", value: `${colorScale(3190)}`})
Insert cell
colorScale(3190)
Insert cell
colorScale(6704)
Insert cell
d3.color(colorScale(18416)).formatHex()
Insert cell
workbook = FileAttachment("Raw Data-2025-04-29 (1).xlsx").xlsx()
Insert cell
workbook.sheetNames
Insert cell
data = workbook.sheet(0, {
headers: true,
// range: "A1:J10"
})
Insert cell
data
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
averages = {};
Insert cell
mapping = data.map(x=> ({value: x.value, color: colorScale(x.value)}))

Insert cell
minMax = d3.extent([0,70388])
Insert cell
groupedData = d3.groups(data,d => d.name)
Insert cell
averageAndColor = groupedData.map(x=>
Insert cell

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.
Learn more