Published
Edited
May 4, 2021
1 fork
3 stars
Insert cell
md`# Observable Plot and Datasette

This demo does NOT do justice to [Observable Plot](https://observablehq.com/@observablehq/plot), but does demonstrate how to fetch data from Datasette (in this case [this data](https://fivethirtyeight.datasettes.com/fivethirtyeight/bechdel%2Fmovies) from FiveThirtyEight) and start visualizing it.
`
Insert cell
Plot = require("@observablehq/plot@0.1")
Insert cell
data = d3.csv(
"https://fivethirtyeight.datasettes.com/fivethirtyeight/bechdel%2Fmovies.csv?_stream=on&_size=max"
)
Insert cell
Plot.dot(data, {
x: "year",
y: "title",
stroke: "binary",
title: "title"
}).plot({ height: 18000, width: width, marginLeft: 100 })
Insert cell
d3 = require("d3@6.7.0/dist/d3.min.js")
Insert cell

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.
Learn more