Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Published
Edited
Aug 27, 2020
15 stars
encodings = {
const div = d3.create("div").attr("class", "slide slide--small");
const svg = div.append("svg").style("fill", "#5e5ef1");
const data = [5, 10, 15, 20, 25];
// Circles: an *area* encoding
const circles = svg
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", (d, i) => (i + 1) * 45)
.attr("cy", (d, i) => 90 - d)
.attr("r", d => d);
// Rectangles -- a *position* encoding
const rects = svg
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d, i) => data.length * 55 + (i + 1) * 20)
.attr("width", 10)
.attr("y", d => 90 - d)
.attr("height", d => d);
// Text -- a *color* and *size* encoding
const text = svg
.selectAll("text")
.data(data)
.join("text")
.attr("x", (d, i) => data.length * 75 + (i + 1) * 35)
.attr("y", 90)
.text(d => d)
.style("opacity", d => d / d3.max(data))
.style("font-size", d => d + "px");
const label = svg
.append("text")
.style("font-size", "35px")
.text("D3 requires explicitly choosing your encodings")
.attr("y", 25)
.style("fill", "black");
return div.node();
}
penguin_chart = {
// *Design choice*: create your "universe" for drawing, including necessary spacing
const margin = { top: 70, right: 200, bottom: 80, left: 70 };
const chart_width = width - 100;
const chart_height = 400;
const svg = d3
.create("svg")
.attr("class", "slide slide--small")
.style("height", chart_height + "px")
.style("width", width + "px")
.style('font-family', "sans-serif")
.style("font-size", "20px")
.style("display", "block")
.style("text-anchor", "middle");
// *Data exploration*: understand the *extent* of your data to articulate the drawing space
const xScale = d3
.scaleLinear()
.domain(d3.extent(penguin_data, d => +d.bill_length_mm)) // forces understanding data values
.range([margin.left, chart_width - margin.right]);
const yScale = d3
.scaleLinear()
.domain(d3.extent(penguin_data, d => d.bill_depth_mm))
.range([chart_height - margin.bottom, margin.top]);
// *Attention to detail*: choose where and how to render axes to communicate the scales you are using
svg
.append("g")
.attr("transform", `translate(0,${chart_height - margin.bottom})`)
.call(d3.axisBottom(xScale));
svg
.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale));
// *Design choice*: Use a *position* encodings to express underlying data
svg
.selectAll("circle")
.data(penguin_data)
.join("circle")
.attr("cx", d => xScale(d.bill_length_mm))
.attr("cy", d => yScale(d.bill_depth_mm))
.attr("r", 5)
.style("opacity", .5)
.style("fill", "blue");
// *Attention to detail*: provide appropriate labels
svg
.append("text")
.text("Bill Length")
.attr("x", xScale.range()[1] / 2)
.attr("y", chart_height - margin.bottom + 35);
svg
.append("text")
.text("Bill Depth")
.attr(
"transform",
`translate(${margin.left - 40}, ${chart_height / 2})rotate(-90)`
);
svg
.append("text")
.text("Comparing Bill Length and Depth")
.attr("x", xScale.range()[1] / 2)
.attr("y", margin.top - 35);
svg
.append("text")
.text(
"(an example of the design choices, data exploration, and attention to detail demanded by D3)"
)
.attr("x", xScale.range()[1] / 2)
.attr("y", margin.top - 18)
.style("font-size", "16px")
.style("font-style", "italic")
.style("opacity", .5);
return svg.node();
}
slide.md("intro")`
# Q + A
`
d3 = require("d3")
_ = require("lodash")
import { slide, notes, style, keyBindings } from '@mkfreeman/slides'
import { displayImage } from "@info474/utilities"
import { chart, button as b } from "@info474/animated-scale-diagram"
import { render_data_table, table_styles } from "@info474/utilities"
import { swatches } from "@d3/working-with-color"
penguin_data = d3.csv(
"https://raw.githubusercontent.com/allisonhorst/palmerpenguins/master/inst/extdata/penguins.csv",
d3.autoType
)
fullscreen_icon = `<svg style="display:inline;" height=15 width = 15><path style="fill:#9d9d9d; opacity:1" clip-rule="evenodd" d="M8.00001 2L3 2H2L2 3L2.00001 8L4.00001 8L4.00001 5.47903L6.93541 8.41443L8.34963 7.00022L5.34941 4L8.00001 4L8.00001 2ZM8.00001 14H13H14V13V8H12V10.6122L9.50723 8.15797L8.10409 9.58317L10.5589 12H8.00001V14Z" fill="currentColor"></path></svg>`
ihme_logo = await FileAttachment("ihme_img.png").url()
ischool_logo = await FileAttachment("iSchoolPrimary_RGB_Purple.svg").url()
interplay_diagram = await FileAttachment("interplay_diagram.png").url()
course_img = await FileAttachment("course_img.png").url()
sagan_img = await FileAttachment("sagan.png").url()
json_diagram = await FileAttachment("json_diagram.png").url()
// Available d3 single hue colors
color_list = ["Blues", "Greens", "Greys", "Oranges", "Purples", "Reds"]
styles = md`### Styles`
table_styles
style
html`<style>
h1 {
font-size:1.8em;
}
.slide code {
font-size:3vw;
}
</style>`
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.
