'Adding Tooltip Functionality to ObservableHQ Plot Locally

Would there be an easy way to implement this addTooltip function from Mike Freeman's Plot Tooltip Notebook within a local vanilla JavaScript environment? In addition, what would be the best way to manage user input and interactivity with Plot locally? I realize Observable makes all of this a lot less painful to code. Was just hoping there would be solutions outside of the website. Or should I just go the D3.js route if I want to do these things?

<html>

<head>
    <meta name=”robots” content=”noindex”>
    <meta charset="UTF-8">
    <title>Example Plots</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@observablehq/[email protected]"></script>
</head>

<body>
    <div >
        <h1>Iris Dataset</h1>
        <div id="chart1"></div>
    </div>
</body>


<script type="module">

const iris = await d3.json("https://cdn.jsdelivr.net/npm/[email protected]/data/iris.json");

const scatter = function(data) {
  const div = document.getElementById("chart1")
  div.appendChild(Plot.plot({
    marks: [
      Plot.dot(data, {x: "sepalLength", y: "sepalWidth", stroke: "species"}),
    ],              
  }));
}

scatter(iris)



 
</script>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Adding Tooltip Functionality to ObservableHQ Plot Locally

Sources

Related Questions