Plot.plot({
x: {
label: "Date",
domain: years
},
y: {
label: "Forward PE",
grid: true,
domain: [-10, 30],
ticks: 5,
},
monospace: true,
//color: {legend: true, scheme: "BuRd"},
marks: [
// Plot.ruleY([0]),
Plot.lineY(data, {x: d => (!years || d.Date >= years[0] && d.Date <= years[1]) ? d.Date : NaN,
y: "Forward PE", tip: true, stroke: "gray"}),
Plot.lineY(data, {x: d => (!years || d.Date >= years[0] && d.Date <= years[1]) ? d.Date : NaN,
y: "+2 Standard Deviation", stroke: "#fc9272"}),
Plot.lineY(data, {x: d => (!years || d.Date >= years[0] && d.Date <= years[1]) ? d.Date : NaN,
y: "+1 Standard Deviation", stroke: "#ef3b2c"}),
Plot.lineY(data, {x: d => (!years || d.Date >= years[0] && d.Date <= years[1]) ? d.Date : NaN,
y: "Mean", stroke: "#a50f15"}),
Plot.lineY(data, {x: d => (!years || d.Date >= years[0] && d.Date <= years[1]) ? d.Date : NaN,
y: "-1 Standard Deviation", stroke: "#ef3b2c"}),
Plot.lineY(data, {x: d => (!years || d.Date >= years[0] && d.Date <= years[1]) ? d.Date : NaN,
y: "-2 Standard Deviation", stroke: "#fc9272"}),
Plot.text(data, {x: data[data.length-1].Date, y: data[data.length-1]["Mean"], text: "Mean", dy: -10}),
Plot.text(data, {x: data[data.length-1].Date, y: data[data.length-1]["+1 Standard Deviation"], text: "+1 Standard Deviation", dy: -10}),
Plot.text(data, {x: data[data.length-1].Date, y: data[data.length-1]["+2 Standard Deviation"], text: "+2 Standard Deviation", dy: -10}),
Plot.text(data, {x: data[data.length-1].Date, y: data[data.length-1]["-1 Standard Deviation"], text: "-1 Standard Deviation", dy: -10}),
Plot.text(data, {x: data[data.length-1].Date, y: data[data.length-1]["-2 Standard Deviation"], text: "-2 Standard Deviation", dy: -10}),
], width: 1200
})
viewof years = brushFilterX(
d3.extent(data, (d) => d.Date),
{
//mean forward P/E calculated from January 2, 2013 to today
defaultExtent: [d3.isoParse("2013-01-02"), d3.isoParse(Date.now())],
width: 1200
},
)
import {brushFilterX} from "4c6232eec0df4202"
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}`
}
import { SummaryTable } from "@observablehq/summary-table"
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.
