Published
Edited
Apr 28, 2022
Insert cell
# Tools 4: Observable
Insert cell
## Table View and Summary View of Data
Insert cell
data = FileAttachment("bandcamp-oneday.csv").csv({typed: true})
Insert cell
Inputs.table(data);
Insert cell
import {SummaryTable} from "@observablehq/summary-table"
Insert cell
SummaryTable(data)
Insert cell
## Practice from Observable Post and Lecture Videos
Insert cell
//this is a function in D3 and Observable that filters data
//'d' will hold the data that you supply it
sample = data.filter(d => d.country_code == "us")
Insert cell
Inputs.table(sample);
Insert cell
scatter = Plot.plot({
marks: [
Plot.dot(sample, {x: "utc_timestamp", y: "amount_paid"})
]
})
Insert cell
scatter2 = Plot.plot({
marks: [
Plot.dot(sample, {x: "utc_timestamp", y: "amount_paid", fill: "blue"}),
Plot.dot(sample, {x: "utc_timestamp", y: "item_price", stroke: "orange"}),
]
})
Insert cell
scatter3 = Plot.plot({
marks: [
Plot.dot(sample, {x: "utc_timestamp", y: "item_price", stroke: "orange"}),
Plot.arrow(sample, {x1: "utc_timestamp", y1: "item_price", x2: "utc_timestamp", y2: "amount_paid"})
]
})
Insert cell
scatterDiff = Plot.plot({
marks: [
Plot.dot(sample, {x: "utc_timestamp", y: d => d.amount_paid - d.item_price})
]
})
Insert cell
scatterColor = Plot.plot({
marks: [
Plot.dot(sample, {
x: "utc_timestamp",
y: d => d.amount_paid - d.item_price,
fill: d => d.amount_paid - d.item_price,
stroke: "none"})
],
color: {type: "sequential",
scheme: "magma",
reverse: true
},
})
Insert cell
scatterBi = Plot.plot({
marks: [
Plot.dot(sample, {
x: "utc_timestamp",
y: d => d.amount_paid - d.item_price,
stroke: d => d.amount_paid - d.item_price > 0,
fill: d => d.amount_paid - d.item_price > 0
})
],
color: {range: ["orange", "steelblue"]}
})
Insert cell
barAverage = Plot.plot({
marks: [
Plot.barX(data, Plot.groupY({x: "mean"},{
x: "amount_paid",
y: "type",
sort: { y: "x", reverse: true, limit: 3 } //sort y axis according to x value. Chrono or alpha.
}))
], //dont forget comma!!!!
marginLeft: 70,
})
Insert cell
hist = Plot.plot({
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {
x: d => d.amount_paid - d.item_price,
thresholds: 10
}))
],
grid: true,
marginLeft: 80
})
Insert cell
viewof group = Inputs.select(["type", "country"], {label: "Group by"})
Insert cell
viewof aggregate = Inputs.radio(["mean", "sum"], {label: "Aggregate", value: "mean"})
Insert cell
barInput1 = Plot.plot({
marks: [
Plot.barX(data, Plot.groupY({x: aggregate},{
x: "amount_paid",
y: group,
sort: { y: "x", reverse: true, limit: 10 } //sort y axis according to x value. Chrono or alpha.
}))
], //dont forget comma!!!!
caption: `${aggregate} amount paid by ${group}`,
x: { label: `${aggregate} amount_paid`},
marginLeft: 100
})
Insert cell
## My Novel Visualization
Insert cell
viewof group2 = Inputs.select(["type", "artist_name", "country"], {label: "Group by"})
Insert cell
barInput2 = Plot.plot({
marks: [
Plot.barX(data, Plot.groupY({x: "count"},{
y: group2,
sort: {y: "x", reverse: true, limit: 10}
}))
],
caption: `Frequency distribution by ${group2}`,
x: { label: `Frequency`},
marginLeft: 200
})
Insert cell
## My Remixed Visualization
Insert cell
myData = [
{drug: "Cocaine", overdoses: 1000},
{drug: "Cannabis", overdoses: 1},
{drug: "Fentanyl", overdoses: 50000},
{drug: "MDMA", overdoses: 300},
{drug: "Methamphetamine", overdoses: 20000}
]
.map(({drug, overdoses}) => ({letter: drug, frequency: overdoses}))
Insert cell
import {chart as myChart} with {myData as alphabet} from "@d3/bar-chart"
Insert cell
myChart
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