Published
Edited
Oct 22, 2021
4 forks
5 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = FileAttachment("texasHourTempEnergy.csv").csv({ typed: true })
Insert cell
Insert cell
data[0]
Insert cell
Insert cell
Insert cell
// Type code here

Insert cell
Insert cell
Insert cell
Insert cell
// define color scale to match the one in the chart
colorScale = d3.scaleSequential([0, 23], [0, 1]).interpolator(d3.interpolateTurbo)
Insert cell
Insert cell
// import legend from d3
import { Legend } from "@d3/color-legend"
Insert cell
// use Legend w/ color scale
Legend(colorScale, {
title: "hour of the day",
ticks: 24
})
Insert cell
Insert cell
Insert cell
// type your code here


Insert cell
Insert cell
Insert cell
// type your code here


Insert cell
Insert cell
Insert cell
// type your code here


Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {
Q,
A,
styles
} with { renderSnippetOverride as renderSnippet } from "@observablehq/plot-exploration-penguins"
Insert cell
function renderSnippetOverride(str) {
try {
// TODO: if you want to support more variables in the solutions you add them as a string and pass them in here
const func = new Function("data", "Plot", "d3", "width", "colorScale", `return ${str}`);
return func(data, Plot, d3, width, colorScale);
} catch (e) {}
}
Insert cell
styles
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