Award-winning creative focused on data-driven art and visualizations, trying to push the boundaries of the web one visual story at a time ✨
Published
Edited
Jul 29, 2021
2 forks
14 stars
hpff = FileAttachment("combined.json").json()
data = hpff.map(d => {
return {
...d,
published: d.published === "0000.00.00" ? undefined : parseDate(d.published),
updated: d.updated === "0000.00.00" ? undefined : parseDate(d.updated),
reviews: +d.reviews.text, // number of reviews (comments) on that story
title: d.title.text,
link: d.title.link,
author: d.author.text
}
})
Inputs.table(data)
// import {SummaryTable} from "@observablehq/summary-table"
// SummaryTable(data)
Histogram of reviews - What is the most-reviewed? How many have no reviews? What’s the distribution?
Ordinal data = bar
Quantitative data = rect
Transforms:
Bar is to group as rect is to bin
https://observablehq.com/@observablehq/plot-bin
https://observablehq.com/@observablehq/plot-group
Plot.plot({
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {x: "reviews", thresholds: 10}))
]
})
Plot.plot({
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {x: {value: "reviews", domain: [0, 200]}}))
]
})
{
const bin = Plot.binX({y: "count"}, {x: {value: "reviews", domain: [0, 200]}});
return Plot.plot({
marks: [
Plot.rectY(data, bin),
Plot.line(data, {...bin, stroke: "red", strokeWidth: 3})
]
});
}
Plot.plot({
style: {
overflow: "visible"
},
x: {
domain: [0, 200]
},
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {x: "reviews"}))
]
})
d3.bin()
.value(d => d.reviews)
(data)
Plot.plot({
marks: [
Plot.ruleX(data, {x: "reviews", strokeOpacity: 0.01})
]
})
Plot.rectY(data, Plot.binX({y: "count"}, {x: "published"})).plot()
Plot.rectY(data, Plot.binX({y: "count"}, {x: {value: "published", thresholds: d3.utcMonth}, inset: 0})).plot()
Plot.rectY(data, Plot.binX({y: "count"}, {x: {value: "published", thresholds: [new Date(Date.UTC(2007, 6, 1))]}})).plot()
Plot.plot({
width,
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {x: {value: "published"}}))
]
})
Plot.plot({
width,
marks: [
Plot.rectY(data, Plot.binX({y: "sum"}, {y: "reviews", x: "published"}))
]
})
Plot.plot({
width,
marks: [
Plot.dot(data, {y: "reviews", x: "published"})
]
})
void Plot.plot({
width,
y: {
type: "symlog"
},
marks: [
Plot.dot(data, {y: "reviews", x: "published"})
]
})
void Plot.plot({
width,
marks: [
Plot.dot(data, {y: "reviews", x: d => (d.updated - d.published) / 864e5})
]
})
Plot.plot({
marks: [
Plot.dot(data, Plot.groupX({x: "count"}, {x: "author"}))
]
})
Plot.plot({
x: {
domain: [0, 20],
},
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, Plot.groupX({x: "count"}, {x: "author"})))
]
})
{
const group = Plot.groupX({x: "count"}, {x: "author"});
return Plot.plot({
x: {
// domain: [0, 20],
},
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {...group, x: {value: group.x, thresholds: 20, domain: [1, 20]}}))
]
});
}
{
const group = Plot.groupX({x: "sum"}, {x: "reviews", z: "author"});
return Plot.plot({
x: {
// domain: [0, 20],
},
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {...group, x: {value: group.x, thresholds: 20, domain: [1, 200]}}))
]
});
}
{
const group = Plot.groupX({y: "sum"}, {y: "reviews", x: "author"});
return Plot.plot({
x: {
// domain: [0, 20],
},
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {...group, x: {value: group.y, thresholds: 20, domain: [1, 200]}}))
]
});
}
Plot.plot({
marks: [
Plot.dot(d3.rollups(data, d => d.length, d => d.author), {x: ([author, count]) => count})
]
})
Plot.plot({
marks: [
Plot.rectY(d3.rollups(data, d => d.length, d => d.author), Plot.binX({y: "count"}, {x: ([author, count]) => count}))
]
})
Plot.plot({
marks: [
Plot.rectY(d3.rollups(data, d => d.length, d => d.author), Plot.binX({y: "count"}, {x: { value: ([author, count]) => count, domain: [0, 20] }}))
]
})
d3.rollups(data, d => d.length, d => d.author)
1000 * 60 * 60 * 24
data.filter(d => d.updated < d.published)
hpff.filter(d => d.title.text === "Unknown Story Title" && d.author.text === "Aurelie")
// Plot.plot({
// width,
// y: {
// type: "sqrt"
// },
// marks: [
// Plot.link(data, {y1: "reviews", y2: "reviews", x1: "published", x2: "updated"})
// ]
// })
// Plot.plot({
// width,
// height: 700,
// y: {
// type: "symlog"
// },
// marks: [
// Plot.link(data, {y1: "reviews", y2: "reviews", x1: "published", x2: "updated"})
// ]
// })
d3.bin()
.value(d => d.published)
(data)
d3.extent(data, d => d.published)
d3.utcTicks(...d3.extent(data, d => d.published), 20)
d3.ticks(...d3.extent(data, d => d.published), 20)
d3.ticks(...d3.extent(data, d => d.published), 20).map(d => new Date(d))
hpff[0].title.toString()
parseDate = d3.utcParse("%Y.%m.%d")
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.
