MIT CS Graduate student in MIT Visualization Group.
Previously undergraduate member of @uwplse and @uwsampl.
plot({
width,
height: 300,
margin: {
top: 10,
bottom: 30,
left: 40,
right: 20,
},
x: ({width}) => d3.scaleBand(alphabet.map(d => d.letter), [0, width]).padding(0.1),
y: ({height}) => d3.scaleLinear([0, d3.max(alphabet.map(d => d.frequency))], [height, 0]),
color: () => d3.scaleSequential(d3.interpolateBlues).domain(d3.extent(alphabet.map(d => d.frequency))),
marks: [
barY(alphabet, {x: "letter", y: "frequency", color: "frequency" }),
],
})
plot({
width,
height: 300,
margin: {
top: 10,
bottom: 30,
left: 40,
right: 20,
},
x: ({width}) => d3.scaleLinear([0, d3.max(cars.map(d => d["economy (mpg)"]))], [0, width]),
y: ({height}) => d3.scaleLinear([0, d3.max(cars.map(d => d["power (hp)"]))], [height, 0]),
marks: [
dot(cars, {x: "economy (mpg)", y: "power (hp)"}),
],
})
svg({ width, height: 100 }, [
g({ x: 0, y: 20 }, rect([{x: 0, width: 10, y: 0, height: 10, fill: 'cornflowerblue' }, {x: 20, width: 10, y: 0, height: 10}])),
circle([{cx: 20, cy: 50, r: 10, fill: 'firebrick' }]),
])
linearDomain = [0, d3.max(alphabet.map(d => +d.frequency))]
linearRange = [100, 0]
linearScale = d3.scaleLinear(linearDomain, linearRange)
({
abstractValue: +alphabet[0].frequency,
screenValue: linearScale(alphabet[0].frequency),
})
ordinalDomain = alphabet.map(d => d.letter)
ordinalRange = [0, width]
ordinalScale = d3.scaleBand(ordinalDomain, ordinalRange)
({
abstractValue: alphabet[0].letter,
screenValue: ordinalScale(alphabet[0].letter),
})
ordinalScale(alphabet[1].letter) - ordinalScale(alphabet[0].letter)
ordinalScale(alphabet[2].letter) - ordinalScale(alphabet[1].letter)
abstractSpace = ({
X: alphabet.map(d => d.letter),
Y: alphabet.map(d => d.frequency),
})
svg({ width, height: 100 }, [
rect(d3.range(alphabet.length).map(i => ({
x: ordinalScale(abstractSpace.X[i]),
y: linearScale(abstractSpace.Y[i]),
width: ordinalScale.bandwidth(), // bar width as determined by ordinal scale
height: linearScale(0) - linearScale(abstractSpace.Y[i]), // by default, SVG starts in the upper-left corner, but we want to render from the bottom-left
fill: 'cornflowerblue'
}))),
])
barY = (data, { x, y, color }) => ({
data,
encodings: { x, y, color },
scale: (channels, scales, dimensions) => {
const { X, Y, COLOR } = channels;
const { xScale, yScale, colorScale } = scales;
const indices = d3.range(X.length);
return indices.map(i => ({
x: xScale(X[i]),
// y: dimensions.height - yScale(Y[i]),
y: yScale(Y[i]),
width: xScale.bandwidth(),
// height: yScale(Y[i]),
height: yScale(0) - yScale(Y[i]),
fill: colorScale(COLOR[i])
}))
},
render: rect,
})
dot = (data, { x, y, color }) => ({
data,
encodings: { x, y, color },
scale: (channels, scales, dimensions) => {
const { X, Y, COLOR } = channels;
const { xScale, yScale, colorScale } = scales;
const indices = d3.range(X.length);
return indices.map(i => ({
cx: xScale(X[i]),
cy: yScale(Y[i]),
r: 3,
fill: colorScale ? colorScale(COLOR[i]) : 'black'
}))
},
render: circle,
})
plotMark = (mark, scales, dimensions) => {
const {data, encodings, scale, render} = mark;
// 1. Use the encoding functions to extract channels from the data
const channels = extractChannels(data, encodings);
// 2. Reify the scales by feeding them the dimensions of the container.
const reifiedScales = reifyScales(scales, dimensions);
// 3. Call the mark's scale function get the screen space coordinates.
const scaledData = scale(channels, reifiedScales, dimensions);
// 4. Call the mark's render function on the scaled data.
return render(scaledData);
}
extractChannels = (data, encodings) => {
let channels = {};
for (const [c, encoding] of Object.entries(encodings)) {
channels[c.toUpperCase()] = data.map(d => d[encoding]);
}
return channels;
}
extractChannels(alphabet, {x: "letter", y: "frequency"})
reifyScales = (scales, dimensions) => {
let reifiedScales = {};
for (const [name, scale] of Object.entries(scales)) {
reifiedScales[name] = scale(dimensions);
}
return reifiedScales;
}
svg({width, height: 300}, [
plotMark(
barY(alphabet, {x: "letter", y: "frequency", color: "frequency" }),
{
xScale: ({width}) => d3.scaleBand(alphabet.map(d => d.letter), [0, width]).padding(0.1),
yScale: ({height}) => d3.scaleLinear([0, d3.max(alphabet.map(d => d.frequency))], [height, 0]),
// colorScale: () => () => 'black',
colorScale: () => d3.scaleSequential(d3.interpolateBlues).domain(d3.extent(alphabet. map(d => d.frequency))),
},
{width: width, height: 300}),
])
xAxis = (xScale) => d3.create("svg:g")
.call(d3.axisBottom(xScale))
.node()
svg({width, height: 50}, xAxis(d3.scaleBand(alphabet.map(d => d.letter), [0, width]).padding(0.1)))
yAxis = (yScale) => d3.create("svg:g")
.call(d3.axisLeft(yScale))
.node()
svg({width, height: 300},
g({x: 20},
yAxis(
d3.scaleLinear(d3.extent(alphabet.map(d => d.frequency)), [300, 0])
)
)
)
import {Legend, Swatches} from "@d3/color-legend"
Legend(d3.scaleSequential(d3.interpolateBlues).domain(d3.extent(alphabet.map(d => d.frequency))))
plot = (options) => {
let { width, height, margin, marks, ...scales } = options;
// compute dimensions from outer width, height, and margins
const dimensions = { width: width-margin.left-margin.right, height: height-margin.bottom-margin.top };
// reify scales
scales = reifyScales(scales, dimensions);
// append "Scale" to scale names
scales = renameScales(scales);
const { xScale, yScale, colorScale } = scales;
return svg({ width, height },
g({x: margin.left, y: margin.top}, [
// here are our axes and legends!
g({y: dimensions.height}, xAxis(xScale)),
g({}, yAxis(yScale)),
...colorScale ? [g({x: dimensions.width-350}, Legend(colorScale))] : [],
// and here are our marks! (we use a modified version of `plotMark` that assumes the scales have already been reified)
...marks.map(m =>
/* TODO: not sure why this is off by half a pixel... */
g({x: 0, y: -0.5}, plotMarkReified(m, scales, dimensions)))
]));
}
plotMarkReified = (mark, scales, dimensions) => {
const {data, encodings, scale, render} = mark;
const channels = extractChannels(data, encodings);
const scaledData = scale(channels, scales, dimensions);
return render(scaledData);
}
renameScales = (scales) => {
let renamedScales = {};
for (const [name, scale] of Object.entries(scales)) {
renamedScales[name + "Scale"] = scale
}
return renamedScales;
}
plot({
width,
height: 300,
margin: {
top: 10,
bottom: 30,
left: 40,
right: 20,
},
x: ({width}) => d3.scaleBand(alphabet.map(d => d.letter), [0, width]).padding(0.1),
y: ({height}) => d3.scaleLinear([0, d3.max(alphabet.map(d => d.frequency))], [height, 0]),
color: () => d3.scaleSequential(d3.interpolateBlues).domain(d3.extent(alphabet.map(d => d.frequency))),
marks: [
barY(alphabet, {x: "letter", y: "frequency", color: "frequency" }),
],
})
plot({
width,
height: 300,
margin: {
top: 10,
bottom: 30,
left: 40,
right: 20,
},
x: ({width}) => d3.scaleBand(alphabet.map(d => d.letter), [0, width]).padding(0.1),
y: ({height}) => d3.scaleLinear([0, d3.max(alphabet.map(d => d.frequency))], [height, 0]),
color: () => d3.scaleSequential(d3.interpolateBlues).domain(d3.extent(alphabet.map(d => d.frequency))),
marks: [
dot(alphabet, {x: "letter", y: "frequency", color: "frequency" }),
],
})
// uh oh! the points aren't centered...
plot({
width,
height: 300,
margin: {
top: 10,
bottom: 30,
left: 40,
right: 20,
},
x: ({width}) => d3.scaleBand(alphabet.map(d => d.letter), [0, width]).padding(0.1),
y: ({height}) => d3.scaleLinear([0, d3.max(alphabet.map(d => d.frequency))], [height, 0]),
color: () => d3.scaleSequential(d3.interpolateBlues).domain(d3.extent(alphabet.map(d => d.frequency))),
marks: [
barY(alphabet, {x: "letter", y: "frequency", color: "frequency" }),
dot(alphabet, {x: "letter", y: "frequency" }),
],
})
plot({
width,
height: 300,
margin: {
top: 10,
bottom: 30,
left: 40,
right: 20,
},
x: ({width}) => d3.scaleLinear([0, d3.max(cars.map(d => d["economy (mpg)"]))], [0, width]),
y: ({height}) => d3.scaleLinear([0, d3.max(cars.map(d => d["power (hp)"]))], [height, 0]),
marks: [
dot(cars, {x: "economy (mpg)", y: "power (hp)"}),
],
})
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.
