Notebooks 2.0 is here.
Cell_chart =
Plot.plot({
marginLeft:350,
// padding: 0.05,
width: 900,
inset: 10,
label: "",
x: {
tickFormat: d =>d+2000,
//grid: true,
//text: "Year",
//make 2000 - 2020
// format: x =>x+2000,
},
y: {
grid: true,
// text: "NDVI",
domain: [1000,8000],
//stroke: "white",
},
color: {
//type: "sequential",
// domain: [0,2000],
//range:["#e41a1c", "#000000", "#4daf4a"]
},
marks: [
Plot.line(c_filter , {
sort:
"ID",
x:
c_year,
y:
c_gc,
sort: c_year,
stroke:
"#1bb24b",
strokeWidth: 4,
}),
// Difference Line
Plot.line(y_avg , {
sort: "ID",
x: "YEAR",
y: "MEDIAN_grid_code",
stroke: "#e1e1e1", strokeWidth: 5,
curve: "catmull-rom",
}),
Plot.text("Yearly Average",{text: ["Yearly Average"], fontSize: 16, fill: "#e1e1e1", textAnchor: "middle", y: 5400, x: range -1,
}),
// Plot.text("Cell Value",{text: ["Cell Value"], fontSize: 14, fill: "black", textAnchor: "middle", y: 8000, x: range -1,
// }),
// Plot.text("_",{text: ["_"], fontSize: 14, textAnchor: "middle", fontSize: 40, stroke: "#e1e1e1", y: 3700, x: -1 + (range/2),
// }),
Plot.text("placeholder",{text: p, fontSize: 14, textAnchor: "middle", y: 7500, fill: "#e1e1e1",
})
]
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
c = FileAttachment("yearly_avg_polar.csv").csv({typed:true})
y_avg = c.filter(d => d.YEAR <= range)
mutable name = 1
c_year = function ([a,[b,c]]) {return c}
c_gc = function ([a,[b,c]]) {return d3.format(".2~r")(b)}
margin = ({ top: 10, right: 10, bottom: 10, left: 10 })
data = Object.assign(new Map(filter),({GRID_ID,MEDIAN_grid_code,YEAR}) => [GRID_ID,[+MEDIAN_grid_code,+YEAR]])
table = d3.csvParse(await FileAttachment("MODIS_table_Full_Range.csv").text(),({GRID_ID,MEDIAN_grid_code,YEAR}) => [GRID_ID,[+MEDIAN_grid_code,+YEAR]])
land_geo = topojson.feature(land,land.objects.ne_10m_land)
land_hex_geo = topojson.feature(land_hex,land_hex.objects.tess_50k_WGS_land_nodl)
land_hex = FileAttachment("tess_50k_WGS_land_nodl_topo.json").json()
land = FileAttachment("ne_10m_land (2).json").json()
//topo = FileAttachment("TESS_1000sqkm_topo_2.json").json()
topo = FileAttachment("tess_50k_50N_WGS_topo.json").json()
geo = topojson.feature(topo,topo.objects.tess_50k_50N_WGS)
ramp = ["#d1f1dc","#bbeaca","#a4e2b8","#76d294","#49c270","#32ba5e","#1bb24b"]
gb_ramp = ['#d73027','#fc8d59','#fee090','#e0f3f8','#91bfdb','#4575b4']
path = d3.geoPath(projection)
input = require("@observablehq/inputs")
topojson = require("topojson-client@3")
import { Tooltip } from "@clhenrick/tooltip-component"
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.
