Software engineer, available for freelance work! • he/him/his
Published
Edited
Mar 3, 2021
whittier[whittier.length - 1]
twoWeeksAgo = whittier.find(
d => yyyy_mmm_dd(d.date) === yyyy_mmm_dd(d3.timeWeek.offset(new Date(), -2))
)
yyyy_mmm_dd(d3.timeWeek.offset(new Date(), -2))
afterThanks = whittier.filter(d => d.date > new Date("2020-11-26"))
numAfterThanks = d3.sum(afterThanks, d => d.new_cases)
monthBeforeThanks = whittier.filter(
d => d.date > new Date("2020-10-26") && d.date < new Date("2020-11-26")
)
beforeThanks = whittier.filter(d => d.date < new Date("2020-11-27"))
beforeThanks[beforeThanks.length - 1].num_cases
d3.sum(beforeThanks, d => d.new_cases)
import { DatasetteClient } from '@asg017/datasette-client'
db = DatasetteClient('https://covid-19.datasettes.com/covid')
viewof whittierPlaces = db.table`
SELECT DISTINCT
name
, population
from latimes_place_totals
WHERE name LIKE "%whittier%"
ORDER BY cast(population as integer) DESC`
viewof whittierRaw = db.table`
SELECT
date
, sum(latimes_place_totals.confirmed_cases) num_cases
FROM latimes_place_totals
WHERE name IN ${whittierPlaces.map(d => d.name)}
GROUP BY date
ORDER BY date`
db.table`
SELECT
date
, place
, sum(latimes_place_totals.confirmed_cases) num_cases
FROM latimes_place_totals
WHERE place IN ${whittierPlaces.map(d => d.place)}
GROUP BY date, place
ORDER BY date, place`
whittier = d3
.pairs(whittierRaw)
.map(([a, b]) => ({ ...b, new_cases: b.num_cases - a.num_cases }))
.map((d, i, a) => ({
...d,
rolling:
i < 7
? 0
: d3.mean(
Array.from({ length: 7 }).map((_, j) => a[i - 6 + j].new_cases)
),
date: new Date(d.date)
}))
d3 = require('d3@6')
data = whittier
labelOffset = -30
days = d3.timeDays(...d3.extent(data.map(d => d.date)))
missingData = days.filter(day => !dataMap.has(yyyy_mmm_dd(day)))
dataMap = new Map(data.map(d => [yyyy_mmm_dd(d.date), d]))
yyyy_mmm_dd = d3.utcFormat("%Y-%m-%d")
height = (width * 9) / 16
margin = ({ top: 20, right: 30, bottom: 60, left: 40 })
xAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(
d3
.axisBottom(x)
.ticks(d3.timeMonth.every(2))
.tickFormat(d3.timeFormat('%B'))
.tickSizeOuter(0)
)
.attr('font-size', '14px')
x = d3
.scaleUtc()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain([0, d3.max(data, d => d.new_cases)])
.nice()
.range([height - margin.bottom, margin.top])
yAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, data.format))
.call(g => g.select(".domain").remove())
.call(g =>
g
.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(data.y)
)
line = d3
.line()
.defined(d => !isNaN(d.rolling))
.x(d => x(d.date))
.y(d => y(d.rolling))
barX = d3
.scaleBand()
.domain(d3.range(data.length))
.range([margin.left, width - margin.right])
.padding(0.1)
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.