The end-to-end solution for building and hosting better data apps, dashboards, and reports.
data = FileAttachment("bandcamp-oneday.csv").csv({ typed: true })
Inputs.table(data)
data[0]
viewof index = Inputs.range([0, data.length-1], { step: 1, value: 0, label: "index"})
data[index]
import {SummaryTable} from "@observablehq/summary-table"
SummaryTable(data)
sample = data.slice(0,100)
Plot.dot(sample, { x: "utc_timestamp", y: "amount_paid" }).plot()
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"}),
]
})
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" })
]
})
Plot.dot(sample, {
x: "utc_timestamp",
y: d => d.amount_paid - d.item_price,
}).plot()
Plot.dot(sample, {
x: "utc_timestamp",
y: d => d.amount_paid - d.item_price,
fill: d => d.amount_paid - d.item_price,
stroke: "gray"
}).plot({
color: { scheme: "greens" }
})
Plot.dot(sample, {
x: "utc_timestamp",
y: d => d.amount_paid - d.item_price,
stroke: d => d.amount_paid - d.item_price > 0
}).plot({
color: { range: ["orange", "steelblue"] }
})
Plot.barX(data, Plot.groupY({x: "mean"}, {
x: "amount_paid",
y: "type",
}))
.plot({ marginLeft: 100 })
Plot.barX(data, Plot.groupY({x: "mean"}, {
x: "amount_paid",
y: "type",
sort: { y: "x", reverse: true, limit: 3 }
}))
.plot({ marginLeft: 100 })
Plot.rectY(data, Plot.binX({y: "count"}, {
x: d => d.amount_paid - d.item_price,
thresholds: 40
})).plot({ grid: true })
Plot.plot({
marks: [
Plot.rectY(data, Plot.binX({y: "sum"}, { x: "utc_timestamp", y: "amount_paid", fill: "type", thresholds: d3.utcHour }))
],
})
viewof groupby = Inputs.select(["type", "country"], {label: "group by"})
viewof aggregate = Inputs.radio(["mean", "sum"], {label: "aggregate", value: "mean"})
// let's update this code to change the group by and the aggregation
Plot.barX(data, Plot.groupY({x: aggregate}, {
x: "amount_paid",
y: groupby,
sort: { y: "x", reverse: true, limit: 10 }
}))
.plot({
caption: `${aggregate} amount paid by ${groupby}`,
x: { label: `${aggregate} amount_paid`},
marginLeft: 100
})
data.map(d => d.country)
countries = new Set(data.map(d => d.country))
viewof country = Inputs.select(countries, {label: "Select one"})
// let's update this code to change the group by and the aggregation
Plot.barX(data.filter(d => d.country == country), Plot.groupY({x: "sum"}, {
x: "amount_paid",
y: "type",
sort: { y: "x", reverse: true, limit: 10 }
}))
.plot({
marginLeft: 100
})
viewof range = Inputs.range([0, 100], {label: "Amount", step: 1})
// lets update this code to color dots differently above and below a minimum amount paid
Plot.plot({
marks: [
Plot.dot(data, {
x: "utc_timestamp",
y: "amount_paid",
fill: d => d.amount_paid > range,
r: d => d.amount_paid > range,
fillOpacity: d => d.amount_paid > range,
}),
Plot.ruleY([range], { stroke: "orange" })
],
y: { type: "log" },
r: { range: [ 2, 3 ] },
opacity: { range: [0.25, .7 ] },
color: { range: [ "orange", "steelblue"] }
})
viewof search = Inputs.search(data, {})
Inputs.table(search)
chart = Plot.plot({
marks: [
Plot.rectY(search, Plot.binX({y: "sum"}, { x: "utc_timestamp", y: "amount_paid", fill: "type", thresholds: d3.utcHour }))
],
marginLeft: 100
})
chart.scale("color")
chart.scale("x")
import { Treemap } from "@d3/treemap"
Treemap(d3.rollup(data, v => v.length, d => d.country), {
value: d => d[1],
label: d => d[0]
})
rolled = d3.rollup(data, v => {
return {
count: v.length,
total_paid: d3.sum(v, o => o.amount_paid),
type: v[0].type
}},
d => d.type)
treemap = Treemap(rolled, {
value: d => d[1].count,
group: d => d[1].type,
label: d => d[1].type,
title: d => `${d[1].type} ${d[1].count}`,
fillOpacity: 1
})
Plot.legend({
color: {
domain: treemap.scales.color.domain(),
range: treemap.scales.color.range()
},
legend: "swatches"
})
import { BubbleChart } from "@d3/bubble-chart"
BubbleChart(rolled, {
value: d => d[1].count,
group: d => d[1].type,
label: d => d[1].type,
title: d => `${d[1].type} ${d[1].count}`,
})
import { BarChart } from "@d3/bar-chart-transitions"
bardata = Array.from(rolled.values())
chart2 = BarChart(bardata, {
x: d => d.type,
y: d => d.count,
xDomain: typelist,
width: 600,
height: 400,
color: "steelblue",
duration: 750 // slow transition for demonstration
})
viewof country2 = Inputs.select(new Set(data.map(d => d.country)), { label: "Select country:" })
bycountry = d3.rollup(data.filter(d => d.country == country2),
v => {
return {
count: v.length,
type: v[0].type
}},
d => d.type
)
chart2.update(Array.from(bycountry.values()), { xDomain: typelist })
// we will end up wanting to keep the order of the x domain the same
typelist = ["bundle", "merch", "track", "album"]
<svg width=940 height=300>
<rect x=250 y=50 width=200 height=50 fill="orange"></rect>
<circle cx=100 cy=100 r=50 fill="seagreen"></circle>
<g transform="translate(250,50)rotate(-10)">
<path d="M50,50 L200,50 L300,100" stroke="black" stroke-width=10 fill="none"></path>
<text x="50" y="40">Hello, world!</text>
<g>
</svg>
import { Scatterplot, AnimatedScatterplot, BrushScatterplot} from "@observablehq/workshop-itdvpd-d3-essentials"
Scatterplot(data.filter(d => d.country == "Netherlands"), {
x: d => d.utc_timestamp,
y: d => d.amount_paid,
xType: d3.scaleTime
})
chart3 = AnimatedScatterplot(data.filter(d => d.country == "Netherlands"), {
x: d => d.utc_timestamp,
y: d => d.amount_paid,
xType: d3.scaleTime
})
viewof country3 = Inputs.select(new Set(data.map(d => d.country)), { label: "select a country", value: "Netherlands" })
chart3.update(data.filter(d => d.country == country3))
viewof brushed = BrushScatterplot(data.filter(d => d.country == "Netherlands"), {
x: d => d.utc_timestamp,
y: d => d.amount_paid,
xType: d3.scaleTime
})
Inputs.table(brushed)
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.
