2c:null 2d:["$","title",null,{"children":"United States Unemployment Data Exploration | Amber Hoak | Observable"}] 32:T9e4,viewof userSelections = form(html``)33:Tbd7,viewof timeRangeSelection = { let size = {h: 100, w: width} let timelineMargin = {left: 10, right: 10, top: 0, bottom: 0} const svg = d3.select(DOM.svg(size.w + timelineMargin.left + timelineMargin.right, 100 + timelineMargin.top + timelineMargin.bottom)); svg.attr('aria-labelledby', 'timeline-selection-chart') .attr("title", "timeline-selection-picker") .attr("description", "select with cursor range of dates to filter selected dataset") .attr("role", "img") const barHeight = size.h / 3 const g = svg.append('g').attr('aria-label', 'timeline') const xBands = d3.scaleBand().domain(dates.map((d)=>d.toDateString())).range([ timelineMargin.left, size.w-timelineMargin.right]) const brushColors = {inRange: "#6d5e02", outOfRange: "#e1d4ab", all: "#c2ab37"} const xscale = d3.scaleUtc() .domain(d3.extent(dates)) .range([timelineMargin.left, width - timelineMargin.right]) // Bars g.selectAll('rect') .data(dates) .enter() .append('rect') .attr('class', 'bar') .attr('y', (size.h - barHeight) / 2) .attr('height', barHeight) .attr('x', d => xBands(d.toDateString())) .attr('width', d => xBands.bandwidth()) .attr('stroke', '#ffffff') .attr("fill", brushColors.all ) .attr('opacity', 1) .attr('aria-label', d =>`${d.toDateString()}`) function brushed({selection}) { console.log("selection", selection) if(selection !== null) { const sx = selection.map(xscale.invert); const dateMap = sx.map((d)=>new Date(d.getFullYear(), d.getMonth(), 1)) svg.selectAll(".bar").attr("fill", (d)=> dateMap[0] <= d && d <= dateMap[1] ? brushColors.inRange : brushColors.outOfRange) svg.property("value", dateMap).dispatch("input"); } else { svg.selectAll(".bar").attr("fill", brushColors.all ) svg.property("value", [dates[0], dates[dates.length-1]]).dispatch("input"); } } const brush = d3.brushX() .extent([[0, 0], [size.w, size.h]]) .on('start brush end', brushed) .on("end.snap", brushended); function brushended({selection, sourceEvent}) { if (!sourceEvent || !selection) return; const range = xBands.domain().map(xBands) const dx = xBands.step(); let x0 = range[d3.bisectRight(range, selection[0])] - dx; const x1 = range[d3.bisectRight(range, selection[1]) - 1] + dx; const sx = [x0].map(xscale.invert); const dateMap = sx.map((d)=>new Date(d.getFullYear(), d.getMonth(), 1)) x0 = xscale(dateMap[0]) x0 ? [x0, x1] : null); } svg.append("g") .call(brush) .call(brush.move, [0.3, 0.5].map(x)); const xAxis = g => g .attr("transform", `translate(0,${(size.h - barHeight) / 2})`) .call(d3.axisTop(xscale).tickFormat( d3.utcFormat("%b %y"))) svg.selectAll(".x-axis").remove() svg.append("g") .attr("class", "x-axis") .call(xAxis); return svg.property("value", [dates[0], dates[dates.length-1]]).node(); }34:T991,{ const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr('aria-labelledby', 'histogram-chart') .attr("title", "histogram-chart") .attr("description", "distribution of values for selected dataset") .attr("role", "img") const allValues = dataFiltered.reduce((acc, d)=>{ const val = d.data.map((item)=> item.value) acc = [...acc, ...val] return acc },[]) const xScale = d3.scaleLinear() .domain(d3.extent(allValues)).nice() .range([margin.left, width - margin.right]) const bins = d3.bin() .domain(xScale.domain()) .thresholds(xScale.ticks(40)) (allValues) const yScale = d3.scaleLinear() .domain([0, d3.max(bins, d => d.length)]).nice() .range([height - margin.bottom, margin.top]) svg.append("g") .append("text") .text("count") .attr("transform", `translate(10,${(height - (margin.bottom + margin.top))/2 + 40})rotate(-90)`) .style("font-size", "12px") svg.append("g") .append("text") .text(`${selectedDataSet.name}`) .attr("transform", `translate(${margin.left}, ${height - 10})`) .style("font-size", "12px") svg.append("g") .attr("fill", "#f683ba") .attr("stroke", "#b30474") .attr("stroke-width", 2) .selectAll("rect") .data(bins) .join("rect") .attr("x", d => xScale(d.x0) + 1) .attr("width", d => Math.max(0, xScale(d.x1) - xScale(d.x0) - 1)) .attr("y", d => yScale(d.length)) .attr("height", d => yScale(0) - yScale(d.length)) .attr('aria-label', d =>`${d.x0}${selectedDataSet.yLabel.replace("~d", d )}-count-${d.length}`) .on("mouseover", (ev, d)=>{ const tip = svg.select(".tooltip") tip.attr("transform", `translate(${xScale(d.x0)},${yScale(d.length)})`); tip.call(callout, `count: ${d.length}`, 'top') }) const tooltip = svg.append("g") .attr("class", "tooltip") .attr("width", 100) .style("background", "black") const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale).ticks(width / 80 ).tickSizeOuter(0).tickFormat((d)=> `${selectedDataSet.yLabel.replace("~d", d )}`)) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale).ticks(height / 40)) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }35:T52a,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .attr('aria-labelledby', 'line-chart') .attr("title", "line-chart") .attr("description", "values for selected dataset and selected timerange") .attr("role", "img") const line = d3.line() .defined(d => !isNaN(d.value)) .x(d => xlineScale(d.date)) .y(d => y(d.value)) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xlineScale).tickFormat( d3.utcFormat("%b %y"))) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat((d)=> `${selectedDataSet.yLabel.replace("~d", d )}`)) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const path = svg.append("g") .attr("fill", "none") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(dataFiltered) .join("path") .style("mix-blend-mode", "multiply") .attr("d", d => line(d.data)) .attr("stroke", (d,i)=>nominalColors[i]) .attr("aria-label", d =>`path-${d.race}-${d.ethnicity}-${d.sex}`) svg.call(hover, path); return svg.node(); }36:T706,function hover(svg, path) { function formatDate(date) { return date.toLocaleString("en", { month: "short", year: "numeric", timeZone: "UTC" }); } if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left) else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); dot.append("g").attr("class", "tooltip") function moved(event) { event.preventDefault(); const pointer = d3.pointer(event, this); const xm = xlineScale.invert(pointer[0]); const ym = y.invert(pointer[1]); const i = d3.bisectCenter(selectedDates, xm); const s = d3.least(dataFiltered, d => Math.abs((d.data[i]? d.data[i].value : 0) - ym)); path.attr("stroke", (d,i) => d === s ? nominalColors[i] : "#ddd").filter(d => d === s).raise(); if(s.data[i]) { dot.attr("transform", `translate(${xlineScale(s.data[i].date)},${y(s.data[i]? s.data[i].value : 0)})`); const text = `sex: ${s.sex}, race: ${s.race}, ethnicity: ${s.ethnicity}, value: ${selectedDataSet.yLabel.replace("~d", s.data[i].value )}, ${formatDate(s.data[i].date)}` const tooltip = dot.select(".tooltip") tooltip.attr('aria-label', text) tooltip.call(callout,text , "bottom"); dot.attr("display", "visible") } } function entered() { path.style("mix-blend-mode", null).attr("stroke", "#ddd"); dot.attr("display", null); } function left() { path.style("mix-blend-mode", "multiply").attr("stroke", (d,i) => nominalColors[i]); dot.attr("display", "none"); } }37:[] 30:{"id":"0758d1c23a1a02d6","slug":"united-states-unemployment-data-exploration","title":"United States Unemployment Data Exploration","thumbnail":"3580c40dd5663db8354711d71aed23a6483989d3b84c52dd93642d4ecb80bda7","access_level":"public","create_time":"$D2020-09-09T17:57:08.920Z","update_time":"$D2021-04-13T21:12:54.026Z","view_time":null,"first_public_time":"$D2020-09-21T21:51:16.842Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"11b00269dbb427c5","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":"starter_2024"},"version":1596,"publish_version":1596,"role":null,"authored":false,"authors":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null}],"members":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"United States Unemployment Data Exploration","cells":[{"id":0,"value":"md`# United States Unemployment Data Exploration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"html`All data collected from the US Bureau of Labor Statistics from the Current Population Survey and all are non-seasonally adjusted. Choose a dataset to explore facets within the data. Datasets collected include:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"html`Employment-population ratio: The employment-population ratio represents the number of employed people as a percentage of the civilian noninstitutional population. In other words, it is the percentage of the population that is currently working.\nThe employment-population ratio is calculated as: (Employed ÷ Civilian Noninstitutional Population) x 100. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"html`Not in the Labor Force: Persons who are neither employed nor unemployed are not in the labor force. This category includes retired persons, students, those taking care of children or other family members, and others who are neither working nor seeking work. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"html`Unemployed Looking for Full-Time Work: Persons who are unemployed looking for full time employment (35+ hours a week). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"html`Unemployed Looking for Part-Time Work: Persons who are unemployed looking for part time employment (less than 35 hours a week). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"html`Unemployment rate: The unemployment rate represents the number of unemployed people as a percentage of the labor force (the labor force is the sum of the employed and unemployed). The unemployment rate is calculated as: (Unemployed ÷ Labor Force) x 100.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1594,"value":"md`Workshop series: http://aka.ms/ghc20workshop`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"html`

${selectedDataSet.name.toUpperCase()}

${ageRange} ${sex} ${raceEthnicity.reduce((str, d, i)=> {\n if(i < raceEthnicity.length -1) {\n str += `${d}, ` \n } else {\n str += `${d}`\n }\n return str\n}, '')}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"html`Time Range: ${formatTime(timeRangeSelection[0])} - ${formatTime(timeRangeSelection[1])} `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1563,"value":"md`*🖌️Brush over the timeline to customize the time range. Click the timeline for full range.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"html`

Histogram (Distribution)

${selectedDataSet.name} 2018-2020

Yearly mean

Monthly differences based on previous year

Raw selected data

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"dataFiltered = {\n const firstFilter = selectedDataSet.data.filter((d)=>{\n if(d.age === ageRange && d.sex === sex ) { \n return d\n }\n })\n return firstFilter.reduce((acc, d)=>{\n raceEthnicity.forEach((cat)=>{\n if(cat !== \"all\") {\n if(d.race === cat || d.ethnicity === cat) {\n const data = filterDates(d.data, timeRangeSelection)\n acc.push(Object.assign({}, {...d, data}))\n } \n } else {\n if(d.race === cat && d.ethnicity === cat) {\n const data = filterDates(d.data, timeRangeSelection)\n acc.push(Object.assign({}, {...d, data}))\n }\n }\n })\n return acc\n },[])\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"html`

Utils

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"ageRange = userSelections.age","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"xlineScale = scales.xScale","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"sex = userSelections.sex","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"raceEthnicity = userSelections.race_ethnicity","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"selectedDatasetOption = userSelections.dataset","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":" dates = getDates(selectedDataSet)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1569,"value":"selectedDates = getSelectedDates(dataFiltered)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"x = d3.scaleUtc()\n .domain(d3.extent(dates))\n .range([margin.left, width - margin.right])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"y = scales.yScale","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1514,"value":"scales =axis(dataFiltered, timeRangeSelection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"selectedDataSet = setSelectedDataSet(selectedDatasetOption)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1483,"value":"import {formatTime, setSelectedDataSet, margin, calculateYearlyMean, calculateMonthDiffs, getDates, axis, filterDates, height, callout, getSelectedDates } from '@ahoak/data-exploration-utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"import {radio, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"import { table } from \"@gampleman/table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1426,"value":"import {monthArray, nominalColors, datasets} from '@ahoak/august-2020-unemployment-dataset'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"html` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 31:"$30:body"