UW | Data Visualization TA
data = [{name: "tomato", age: 4, cuteness: 5, group: "Group 1"},
{name: "potato", age: 6, cuteness: 2, group: "Group 2"},
{name: "durian", age: 9, cuteness: 10, group: "Group 2"},
{name: "banana", age: 10, cuteness: 3, group: "Group 3"},
{name: "pear", age: 15, cuteness: 4, group: "Group 2"},
{name: "onion", age: 45, cuteness: 9, group: "Group 1"},
{name: "grape", age: 98, cuteness: 9, group: "Group 1"}]
d3.max(data, d => d.age)
d3.min(data, d => d.age)
d3.median(data, d => d.age)
d3.extent(data, d => d.age)
object = ({name:"tomato", age:4})
object["name"]
object.name
oneMap = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
// Create a Map
anotherMap = new Map();
// Set Map Values
anotherMap.set("apples", 500);
oneMap.get("apples")
oneSet = new Set(["a", "b", "c"])
AnotherSet = new Set()
AnotherSet.add("winter mellon")
oneArray = [1, 2, 3, 4, 5]
anotherArray = [{name: "tomato", age: 4}, 2, 3, 4]
anotherArray[0]
anotherArray[anotherArray.length - 1]
anotherArray.pop()
anotherArray.push("bunny")
anotherArray
stringToArray = Array.from("array")
oneMoreSet = new Set(["winter mellon", "watermellon", "squash"])
setToArray = Array.from("oneMoreSet")
mapToArray = Array.from(oneMap)
d3.filter(data, d => d.age > 20)
d3.filter(data, d => d.name === "grape")
toKeep = ["banana", "grape", "durian"]
d3.filter(data, d => toKeep.indexOf(d.name) >= 0)
d3.filter(data, (d, i) => i < 3)
d3.sort(data, (a, b) => b.age - a.age)
d3.sort(data, (a, b) => d3.ascending(b.age, a.age))
d3.sort(data, (a, b) => d3.ascending(b.age, a.age) || d3.ascending(b.cuteness, a.cuteness))
allNames = d3.map(data, d => d.name)
double = d3.map(data, d => d.cuteness * 2)
wordLength = d3.map(data, d => d.name.length)
nameGroup = d3.group(data, cereal => cereal.name)
nameGroup.get("tomato")
d3.rollup(data,
l => l.length,
d => d.group)
d3.rollup(data,
l => d3.sum(l, d => d.cuteness),
d => d.group)
index = d3.index(data, d => d.name)
d3.index(data, d => d.group)
import {textcolor} from "@observablehq/text-color-annotations-in-markdown"
import {toc} from "@jonfroehlich/collapsible-toc"
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.
