Published
Edited
Aug 27, 2020
15 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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();
}
Insert cell
Insert cell
slide.md("intro")`
# Q + A
`
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3")
Insert cell
_ = require("lodash")
Insert cell
import { slide, notes, style, keyBindings } from '@mkfreeman/slides'
Insert cell
import { displayImage } from "@info474/utilities"
Insert cell
import { chart, button as b } from "@info474/animated-scale-diagram"
Insert cell
import { render_data_table, table_styles } from "@info474/utilities"
Insert cell
import { swatches } from "@d3/working-with-color"
Insert cell
Insert cell
penguin_data = d3.csv(
"https://raw.githubusercontent.com/allisonhorst/palmerpenguins/master/inst/extdata/penguins.csv",
d3.autoType
)
Insert cell
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>`
Insert cell
Insert cell
Insert cell
interplay_diagram = await FileAttachment("interplay_diagram.png").url()
Insert cell
course_img = await FileAttachment("course_img.png").url()
Insert cell
sagan_img = await FileAttachment("sagan.png").url()
Insert cell
json_diagram = await FileAttachment("json_diagram.png").url()
Insert cell
Insert cell
// Available d3 single hue colors
color_list = ["Blues", "Greens", "Greys", "Oranges", "Purples", "Reds"]
Insert cell
styles = md`### Styles`
Insert cell
table_styles
Insert cell
style
Insert cell
html`<style>
h1 {
font-size:1.8em;
}
.slide code {
font-size:3vw;
}
</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