Public
Edited
Nov 29, 2023
Importers
1 star
Plot.plot({
width: 300,
height: 300,
x: {
domain: [1,2,3]
},
y: {
domain: [1,2,3]
},
marks: [
Plot.dot(matrixSample, { x: "x", y: "y"}),
Plot.ruleX([1,2,3], { stroke: "cyan"}),
Plot.ruleY([1,2,3], { stroke: "pink"})
]
})
createArray = (n) => d3.range(1, n + 1)
createArray(10)
calculateIconLayout(10,102)
createDeepMatrix = (iconsPerRow, totalIcons) => calculateIconLayout(iconsPerRow, totalIcons).map((d, i) =>
createArray(d).map((t) => {
return { x: t, y: i+1 }
})
)
createMatrixData(10,100)
createIconMatrixPlot(iconsPerRow, iconsTotal, iconsFilled)
testData = createMatrixData(10,100)
Plot.plot({
y: {
reverse: true
},
color: {
domain: ["silver", "bronze", "gold"], // data
range: ["#dcdcdc", "brown", "red"] // color
},
marks: [
Plot.dot(typeMatrix, { x: "x", y: "y", fill: "type", r: 10, symbol: "star" }),
// Plot.text(testData, { x: d => d.x, y: d => d.y, text: d => `(${d.x}, ${d.y})` })
]
})
import {olympics2020, medals} from "@datavizstudio/isotype-pictogram-demo"
import {olympicsMatrixData} from "@datavizstudio/person-isotype-matrix-source"
olympics2020
olympicsMatrixData
ranking = d3.sort(olympicsMatrixData, d => d.Gold).map(d => d.nation)
Plot.plot({
margin: 30,
width: width,
y: {
reverse: true
},
fx: {
domain: ranking
},
marks: [
// Plot.dot(olympicsMatrixData, { x: "x", y: "y", fill: "type", r: 5, fx: "nation"}),
// Plot.frame(),
Plot.text(olympicsMatrixData, { x: d => d.x, y: d => d.y, text: d => medals[d.type], fontSize: 15, fx: "nation"})
]
})
import {Scrubber} from '@mbostock/scrubber'
flags = ({ USA: "🇺🇸", CHN: "🇨🇳", JPN: "🇯🇵", GBR: "🇬🇧", ROC: "🇷🇺", AUS: "🇦🇺", GER: "🇩🇪", NED: "🇧🇷", ITA: "🇦🇷", FRA: "🇫🇷", })
nations = d3.sort(olympics2020, d => -d.Gold).map(d => d.nation)
Plot.plot({
title: `2020 Olympics medal counts for ${nationLoop} ${flags[nationLoop]}`,
subtitle: "2020 Olympics top 10 nations medal counts",
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.
