The end-to-end solution for building and hosting better data apps, dashboards, and reports.
data = Array.from({length: range}, (_,i) => {
return {
x: 4 + d3.randomNormal(0, 2)(),
y: 4 + d3.randomNormal(0, 2)(),
sizes: d3.randomUniform(15, 80)(),
color: d3.randomUniform(15, 80)()
}
})
Plot.plot({
grid: true, // by default Plot has "grid: false", to show a grid we set grid to 'true'
marks: [
Plot.frame(), // draws the frame mark around the Plot
Plot.dot(data,
{x: "x",
y: "y",
fill: "color",
r: "sizes",
})
],
color: {
scheme: "Blues", // todo: say something about defaults / add link to color cheatsheet
domain: [0,100], // this is the equivalent of the vmin / vmax in matplotlip
},
x: {
domain: [0,8], //
ticks: d3.range(1,8) // equivalent of xticks=np.arange(1, 8)
},
y: {
domain : [0,8],
ticks: d3.range(1,8) // equivalent of yticks=np.arange(1, 8)
},
})
Plot.plot({
marks: [
Plot.frame({stroke: "#ccc"}), // draws a light grey (#ccc) frame mark around the Plot
Plot.dot(data,
{x: "x",
y: "y",
fill: "color",
r: "sizes",
})
],
color: {
scheme: "Blues", // todo: say something about defaults / add link to color cheatsheet
legend: true,
ticks: 10,
range: [.1,.9]
},
height: 300,
width: 350
})
Plot.plot({
marks: [
Plot.frame({stroke: "#ccc"}), // draws a light grey (#ccc) frame mark around the Plot
Plot.dot(data,
{x: "x",
y: "y",
fill: "color",
stroke: "#aaa", // add a light grey stroke so it's easier to see the points
strokeWidth: .2,
r: "sizes",
title: d =>
'data: ' + '\n' + 'x: ' + format(d.x) + '\n' +
'y: ' + format(d.y) + '\n' +
'color: ' + format(d.color) + '\n' +
'size: ' + format(d.sizes) // for the tooltip
})
],
color: {
scheme: colorscheme, // todo: say something about defaults / add link to color cheatsheet
legend: true,
ticks: 10,
range: [.1,.9],
reverse: reverseScheme
},
height: 300,
width: 350
})
format = d3.format(",.2f")
Resources
Other examples to recreate
Histograms
https://matplotlib.org/stable/plot_types/stats/hist_plot.html
Box Plothttps://matplotlib.org/stable/plot_types/stats/boxplot_plot.html
(point to cheat sheets for ticks)
Animation (import scrubber)
import {addTooltips} from "@mkfreeman/plot-tooltip"
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.
