The best data visualizations are built with code.

View example

Plot.plot({
  padding: 0,
  color: {
    pivot: d3.mean(seattle, d => d.temp_max),
    legend: true,
    scheme: "BuRd"
  },
  y: {tickFormat: Plot.formatMonth("en", "short")},
  marks: [
    Plot.cell(seattle, Plot.group({fill: "max"}, {
      x: (d) => d.date.getUTCDate(),
      y: (d) => d.date.getUTCMonth(),
      fill: "temp_max",
      inset: 0.5
    }))
  ]
})

View example

Plot.plot({
  y: {grid: true},
  color: {interpolate: "lab", range: ["#4269d0", "#efb118"]},
  marginTop: 10,
  marks: [
    Plot.ruleY([0], {strokeOpacity: 0.3}),
    Plot.dot(gistemp, {x: "Date", y: "Anomaly", r: 3, strokeWidth: 1.5, stroke: "Anomaly"}),
    Plot.lineY(gistemp, Plot.windowY(12, {x: "Date", y: "Anomaly"})),
  ],
})

View example

SankeyChart({
  links: energy
}, {
  nodeGroup: d => d.id.split(/\W/)[0],
  nodeAlign,
  linkColor,
  format: (f => d => `${f(d)} TWh`)(d3.format(",.1~f")),
  width,
  height: 600
})

View example

Plot.plot({
  x: {
    grid: true,
    label: "Population (%) →",
    percent: true
  },
  y: {
    domain: stateage.ages,
    reverse: true,
    label: "↑ Age (years)",
    labelAnchor: "top"
  },
  marks: [
    Plot.ruleX([0]),
    Plot.tickX(stateage, Plot.normalizeX("sum", {z: "state", x: "population", y: "age", stroke: "lightblue"})),
    Plot.dotX(filteredAges, Plot.normalizeX("sum", {x: "population", y: "age", stroke: "darkblue", fill: "darkblue"})),
    Plot.line(filteredAges, Plot.normalizeX("sum", { x: "population", y: "age", stroke: "darkblue" }))
  ],
})

View example

SELECT c.longitude as longitude
, c.latitude as latitude
, c.id as customerId
, o.storeId as storeId
, COUNT(*) orders
FROM orders as o
JOIN customers as c
  ON o.customerId = c.id
GROUP BY 1, 2, 3, 4

View example

Plot.plot({
  grid: true,
  color: {legend: false, range: ["#4269d0", "#efb118", "#ff725c"]},
  marks: [
    Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", fill: "species"}),
    Plot.linearRegressionY(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", stroke: "species"}),
    Plot.linearRegressionY(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm"})
  ]
})

View example

Plot.plot({
  padding: 0,
  color: {
    pivot: d3.mean(seattle, d => d.temp_max),
    legend: true,
    scheme: "BuRd"
  },
  y: {tickFormat: Plot.formatMonth("en", "short")},
  marks: [
    Plot.cell(seattle, Plot.group({fill: "max"}, {
      x: (d) => d.date.getUTCDate(),
      y: (d) => d.date.getUTCMonth(),
      fill: "temp_max",
      inset: 0.5
    }))
  ]
})

View example

Plot.plot({
  y: {grid: true},
  color: {interpolate: "lab", range: ["#4269d0", "#efb118"]},
  marginTop: 10,
  marks: [
    Plot.ruleY([0], {strokeOpacity: 0.3}),
    Plot.dot(gistemp, {x: "Date", y: "Anomaly", r: 3, strokeWidth: 1.5, stroke: "Anomaly"}),
    Plot.lineY(gistemp, Plot.windowY(12, {x: "Date", y: "Anomaly"})),
  ],
})

View example

SankeyChart({
  links: energy
}, {
  nodeGroup: d => d.id.split(/\W/)[0],
  nodeAlign,
  linkColor,
  format: (f => d => `${f(d)} TWh`)(d3.format(",.1~f")),
  width,
  height: 600
})

View example

Plot.plot({
  x: {
    grid: true,
    label: "Population (%) →",
    percent: true
  },
  y: {
    domain: stateage.ages,
    reverse: true,
    label: "↑ Age (years)",
    labelAnchor: "top"
  },
  marks: [
    Plot.ruleX([0]),
    Plot.tickX(stateage, Plot.normalizeX("sum", {z: "state", x: "population", y: "age", stroke: "lightblue"})),
    Plot.dotX(filteredAges, Plot.normalizeX("sum", {x: "population", y: "age", stroke: "darkblue", fill: "darkblue"})),
    Plot.line(filteredAges, Plot.normalizeX("sum", { x: "population", y: "age", stroke: "darkblue" }))
  ],
})