createArray = (n) => d3.range(1, n + 1)
calculateIconLayout(10,102)
createDeepMatrix(10,100)
createIconMatrixPlot(iconsPerRow, iconsTotal, iconsFilled)
matrixData = createMatrixData(10,100)
typeMatrix = matrixData.map((d, i) => {
let type = "gold";
if(i>56){
type="bronze"
} else if(i>22) {
type="silver"
}
return ({
x: d.x,
y: d.y,
type: type
})
})
Plot.plot({
margin: 60,
y: {
label: null,
axis: null,
reverse: true
},
x: {
label: null,
axis: null,
domain: createArray(iconsPerRow) // [1, 2, 3..., n]
},
marks: [
Plot.dot(typeMatrix, {x: "x", y: "y", fill: "type", r: 10}),
// Plot.text(typeMatrix, {x: "x", y: "y", text: d => medals[d.type], fontSize: 20})
]
})
medals = ({ gold: "🥇", silver: "🥈", bronze: "🥉" })
import {olympicsTop10Nations2020} from "1dcdef90c30475c6"
olympicsTop10Nations2020
Plot.plot({
caption: `🥇 = 1 gold medal, 🥈 = 1 silver medal, 🥉 = 1 bronze medal`,
margin: 60,
width,
y: {
label: null,
// axis: null,
reverse: true
},
x: {
label: null,
// axis: null,
domain: createArray(10), // [1, 2, 3..., n]
},
fx: {
label: null,
domain: d3.sort(olympicsTop10Nations2020, d => -d.Gold).map(d => d.nation),
tickFormat: (d) => `${d}${flags[d]}`,
tickPadding: 20,
},
marks: [
Plot.text(olympicsMatrixData, { x: "x", y: "y", text: d => medals[d.type], fontSize: 20, fx: "nation"})
]
})
flags = ({ USA: "🇺🇸", CHN: "🇨🇳", JPN: "🇯🇵", GBR: "🇬🇧", ROC: "🇷🇺", AUS: "🇦🇺", GER: "🇩🇪", NED: "🇧🇷", ITA: "🇦🇷", FRA: "🇫🇷", })
nations = d3.sort(olympicsTop10Nations2020, d => -d.Gold).map(d => d.nation)
viewof nation = Inputs.select(nations, {label: "Select a nation", reverse: true})
import {Scrubber} from '@mbostock/scrubber'
viewof nationLoop = Scrubber(nations, {
autoplay: false,
delay: 1000,
// initial: 5,
// loopDelay: 1000,
// alternate: true
})
Plot.plot({
title: `2020 Olympics top 10 nations medal counts - ${flags[nationLoop]} (${nationLoop}) `,
margin: 60,
y: {
label: null,
axis: null,
reverse: true
},
x: {
label: null,
axis: null,
domain: createArray(10), // [1, 2, 3..., n]
},
marks: [
Plot.text(olympicsMatrixData, { x: "x", y: "y", text: d => medals[d.type], fontSize: 20, filter: d => d.nation === nationLoop})
]
})
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.
