The avatar for @info474
Spring 2020 Info Vis
UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
Apr 30, 2020
1 fork
Importers
6 stars
In Class
Data Basics: Loading + ManipulatingData Basics: Loading + Manipulating (complete)D3 Activity 1D3 Activity IID3 Activity II (complete)Visual CognitionVisual Cognition (Complete)Treemap ActivityTreemap Activity (complete)
Using Color With D3
D3 Small MultiplesScroll StarterScroll Complete
Also listed in…
Tutorials
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
ramp(d3.scaleLinear().range(["white", "blue"]))
Insert cell
Insert cell
// Use a linear scale
ramp(d3.scaleLinear().range([d3.schemeBlues[3][0], d3.schemeBlues[3][2]]))
Insert cell
// The scale Sequential works just the same
ramp(d3.scaleSequential([d3.schemeBlues[3][0], d3.schemeBlues[3][2]]))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { select, slider } from "@jashkenas/inputs"
Insert cell
d3 = require("d3@5", "d3-scale@^3.2.0")
Insert cell
import { swatches } from "@d3/working-with-color"
Insert cell
import { legend, swatches as legend_swatches } from "@d3/color-legend"
Insert cell
import { ramp } from "@d3/sequential-scales"
Insert cell
import { displayCaution, displayImage } from "@info474/utilities"
Insert cell
import { chart } from "@d3/choropleth"
Insert cell
html`<style>
p code, li code {color: #c30771;}
</style>`
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