JSFiddle - React, Tailwind, and code Playground

by Mark

HTML

<script src="https://cdn.jsdelivr.net/npm/@observablehq/[email protected]/+esm"></script>

Babel + JSX

let data = d3.csv("https://raw.githubusercontent.com/vega/vega/main/docs/data/seattle-weather.csv")


document.body.append(

Plot.plot({
  padding: 0,
  y: {
    tickFormat: Plot.formatMonth()
  },
  color: {
    scheme: "BuRd"
  },
  marks: [
    Plot.cell(data, Plot.group({fill: "max"}, {
      x: d => d.date.getUTCDate(),
      y: d => d.date.getUTCMonth(),
      fill: "temp_max",
      inset: 0.5
    }))
  ]
})

);