{
const x = [1, 2, 3, 4, 5],
y = [10, 20, 30, 20, 10];
const data = [
{
x: x,
y: y,
type: 'scatter',
mode: 'markers',
marker: { size: 20, color: "red" }
}
];
const layout = { hovermode: 'closest', title: 'Click on Points' };
const myDiv = DOM.element('mydiv'); //html`<div id="myDiv" style="width: 700px; height: 500px;"></div>`;
Plotly.newPlot(myDiv, data, layout);
let count = 0;
myDiv.on('plotly_click', data => {
mutable feedback = data;
const update = {
marker: { color: d3.schemeCategory10[count % 10], size: 20 }
};
Plotly.restyle(myDiv, update, [0]);
count++;
});
return myDiv;
}
mutable feedback = ""
d3.schemeCategory10.slice()
feedback
md`### External Libraries and Imports`
Plotly = require("plotly.js-dist")
d3 = require("d3@6")
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.
