// Swatches({
// color: d3.scaleOrdinal(countries, d3.schemeTableau10),
// columns: "150px"
// })
// addTooltips(Plot.plot({
// width,
// height: 500,
// marginBottom: 50,
// x: {
// tickRotate:-45,
// },
// y: {
// label: "← Women · Men →",
// labelAnchor: "center",
// tickFormat: Math.abs
// },
// color: {domain: countries},
// marks: [
// Plot.dot(astronautData, Plot.stackY2({
// x: "year",
// y: d => d.Gender === "Man" ? 1 : d.Gender === "Woman" ? -1 : 0,
// fill: "countryAlt",
// order: "Country",
// reverse: true,
// title: d=> d.Name + "(" +d.Country + ") - " + d.year
// })),
// Plot.ruleY([0])
// ]
// }))
// addTooltips(Plot.plot({
// width,
// marginTop:50,
// marginLeft: 100,
// color: {
// scheme: "Greens",
// },
// x: {
// tickRotate:-45,
// axis: "top",
// },
// y: {
// domain: d3.groupSort(astronautData, v => v.length, d => d.Country).reverse(),
// },
// marks: [
// Plot.cell(astronautData, Plot.group({fill: "count"},{
// x: "year",
// y: "Country",
// fill: "Country",
// // title: d=> d.length
// })),
// Plot.text(astronautData, Plot.group({text: "count"},{
// x: "year",
// y: "Country",
// text: "Country",
// }))
// ]
// }))
// addTooltips(Plot.plot({
// width,
// height: 4000,
// marginTop:50,
// marginLeft: 100,
// x: {
// tickRotate:-45,
// axis: "top",
// },
// y: {
// domain: d3.groupSort(
// astronautData,
// (g) => -d3.max(g, (d) => d.year),
// (d) => d.Name
// ), // thank you!!!
// },
// marks: [
// Plot.dot(astronautData, {
// x: "year",
// y: "Name",
// fill: "Gender",
// title: d=> d.Name + "(" +d.Country + ") - " + d.year
// }),
// ]
// }))
flagsMap = new Map(Object.values(countryFlags).map(i => [i.name, i.emoji]));
countryFlags= await d3.json('https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/by-code.json')
SummaryTable(astronautData)
Friday -
Table = Inputs.table // deprecated alias
import {addTooltips} from "@mkfreeman/plot-tooltip"
import {SummaryTable} from "@observablehq/summary-table"
import {swatches as Swatches} from "@d3/color-legend"
import {select} from "@jashkenas/inputs"
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.
