The avatar for @joffreycodes
joffreycodes
Published
Edited
Jun 16, 2022
1 fork
8
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
demographicChoropleth = {} // this will be a simple map drawn with geojson and choropleth with color values based on demographics
Insert cell
Insert cell
Insert cell
Plot.plot({
height: 300,
padding: 0,
y: {
tickFormat: Plot.formatMonth("en", "short")
},
marks: [
Plot.cell(smellsDaily, Plot.group({fill: "max"}, {
x: d => d.date.getUTCDate(),
y: d => d.date.getUTCMonth(),
fill: "smell_value",
inset: 0.5
}))
]
})
Insert cell
Insert cell
Insert cell
addLegend(
Plot.plot({
height: 300,
padding: 0,
y: {
tickFormat: Plot.formatMonth("en", "short")
},
marks: [
Plot.cell(weatherDaily, Plot.group({fill: "max"}, {
x: d => d.date.getUTCDate(),
y: d => d.date.getUTCMonth(),
fill: weatherInput,
inset: 0.5
}))
]
}),
colorLegend(colorScale)
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
languageAnalysis = Plot.plot({
x: {
label: null
},

marks: [
// Plot.barY(toMap, {sort: d => d[1], x: d => d[0], y: d => d[1]}), //why isn't the soeting working?
Plot.barY(toMap, {sort: {x: "y", reverse: true}, x: d => d[0], y: d => d[1]}), // This fixes it
// Reference: https://github.com/observablehq/plot#sort-options
//Plot.text(toMap, {x: "letter", y: "frequency", text: d => (d.frequency * 100).toFixed(1), dy: -5}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {toc} from "@nebrius/indented-toc"
Insert cell
import {viewof weekday,myChart, mymapIan} from "@iellms/prototype-2-ian-ellmer"
Insert cell
import {mymapOldIan} from "5f52b5c1f6710e3b"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
cellA.embed(mymap)
Insert cell
Insert cell
cellB.embed(viewof productTypeFilter)
Insert cell
viewof productTypeFilter = Inputs.checkbox(
selectedDatesVesselsData.map((d) => d.PRODUCT_TYPE_OIL),
{
label: `Product Type (${
new Set(selectedDatesVesselsData.map((d) => d.PRODUCT_TYPE_OIL)).size
})`,
unique: "true",
value: vesselsVar.PRODUCT_TYPE,
sort: "ascending"
}
)
Insert cell
Insert cell
cellC.embed(viewof terminalFilter)
Insert cell
Insert cell
Insert cell
cellD.embed(viewof shipNameFilter)
Insert cell
Insert cell
Insert cell
cellE.embed(viewof datesFilter)
Insert cell
Insert cell
datesFilter
Insert cell
Insert cell
cellF.embed(viewof filteredVesselsProductType)
Insert cell
Insert cell
Insert cell
cellG.embed(viewof filteredVesselsTerminal)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
topojson3 = require("https://unpkg.com/topojson@3")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
weatherMonthly = FileAttachment("weather_monthly_agg.csv").csv({typed: "true"})
Insert cell
weatherDaily = FileAttachment("weather_daily_agg.csv").csv({typed: "true"})
Insert cell
d3.extent(weatherDaily.map(d => d.air_temp))
Insert cell
binner = d3.bin()
Insert cell
binner(weatherDaily.map(d => d.air_temp))
Insert cell
viewof thresh = Inputs.range([0,6], {
value: 5,
step: 1,
label: "Bin THresholds"
})
Insert cell
thresh
Insert cell
histGenerator = d3.bin()
.domain(d3.extent(weatherDaily.map(d => d.air_temp)))
.thresholds(thresh);
Insert cell
bins = histGenerator(weatherDaily.map(d => d.air_temp))
Insert cell
binRanges = {
var rangeList = []
for (let i=0; i<bins.length; i++) {
rangeList.push(d3.extent(bins[i]))
}
return rangeList
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
heatmapColors8 = ["#01295F","#2B3A67","#6178BD","#AFD2E9","#C8ADD2","#DD7997","#EA1010","#AF313D"]
Insert cell
colorScale = d3.scaleLinear()
.domain(heatmapValues)
.range(heatmapColors)
.interpolate(d3.interpolateLab);
Insert cell
Insert cell
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