Public
Edited
Apr 27, 2023
Fork of D3 U.S. map
1 fork
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
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
// year = date.slice(0,4)
Insert cell
// month = date.slice(5,7)
Insert cell
// startmonth = sdate.slice(5,7)
Insert cell
// duration = d3.timeDays(startdate, enddate)
Insert cell
// data = aq.fromCSV(await FileAttachment("unemp.csv").text(), d3.autoType)
// data = d3.csvParse(await FileAttachment("unemp.csv").text(), d3.autoType)
Insert cell
// formatDate = d3.timeFormat("%Y-%m-%d")
Insert cell
// month = date.slice(5,7)
Insert cell
// startdate = d3.timeDay(new Date(2018, 0, 1))
Insert cell
// startyear = sdate.slice(0,4)
Insert cell
// enddate = d3.timeDay(new Date(2020, 11, 31))
Insert cell
// edate = formatDate(d3.timeDay.offset(startdate, slider[1] + 1))
Insert cell
// endmonth = edate.slice(5,7)
Insert cell
// endyear = edate.slice(0,4)
Insert cell
// viewof slider = slide({
// min: 0,
// max: d3.timeDay.count(startdate, duration[duration.length - 1]),
// step: 1,
// format: date => formatDate(d3.timeDay.offset(startdate, date)),
// title: 'Choose the date:'
// })

Insert cell
// sdate = formatDate(d3.timeDay.offset(startdate, slider[0] + 1))
Insert cell
// viewof nthDay = Inputs.range([0, duration], {
// step: 1,
// label: "Choose a date"
// })
Insert cell
// timeScale = d3
// .scaleTime()
// .domain([
// d3.utcParse("%Y-%m-%d")(begindate),
// d3.utcParse("%Y-%m-%d")(enddate)
// ])
// .range([0, duration])
Insert cell
// Chart of dates

// viewof datePicked = Inputs.text({
// type: "date",
// label: html`<b>Chart Date</b>`,
// value: begindate
// })

// Show the selected date
// date = d3.utcFormat("%Y-%m-%d")(timeScale.invert(nthDay)) // Convert from nth Day to html valid date YYYY-mm-dd
Insert cell
// viewof rate = Inputs.range([2, 7], {step: .01, label: "Unemployment Rate in Percent"})
Insert cell
// begindate = "2018-01-01"
Insert cell
// duration = d3.timeDay.count(
// d3.utcParse("%Y-%m-%d")(start),
// d3.utcParse("%Y-%m-%d")(end)
// )
Insert cell
// enddate = "2020-12-31"
Insert cell
// html`<div style="display:flex;">
// ${chart}
// ${chart1}
// ${chart2}
// </div>`
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