Public
Edited
Nov 17, 2023
dimensions = Object.keys(carsFiltered[0])
{
function unpack(rows, key) {
return rows.map(function (row) {
return row[key];
});
}
const markerColor = carsFiltered.map(
(row) => d3.schemeCategory10[row.cylinders]
);
d3.schemeCategory10;
const graphDiv = DOM.element("myDiv");
Plotly.newPlot(
graphDiv,
[
{
type: "scatter",
mode: "markers",
x: unpack(carsFiltered, xDimension),
y: unpack(carsFiltered, yDimension),
marker: { color: markerColor, size: 10 }
}
],
{
title: "Cars",
height: 500,
width: 800,
yaxis: {
title: yDimension,
autorange: true,
//range: [5, 50],
type: "linear"
},
xaxis: {
title: xDimension,
autorange: true,
//range: [40, 250],
type: "linear"
}
}
);
return graphDiv;
}
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
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.
