UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
// make a "chart"
chart = {
// Create your svg
const svg = d3.create("svg")
// Store a legend in a variable
const color_legend = legend({
color: d3.scaleSequential([0, 100], d3.interpolateViridis),
title: "Temperature (°F)"
})
// Append your legend, which requires using a *function*
svg.append("g")
.attr("transform", "translate(10, 0)") // appending a G so you can easily position it
.append(() => color_legend)
// {make the rest of your chart here..... axes, marks, etc.}
// Return the chart
return svg.node()
}
md`## Appendix`
d3 = require("d3")
import {legend} from "@d3/color-legend"
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.
