url = "https://docs.google.com/spreadsheets/d/1umSY9F2UF61BzaL1cFtK-QOrIJXXBCx6SJQWByIcCqc/edit?usp=sharing"
data = d3.csv(getCsvUrl(url), d3.autoType)
data
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [Plot.ruleY([0]), Plot.lineY(data, { x: "org", y: "duration" })]
})
Plot.plot({
marks: [
Plot.rectY(weather.slice(-42), {x: "org", y: "duration", interval: d3.utcYears}),
Plot.ruleY([0])
]
})
formatYear = (year) => (year < 0 ? `${-year} BC` : `${year} AD`)
SummaryTable(data)
// Converts a Google Sheets website URL to its CSV URL. You can also go to “File → Publish to web”, select the “Comma-separated values (.csv)” type, select the sheet with your data, and use that CSV URL directly with `d3.csv` above. If you need data to update faster, try the Google Sheets API: https://stackoverflow.com/questions/30082277/accessing-a-new-style-public-google-sheet-as-json/44479726#44479726
getCsvUrl = url => {
url = new URL(url);
const id = url.pathname.split("/")[3]
const gid = new URLSearchParams(url.hash.slice(1)).get("gid") || 0;
return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`
}
import { SummaryTable } from "@observablehq/summary-table"
import {Treemap} from "@d3/treemap"
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.
