import {brushFilterX} from "@observablehq/brush-filter-x"
viewof years = brushFilterX(
d3.extent(data, (d) => d.Date),
{ defaultExtent: [d3.isoParse("2022-07-01"), d3.isoParse(Date.now())] }
)
Plot.plot({
color: {domain: [-1, 0, 1], range: ["#e41a1c", "#000000", "#4daf4a"]},
x: { label: "Date", domain: years},
y: { label: "Share Price [$]", grid: true},
marks: [
Plot.ruleX(data, {
x: d => (!years || d.Date >= years[0] && d.Date <= years[1]) ? d.Date : NaN,
y1: "Low",
y2: "High",
tip: true
}),
Plot.ruleX(data, {
x: d => (!years || d.Date >= years[0] && d.Date <= years[1]) ? d.Date : NaN,
y1: "Open",
y2: "Close",
stroke: (d) => Math.sign(d.Close - d.Open),
strokeWidth: 2,
strokeLinecap: "round",
})
],
width:1200
})
data = d3.csv(getCsvUrl(url), d3.autoType)
// 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}`
}
url = "https://docs.google.com/spreadsheets/d/1YMncpMnEbMqZd6dp2j4Bcjw2BGqU3vzl90CPKS-QIOA/edit#gid=1461654713"
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.
