JSFiddle - React, Tailwind, and code Playground

by mcmcclur

HTML

<div id="observablehq-instructions-fb707a21"></div>
<div class="control" id="observablehq-viewof-image-fb707a21"></div>
<div class="im" id="observablehq-im-fb707a21"></div>
<div class="im" id="observablehq-histogramVisualization-fb707a21"></div>
<p>Credit: <a href="https://observablehq.com/d/ed38e3408d25dcd3">Image Histogram in SVG by Mark McClure</a></p>

CSS

.control {
          margin: 15px
        }
        .im {
          margin: 5px
        }

JavaScript

import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/d/ed38e3408d25dcd3.js?v=3";
new Runtime().module(define, name => {
  if (name === "instructions") return new Inspector(document.querySelector("#observablehq-instructions-fb707a21"));
  if (name === "viewof image") return new Inspector(document.querySelector("#observablehq-viewof-image-fb707a21"));
  if (name === "im") return new Inspector(document.querySelector("#observablehq-im-fb707a21"));
  if (name === "histogramVisualization") return new Inspector(document.querySelector("#observablehq-histogramVisualization-fb707a21"));
  return ["histogram"].includes(name);
});