md`**Review:**
* What is the purpose of visualization?
* What are the two steps to map data to visualization?
1. rows --> Marks (PLAV)
2. columns --> Channels (x, y, color, size, ...) `
md`**Resources:**
* D3: https://d3js.org
* D3 joins: https://observablehq.com/@d3/learn-d3-joins
* D3 shapes: https://observablehq.com/@d3/learn-d3-shapes
* D3 scales and axes: https://observablehq.com/@d3/learn-d3-scales
* Axes API: https://github.com/d3/d3-axis
* Scales API: https://github.com/d3/d3-scale
* Color scales API: https://github.com/d3/d3-scale-chromatic
* D3 color legends: https://observablehq.com/@d3/color-legend
* D3 gallery: https://observablehq.com/@d3/gallery
* Murray chapters 6, 7, 8
**Technology stack:**
* HTML5, DOM, CSS, SVG, JavaScript, D3, Observable
* D3 in JS vs. D3 in Observable?
`
svg = html`
<svg width="400" height="200" style="border:1px solid black">
<circle cx="100" cy="100" r="50" fill="red"/>
<rect x='100' y='50' width='100' height='30' fill='steelblue'>
</svg>`
html`<style type='text/css'>
.fancy {fill:steelblue; }
</style>'`
d3.select(svg).append('rect').attr('x',0).attr('y',0).attr('height', '50').attr('width','50').attr('class','fancy')
md ` styles can be defined with an html declarative form and thus available `
md`### D3 SVG`
d3 = require("d3@6")
md`### D3 data`
data = d3.csvParse(await FileAttachment("States2010.csv").text(), d3.autoType)
.sort( (a,b) => b.PercentCollegeGrad - a.PercentCollegeGrad)
md`## D3 drawing
Scaling: Data Domain → Graphical Range... <br>
Let's see a Bar Chart <br>
with Each State's height as PercentCollegeGrad <br>
and its color as IncomePerCapita.<br>
In our data loading step, we sorted by descending PercentCollegeGrad . `
d3.extent(data, d=>d.IncomePerCapita)
// Example of a IncomePerCapita data column's domain
{
var element = html`
<svg width="800" height="300" style="border:1px solid black" >
</svg>`;
var svg = d3.select(element);
// scaling functions here for
// yScale
var yScale = d3.scaleLinear().domain([0,50]).range([0,300]);
// and colorScale
var cScale = d3.scaleSequential(d3.interpolateBlues).domain([28000, 65000])
// D3 stuff here... functional style ... chaining operations
//
var rects = svg.selectAll('rect')
.data(data).join('rect') // map rows to rects
.attr('x', (d,i) => i * 15) // map index to x channel .attr('x', (d,i) => i * 15)
.attr('width', 13) // give a size factor for width .attr('width', 13)
// percent col grad -> 'height' channel
.attr('height', (d,i) => yScale (d.PercentCollegeGrad ) )
// map y position
.attr('y', (d,i) => (300 - yScale (d.PercentCollegeGrad) ) )
// income per capita to color saturation
//.style('fill', 'steelblue')
.style('fill', (d,i) => cScale (d.IncomePerCapita) )
// add a tooltip title box to the rectangle
rects.append('title').text((d,i) => d.Abbrev + ' ' + d.PercentCollegeGrad + ' ' + d.IncomePerCapita);
return element;
}
import {legend} from '@d3/color-legend'
// cScale = d3.scaleSequential(d3.interpolateBlues).domain([20000, 65000]);
//legend({
// color: cScale,
/// title: "Income Per Capita ($)"
//})
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.
