2d:null 2e:["$","title",null,{"children":"Does Charlie WFH? | Georgios Varnavides | Observable"}] 33:T1b2b,intro_visualization = { // Canvas Setup const svg = d3.create("svg") .attr("viewBox", [0,0,intro_width,intro_height]); // White Background (For fullscreen view) const background = svg.append("rect") .attr("width",intro_width) .attr("height",intro_height) .attr("fill","white") let currentDate = allDates[65]; let currentDateMBTA = currentDate > maxStationDate ? maxStationDate : currentDate; /* COVID-19 New Cases Rate Panel */ const covid_group = svg.append("g"); // Join covid data to bars covid_group .selectAll("rect") .data(bostonData) .join("rect") .attr("class","covid-bars") .attr("x",d=>xScaleIntro(d.date)) .attr("y",d=>yScaleIntro(d.new_case_rate)) .attr("fill",colors.covid_off) .attr("height",d=>yScaleIntro(0)-yScaleIntro(d.new_case_rate)) .attr("width",xScaleIntro.bandwidth()) .attr("date",d=>d.date); // Color elapsed time bars with different color covid_group.selectAll("rect.covid-bars") .filter(d => xScaleIntro(d.date) <= xScaleIntro(currentDate)) .attr("fill",colors.covid_on); // Add covid axes covid_group.append("g").call(xAxisIntro).style("font-size","12px"); covid_group.append("g").call(yAxisIntro).style("font-size","12px"); /* Employment Change Panel */ const employment_group = svg.append("g"); // Fix employment level label positions let employmentLength = bostonDataEmployment.length; let labelsXPosition = xScaleIntro(bostonDataEmployment[employmentLength-1].date)+intro_margin.left/2; // Time-bisect to find nearest available employment date let currentXIndex = Math.min(bisectDate(bostonDataEmployment,currentDate),employmentLength-1); let currentXPosition = xScaleIntro(bostonDataEmployment[currentXIndex].date) // Add vertical dashed date tracker employment_group.append("line") .attr('class','epilog-emp') .attr("style", "stroke:#999; stroke-width:0.5; stroke-dasharray: 5 3;") .attr("y1",1/3*(-intro_padding_between_charts + 2*intro_height - 2*intro_margin.bottom + intro_margin.top)) .attr("y2", 1/3*(intro_padding_between_charts + intro_height - intro_margin.bottom + 2*intro_margin.top)) .attr("x1", currentXPosition) .attr("x2", currentXPosition); // loop over employment levels for (const employmentLevel in employment_medata){ // Employment paths employment_group.append("path") .attr("fill", "none") .attr("stroke",colors[employmentLevel]) .attr("stroke-miterlimit", 1) .attr("stroke-width", 2) .attr("d", employmentLineIntro(employmentLevel)(bostonDataEmployment)); // Employment labels employment_group.append('text') .attr('x',labelsXPosition) .attr('y',yScaleEmpIntro(bostonDataEmployment[employmentLength-1][employmentLevel])) .attr('font-size', '14px') .text(employment_medata[employmentLevel].label); // Tooltips employment_group.append('circle') .attr('class',employmentLevel) .attr('cx',currentXPosition) .attr('cy',yScaleEmpIntro(bostonDataEmployment[currentXIndex][employmentLevel])) .attr('r',5) .attr('fill',colors[employmentLevel]); } // Add employment axes employment_group.append("g").call(xAxisEmpIntro).style("font-size","12px"); employment_group.append("g").call(yAxisEmpIntro).style("font-size","12px"); /* Ridership Change Panel */ const ridership_group = svg.append("g"); // Time-bisect to find nearest available ridership date let ridershipLength = ridershipData.blue.length; let currentXIndexLines = Math.min(bisectDate(ridershipData.blue,currentDate),ridershipLength-1); let currentXPositionLines = xScaleIntro(ridershipData.blue[currentXIndexLines].date) // Add vertical dashed date tracker ridership_group.append("line") .attr('class','epilog-lines') .attr("style", "stroke:#999; stroke-width:0.5; stroke-dasharray: 5 3;") .attr("y1",1/3*(2*intro_height - 2*intro_margin.bottom + intro_margin.top + 2*intro_padding_between_charts)) .attr("y2", intro_height-intro_margin.bottom) .attr("x1", currentXPositionLines) .attr("x2", currentXPositionLines); // Loop over MBTA lines for (const line in xAxesMBTAIntro) { //Draw path ridership_group.append("path") .attr("fill", "none") .attr("stroke",colors[line]) .attr("stroke-miterlimit", 1) .attr("stroke-width", 2) .attr("d", ridershipLineIntro(yScalesMBTAIntro[line])(ridershipData[line])); //Add tooltip ridership_group.append('circle') .attr('class',line) .attr('cx',currentXPositionLines) .attr('cy',yScalesMBTAIntro[line](ridershipData[line][currentXIndexLines].ridership)) .attr('r',5) .attr('fill',colors[line]); // Add axes ridership_group.append("g").call(xAxesMBTAIntro[line]).style("font-size","12px"); ridership_group.append("g").call(yAxesMBTAIntro[line]).style("font-size","12px"); } /* Mousemove interactivity Need to restrict to right panel or otherwise 'pin' */ svg.on('mousemove', (event) => { // Time-bisect to find nearest available dates currentDate = scaleBandInvert(xScaleIntro)(d3.pointer(event)[0]); currentDateMBTA = currentDate > maxStationDate ? maxStationDate : currentDate; currentXIndex = Math.min(bisectDate(bostonDataEmployment,currentDate),employmentLength-1); currentXPosition = xScaleIntro(bostonDataEmployment[currentXIndex].date); currentXIndexLines = Math.min(bisectDate(ridershipData.blue,currentDate),ridershipLength-1); currentXPositionLines = xScaleIntro(ridershipData.blue[currentXIndexLines].date); // Covid-bar charts covid_group.selectAll("rect.covid-bars") .filter(d => d.date <= currentDate) .attr("fill",colors.covid_on); covid_group.selectAll("rect.covid-bars") .filter(d => d.date > currentDate) .attr("fill",colors.covid_off); // Dashed epilogs employment_group.select('line.epilog-emp') .attr("x1",currentXPosition) .attr('x2',currentXPosition); ridership_group.select('line.epilog-lines') .attr("x1",currentXPositionLines) .attr('x2',currentXPositionLines); // employment tooltips for (const employmentLevel in employment_medata){ employment_group.select(`circle.${employmentLevel}`) .attr("cx",currentXPosition) .attr('cy',yScaleEmpIntro(bostonDataEmployment[currentXIndex][employmentLevel])); } // MBTA tooltips for (const line in xAxesMBTAIntro) { ridership_group.select(`circle.${line}`) .attr("cx",currentXPositionLines) .attr('cy',yScalesMBTAIntro[line](ridershipData[line][currentXIndexLines].ridership)); } }); //covid_group.attr('visibility','hidden'); //employment_group.attr('visibility','hidden'); //ridership_group.attr('visibility','hidden'); return svg.node(); }34:T2638,{ const text = await FileAttachment("individual_line_maps@2.svg").text(); const document = (new DOMParser).parseFromString(text, "image/svg+xml"); const svg = d3.select(document.documentElement).remove(); // Make an svg tooltip to keep things contained in one div const tooltip = svg.append("g"); // Define inside function to minimize global variables in translating to vanilla JS let active_line = 'red_b'; let active_map = 'path_map_d'; let currentDate = allDates[65]; let currentDateMBTA = currentDate > maxStationDate ? maxStationDate : currentDate; const paths_metadata = ( { blue:({col:"#244995"}), green_e:({col:"#bae4b3"}), green_d:({col:"#74c476"}), green_c:({col:"#31a354"}), green_b:({col:"#006d2c"}), orange:({col:"#ef7d15"}), red_b:({col:"#fc9272"}), red_a:({col:"#de2d26"}) } ); for (const line of Object.keys(paths_metadata)) { // Append geographically-accurate paths to metadata object // and set visibility to hidden paths_metadata[line]['path_accurate'] = svg.selectAll("#"+line+"_accurate") .attr('visibility','hidden'); // Append map paths to metadata object // and style each line according to color paths_metadata[line]['path_map'] = svg.selectAll("#"+line+"_map") .attr('stroke',"gainsboro") .on("click",function(event) { paths_metadata[active_line]['path_map'] .attr('stroke',"gainsboro"); svg.selectAll(`path.sparkarea-${active_line}`) .attr("visibility",'hidden'); svg.selectAll(`path.sparkline-${active_line}`) .attr("visibility",'hidden'); svg.selectAll(`circle.dots-${active_line}`) .attr("visibility",'hidden'); svg.selectAll(`line.trackline-${active_line}`) .attr("visibility",'hidden'); svg.selectAll(`rect.tracks-${active_line}`) .attr("visibility",'hidden'); d3.select(this) .attr('stroke',paths_metadata[line]['col']); active_line = line; svg.selectAll(`path.sparkarea-${active_line}`) .attr("visibility",'visible'); svg.selectAll(`path.sparkline-${active_line}`) .attr("visibility",'visible'); svg.selectAll(`circle.dots-${active_line}`) .attr("visibility",'visible'); svg.selectAll(`line.trackline-${active_line}`) .attr("visibility",'visible'); svg.selectAll(`rect.tracks-${active_line}`) .attr("visibility",'visible'); }); paths_metadata[line]['path_accurate_d'] = paths_metadata[line]['path_accurate'].attr('d'); paths_metadata[line]['path_map_d'] = paths_metadata[line]['path_map'].attr('d'); }; // Add toggle div svg .append("text") .attr("x", highlight_margin.left) .attr("y", highlight_margin.top/3) .attr('font-size', '16px') .attr('font-weight', 'bold') .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("alignment-baseline","text-before-edge") .text("Toggle map") .attr("class","toggle") .on("click", function(d) { if (active_map=='path_accurate_d') { svg.selectAll("path[id$='_station']") .transition() .duration(3000) .attr('pointer-events','all') .attr("opacity", 1) .attr("stroke-opacity", 1); svg.selectAll("path[id$='_station_accurate']") .transition() .duration(3000) .attr('pointer-events','none') .attr("opacity", 0) .attr("stroke-opacity", 0); active_map = 'path_map_d'; } else { svg.selectAll("path[id$='_station_accurate']") .transition() .duration(3000) .attr('pointer-events','all') .attr("opacity", 1) .attr("stroke-opacity", 1); svg.selectAll("path[id$='_station']") .transition() .duration(3000) .attr('pointer-events','none') .attr("opacity", 0) .attr("stroke-opacity", 0); active_map = 'path_accurate_d'; }; for (const line of Object.keys(paths_metadata)) { paths_metadata[line]['path_map'] .transition() .duration(3000) .attrTween("d", pathTween(paths_metadata[line][active_map], 1)); }; }); // Select stations svg.selectAll("path[id*='_station']") .attr('style','null') .attr('fill','white') .attr('stroke','black') .attr('stroke-width',0.13229167) .on("mouseover",function(event) { const el = d3.select(this); const {x, y, width: w, height: h} = el.node().getBBox(); const station_name = el.attr("id").split("_")[0] const station_record = validationAndIncomeFormatted .filter(d => d.station === station_name && d.date.getTime() == currentDateMBTA.getTime())[0] el .attr("transform", `translate(${x+w/2},${y+h/2}) scale(3.5) translate(${-x-w/2},${-y-h/2})`); tooltip .attr("transform",`translate(${d3.pointer(event,this)[0]} ${d3.pointer(event,this)[1]})`) .call(callout,`${station_name}\nmedian income:${d3.format(".2s")(station_record.median_income)}\nvalidations change:${d3.format(".0%")(station_record.validation_change/100)}`); }) .on("mouseout",function(event) { d3.select(this).attr('transform',null); tooltip.call(callout,null); }); svg.selectAll("path[id$='_station_accurate']") .attr("opacity", 0) .attr("stroke-opacity", 0); for (const line in incomeDataStatic) { svg .append("path") .attr("class","sparkarea-"+line) .attr("visibility",'hidden') .attr("fill", colors[line]) .attr("opacity", 0.2) .attr("stroke","none") .attr("d", sparklineAreaMakerHighlight(incomeDataStatic[line])); svg .append("path") .attr("class","sparkline-"+line) .attr("visibility",'hidden') .attr("fill", "none") .attr("stroke",colors[line]) .attr("stroke-miterlimit", 1) .attr("stroke-width", 2) .attr("d", sparklineMakerHighlight(incomeDataStatic[line])); svg.selectAll("dot") .data(incomeDataStatic[line]) .join("circle") .attr("class","dots-"+line) .attr("visibility",'hidden') .attr("r", 3) .attr("fill","white") .attr("stroke","black") .attr("stroke-width", 1) .attr("cx", d=>xScale_highlight(d.projected_x)) .attr("cy", d=>yScale_highlight(d.median_income)); svg .append("line") .attr("class","trackline-"+line) .attr("visibility",'hidden') .attr("stroke", colors[line]) .attr("opacity", 0.5) .attr("fill", "none") .attr('stroke-linecap','round') .attr("stroke-miterlimit", 1) .attr("stroke-width", 5) .attr('x1',xScale_highlight(0)) .attr('x2',xScale_highlight(d3.max(incomeDataStatic[line].map(d=>+d.projected_x)))) .attr('y1',yScale_highlight(315000)) .attr('y2',yScale_highlight(315000)); svg .selectAll("rects") .data(validationAndIncomeData[line] .filter( d=> d.date.getTime()==currentDateMBTA.getTime())) .join("rect") .attr("class",`tracks-${line}`) .attr("visibility",'hidden') .attr("fill",d=> (d.validation_change != "0.") ? colors[line]: colors.covid_off) .attr("x", d=>xScale_highlight(d.projected_x)-width/300) .attr("y", d=>yScale_highlight(315000)-2*rectsHeightScale(Math.min(+d.validation_change,0))) .attr("height", d=>4*rectsHeightScale(Math.min(+d.validation_change,0))) .attr("width",width/150) .attr("opacity",0.5); } paths_metadata[active_line]['path_map'] .attr('stroke',paths_metadata[active_line]['col']); svg.selectAll(`path.sparkarea-${active_line}`) .attr("visibility",'visible'); svg.selectAll(`path.sparkline-${active_line}`) .attr("visibility",'visible'); svg.selectAll(`circle.dots-${active_line}`) .attr("visibility",'visible'); svg.selectAll(`line.trackline-${active_line}`) .attr("visibility",'visible'); svg.selectAll(`rect.tracks-${active_line}`) .attr("visibility",'visible'); const slider_g = svg .append('g') .attr('transform', `translate(${xScale_highlight(0)+highlight_margin.left/2},${highlight_height-2*highlight_margin.bottom})`); slider_g .call( slider.on('drag',function(datum) { currentDateMBTA = allDates[bisectDate(ridershipData.blue,datum)]; for (const line in validationAndIncomeData) { svg.selectAll(`rect.tracks-${line}`) .data(validationAndIncomeData[line] .filter( d=> d.date.getTime()==currentDateMBTA.getTime()),d=>d.station) .join( enter => enter, update => update .attr("y", d=>yScale_highlight(315000)-2*rectsHeightScale(Math.min(+d.validation_change,0))) .attr("height", d=>4*rectsHeightScale(Math.min(+d.validation_change,0))), exit => exit ) }; })); svg.append("g").call(highlight_xAxis).style("font-size","12px"); svg.append("g").call(highlight_yAxis).style("font-size","12px"); svg.append("g") .append("text") .attr("x", xScale_highlight(0)+highlight_margin.left/3) .attr("y", yScale_highlight(200000)-highlight_margin.top/3) .attr('font-size', '16px') .attr('font-weight', 'bold') .attr("fill", "currentColor") .attr("text-anchor", "start") .text("Median household income ($)"); svg.append("g") .append("text") .attr("x", xScale_highlight(0)+highlight_margin.left/3) .attr("y", highlight_margin.top/3) .attr('font-size', '16px') .attr('font-weight', 'bold') .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("alignment-baseline","text-before-edge") .text("Seasonally adjusted ridership"); return svg.node(); }35:T3032,visualization = { // Canvas Setup const svg = d3.create("svg") .attr("viewBox", [0,0,width,height]); // White Background (For fullscreen view) const background = svg.append("rect") .attr("width",width) .attr("height",height) .attr("fill","white") let currentDate = allDates[65]; let currentDateMBTA = currentDate > maxStationDate ? maxStationDate : currentDate; /* COVID-19 New Cases Rate Panel */ // Join covid data to bars svg.append("g") .selectAll("rect") .data(bostonData) .join("rect") .attr("class","covid-bars") .attr("x",d=>xScale(d.date)) .attr("y",d=>yScale(d.new_case_rate)) .attr("fill",colors.covid_off) .attr("height",d=>yScale(0)-yScale(d.new_case_rate)) .attr("width",xScale.bandwidth()) .attr("date",d=>d.date); // Color elapsed time bars with different color svg.selectAll("rect.covid-bars") .filter(d => xScale(d.date) <= xScale(currentDate)) .attr("fill",colors.covid_on); // Add covid axes svg.append("g").call(xAxis).style("font-size","14px"); svg.append("g").call(yAxis).style("font-size","14px"); /* Employment Change Panel */ // Fix employment level label positions let employmentLength = bostonDataEmployment.length; let labelsXPosition = xScale(bostonDataEmployment[employmentLength-1].date)+margin.left/2; // Time-bisect to find nearest available employment date let currentXIndex = Math.min(bisectDate(bostonDataEmployment,currentDate),employmentLength-1); let currentXPosition = xScale(bostonDataEmployment[currentXIndex].date) // Add vertical dashed date tracker svg.append("line") .attr('class','epilog-emp') .attr("style", "stroke:#999; stroke-width:0.5; stroke-dasharray: 5 3;") .attr("y1",1/3*(-padding_between_charts + 2*height - 2*margin.bottom + margin.top)) .attr("y2", 1/3*(padding_between_charts + height - margin.bottom + 2*margin.top)) .attr("x1", currentXPosition) .attr("x2", currentXPosition); // loop over employment levels for (const employmentLevel in employment_medata){ // Employment paths svg.append("path") .attr("fill", "none") .attr("stroke",colors[employmentLevel]) .attr("stroke-miterlimit", 1) .attr("stroke-width", 2) .attr("d", employmentLine(employmentLevel)(bostonDataEmployment)); // Employment labels svg.append('text') .attr('x',labelsXPosition) .attr('y',yScaleEmp(bostonDataEmployment[employmentLength-1][employmentLevel])) .attr('font-size', '16px') .text(employment_medata[employmentLevel].label); // Tooltips svg.append('circle') .attr('class',employmentLevel) .attr('cx',currentXPosition) .attr('cy',yScaleEmp(bostonDataEmployment[currentXIndex][employmentLevel])) .attr('r',5) .attr('fill',colors[employmentLevel]); } // Add employment axes svg.append("g").call(xAxisEmp).style("font-size","14px"); svg.append("g").call(yAxisEmp).style("font-size","14px"); /* Ridership Change Panel */ // Time-bisect to find nearest available ridership date let ridershipLength = ridershipData.blue.length; let currentXIndexLines = Math.min(bisectDate(ridershipData.blue,currentDate),ridershipLength-1); let currentXPositionLines = xScale(ridershipData.blue[currentXIndexLines].date) // Add vertical dashed date tracker svg.append("line") .attr('class','epilog-lines') .attr("style", "stroke:#999; stroke-width:0.5; stroke-dasharray: 5 3;") .attr("y1",1/3*(2*height - 2*margin.bottom + margin.top + 2*padding_between_charts)) .attr("y2", height-margin.bottom) .attr("x1", currentXPositionLines) .attr("x2", currentXPositionLines); // Loop over MBTA lines for (const line in xAxesMBTA) { //Draw path svg.append("path") .attr("fill", "none") .attr("stroke",colors[line]) .attr("stroke-miterlimit", 1) .attr("stroke-width", 2) .attr("d", ridershipLine(yScalesMBTA[line])(ridershipData[line])); //Add tooltip svg.append('circle') .attr('class',line) .attr('cx',currentXPositionLines) .attr('cy',yScalesMBTA[line](ridershipData[line][currentXIndexLines].ridership)) .attr('r',5) .attr('fill',colors[line]); // Add axes svg.append("g").call(xAxesMBTA[line]).style("font-size","14px"); svg.append("g").call(yAxesMBTA[line]).style("font-size","14px"); } /* SparkLines */ // Add axes svg .append("text") .attr("x", margin.left*3/2) .attr("y", margin.top) .attr('font-size', '16px') .attr('font-weight', 'bold') .attr("fill", "currentColor") .attr("text-anchor", "start") .text("Seasonally adjusted change in ridership"); svg .append("text") .attr("x", margin.left*3/2) .attr("y", sparkline_yscales['red_b'](200000)) .attr('font-size', '16px') .attr('font-weight', 'bold') .attr("fill", "currentColor") .attr("text-anchor", "start") .text("Median household income ($)"); svg.append("g").call(sparklinesXAxis).style("font-size","14px"); for (const line in incomeDataStatic) { svg.append("g") .call(yAxisSparkLine(line)) .attr("transform", `translate(${xScale_sparkline(sparkline_metadata[line].offset)},0)`) .style("font-size","14px"); svg .append("path") .attr("fill", colors[line]) .attr("opacity", 0.2) .attr("stroke","none") .attr("d", sparklineAreaMaker(line)(incomeDataStatic[line])) .attr("transform", `translate(${xScale_sparkline(sparkline_metadata[line].offset)-margin.left},0)`); svg .append("path") .attr("fill", "none") .attr("stroke",colors[line]) .attr("stroke-miterlimit", 1) .attr("stroke-width", 2) .attr("d", sparklineMaker(line)(incomeDataStatic[line])) .attr("transform", `translate(${xScale_sparkline(sparkline_metadata[line].offset)-margin.left},0)`); svg.selectAll("dot") .data(incomeDataStatic[line]) .join("circle") .attr("r", 3) .attr("fill","white") .attr("stroke","black") .attr("stroke-width", 1) .attr("cx", d=>xScale_sparkline(d.projected_x)) .attr("cy", d=>sparkline_yscales[line](d.median_income)) .attr("transform", `translate(${xScale_sparkline(sparkline_metadata[line].offset)-margin.left},0)`); svg .selectAll("rects") .data(validationAndIncomeData[line] .filter( d=> d.projected_x > sparkline_metadata[line].inflection && d.date.getTime()==currentDateMBTA.getTime())) .join("rect") .attr("class",`tracks-${line}`) .attr("fill",d=> (d.validation_change != "0.") ? colors[line]: colors.covid_off) .attr("x", d=>xScale_sparkline(d.projected_x)-width/300) .attr("y", d=>ridership_yscales[line](-50)-rectsHeightScale(Math.min(+d.validation_change,0))/2) .attr("height", d=>rectsHeightScale(Math.min(+d.validation_change,0))) .attr("width",width/150) .attr("opacity",0.5) .attr("transform", `translate(${xScale_sparkline(sparkline_metadata[line].offset)-margin.left},0)`); svg .append("path") .attr("stroke", colors[line]) .attr("opacity", 0.5) .attr("fill", "none") .attr("stroke-miterlimit", 1) .attr("stroke-width", 5) .attr("d", trackLines[line](incomeDataStatic[line])) .attr("transform", `translate(${xScale_sparkline(sparkline_metadata[line].offset)-margin.left},0)`); } /* Mousemove interactivity Need to restrict to right panel or otherwise 'pin' */ let sticky = 0; d3.select("body") .on("keydown", (event) => { if(event.isComposing || event.keyCode === 32 || event.keyCode === 13){ sticky = (sticky == 0) ? 1 : 0; } }); svg.on('click', (event) => { if (sticky == 1) { // Time-bisect to find nearest available dates currentDate = scaleBandInvert(xScale)(d3.pointer(event)[0]); currentDateMBTA = currentDate > maxStationDate ? maxStationDate : currentDate; currentXIndex = Math.min(bisectDate(bostonDataEmployment,currentDate),employmentLength-1); currentXPosition = xScale(bostonDataEmployment[currentXIndex].date); currentXIndexLines = Math.min(bisectDate(ridershipData.blue,currentDate),ridershipLength-1); currentXPositionLines = xScale(ridershipData.blue[currentXIndexLines].date); // Covid-bar charts svg.selectAll("rect.covid-bars") .filter(d => d.date <= currentDate) .attr("fill",colors.covid_on); svg.selectAll("rect.covid-bars") .filter(d => d.date > currentDate) .attr("fill",colors.covid_off); // Dashed epilogs svg.select('line.epilog-emp') .attr("x1",currentXPosition) .attr('x2',currentXPosition); svg.select('line.epilog-lines') .attr("x1",currentXPositionLines) .attr('x2',currentXPositionLines); // employment tooltips for (const employmentLevel in employment_medata){ svg.select(`circle.${employmentLevel}`) .attr("cx",currentXPosition) .attr('cy',yScaleEmp(bostonDataEmployment[currentXIndex][employmentLevel])); } // MBTA tooltips for (const line in xAxesMBTA) { svg.select(`circle.${line}`) .attr("cx",currentXPositionLines) .attr('cy',yScalesMBTA[line](ridershipData[line][currentXIndexLines].ridership)); } // Rects for (const line in validationAndIncomeData) { svg.selectAll(`rect.tracks-${line}`) .data(validationAndIncomeData[line] .filter( d=> d.projected_x > sparkline_metadata[line].inflection && d.date.getTime()==currentDateMBTA.getTime()),d=>d.station) .join( enter => enter, update => update .attr("y", d=>ridership_yscales[line](-50)-rectsHeightScale(Math.min(+d.validation_change,0))/2) .attr("height", d=>rectsHeightScale(Math.min(+d.validation_change,0))), exit => exit ) } } }); svg.on('mousemove', (event) => { if (sticky == 0) { // Time-bisect to find nearest available dates currentDate = scaleBandInvert(xScale)(d3.pointer(event)[0]); currentDateMBTA = currentDate > maxStationDate ? maxStationDate : currentDate; currentXIndex = Math.min(bisectDate(bostonDataEmployment,currentDate),employmentLength-1); currentXPosition = xScale(bostonDataEmployment[currentXIndex].date); currentXIndexLines = Math.min(bisectDate(ridershipData.blue,currentDate),ridershipLength-1); currentXPositionLines = xScale(ridershipData.blue[currentXIndexLines].date); // Covid-bar charts svg.selectAll("rect.covid-bars") .filter(d => d.date <= currentDate) .attr("fill",colors.covid_on); svg.selectAll("rect.covid-bars") .filter(d => d.date > currentDate) .attr("fill",colors.covid_off); // Dashed epilogs svg.select('line.epilog-emp') .attr("x1",currentXPosition) .attr('x2',currentXPosition); svg.select('line.epilog-lines') .attr("x1",currentXPositionLines) .attr('x2',currentXPositionLines); // employment tooltips for (const employmentLevel in employment_medata){ svg.select(`circle.${employmentLevel}`) .attr("cx",currentXPosition) .attr('cy',yScaleEmp(bostonDataEmployment[currentXIndex][employmentLevel])); } // MBTA tooltips for (const line in xAxesMBTA) { svg.select(`circle.${line}`) .attr("cx",currentXPositionLines) .attr('cy',yScalesMBTA[line](ridershipData[line][currentXIndexLines].ridership)); } // Rects for (const line in validationAndIncomeData) { svg.selectAll(`rect.tracks-${line}`) .data(validationAndIncomeData[line] .filter( d=> d.projected_x > sparkline_metadata[line].inflection && d.date.getTime()==currentDateMBTA.getTime()),d=>d.station) .join( enter => enter, update => update .attr("y", d=>ridership_yscales[line](-50)-rectsHeightScale(Math.min(+d.validation_change,0))/2) .attr("height", d=>rectsHeightScale(Math.min(+d.validation_change,0))), exit => exit ) } } }); return svg.node(); }36:T4ba,sparkline_yscales=( { blue:yScaleSparkline([height-margin.bottom, 1/7*(6*height - 6*margin.bottom + margin.top)]), orange:yScaleSparkline([1/4*(3*height - 3*margin.bottom + margin.top), 1/28*(17*height - 17*margin.bottom + 11*margin.top)]), red_a:yScaleSparkline([1/2*(height - margin.bottom + margin.top), 1/14*(5*height - 5*margin.bottom + 9*margin.top)]), red_b:yScaleSparkline([1/14*(5*height - 5*margin.bottom + 9*margin.top), 1/14*(3*height - 3*margin.bottom + 11*margin.top)]), green_b:yScaleSparkline([height - margin.bottom, 1/7*(6*height - 6*margin.bottom + margin.top)]), green_c:yScaleSparkline([1/7*(6*height - 6*margin.bottom + margin.top), 1/7*(5*height - 5*margin.bottom + 2*margin.top)]), green_d:yScaleSparkline([1/7*(5*height - 5*margin.bottom + 2*margin.top), 1/7*(4*height - 4*margin.bottom + 3*margin.top)]), green_e:yScaleSparkline([1/7*(4*height - 4*margin.bottom + 3*margin.top), 1/7*(3*height - 3*margin.bottom + 4*margin.top)]), } )37:T48e,trackLines=( { red_a:d3.line() .x(d => xScale_sparkline(d.projected_x)) .y(d => centroids('red_a','red_a')(d)) .curve(d3.curveMonotoneX), red_b:d3.line() .x(d => xScale_sparkline(d.projected_x)) .y(d => centroids('red_a','red_b')(d)) .curve(d3.curveMonotoneX), green_b:d3.line() .x(d => xScale_sparkline(d.projected_x)) .y(d => centroids('green_b','green_b')(d)) .curve(d3.curveMonotoneX), green_c:d3.line() .x(d => xScale_sparkline(d.projected_x)) .y(d => centroids('green_b','green_c')(d)) .curve(d3.curveMonotoneX), green_d:d3.line() .x(d => xScale_sparkline(d.projected_x)) .y(d => centroids('green_b','green_d')(d)) .curve(d3.curveMonotoneX), green_e:d3.line() .x(d => xScale_sparkline(d.projected_x)) .y(d => centroids('green_b','green_e')(d)) .curve(d3.curveMonotoneX), orange:d3.line() .x(d => xScale_sparkline(d.projected_x)) .y(d => centroids('orange','orange')(d)) .curve(d3.curveMonotoneX), blue:d3.line() .x(d => xScale_sparkline(d.projected_x)) .y(d => centroids('blue','blue')(d)) .curve(d3.curveMonotoneX) } )38:T4b6,ridership_yscales=( { blue:yScaleRidership([1/7*(6*height - 6*margin.bottom + margin.top), 1/4*(3*height - 3*margin.bottom + margin.top)]), orange:yScaleRidership([1/28*(17*height - 17*margin.bottom + 11*margin.top), 1/2*(height - margin.bottom + margin.top)]), red_a:yScaleRidership([1/14*(3*height - 3*margin.bottom + 11*margin.top), 1/28*(3*height - 3*margin.bottom + 25*margin.top)]), red_b:yScaleRidership([1/28*(3*height - 3*margin.bottom + 25*margin.top), margin.top]), green_b:yScaleRidership([1/7*(3*height - 3*margin.bottom + 4*margin.top), 1/28*(9*height - 9*margin.bottom + 19*margin.top)]), green_c:yScaleRidership([1/28*(9*height - 9*margin.bottom + 19*margin.top), 1/14*(3*height - 3*margin.bottom + 11*margin.top)]), green_d:yScaleRidership([1/14*(3*height - 3*margin.bottom + 11*margin.top), 1/28*(3*height - 3*margin.bottom + 25*margin.top)]), green_e:yScaleRidership([1/28*(3*height - 3*margin.bottom + 25*margin.top), margin.top]), } )39:[{"id":"77c75a22c861833bbc4822a4a365e445aff8f076235e5bccc3bdcd8e1fc95a1c2f524fa59016c9f57d793628df3b8440f49642ef94e83d9c7014ec8635234e80","href":"https://static.observableusercontent.com/files/77c75a22c861833bbc4822a4a365e445aff8f076235e5bccc3bdcd8e1fc95a1c2f524fa59016c9f57d793628df3b8440f49642ef94e83d9c7014ec8635234e80","name":"COVID-City-Daily@1.csv","type":"text/csv","lastModified":1617407987416.663,"size":1497098},{"id":"73d8268b484bdba0f90d76787ef877f9c0b84eea721fa4bc4854e9746aa211ba4b52263a182967f08f4e4057fcd9a2f2a28c0eac82af879a72ba768c60646237","href":"https://static.observableusercontent.com/files/73d8268b484bdba0f90d76787ef877f9c0b84eea721fa4bc4854e9746aa211ba4b52263a182967f08f4e4057fcd9a2f2a28c0eac82af879a72ba768c60646237","name":"individual_line_maps@2.svg","type":"image/svg+xml","lastModified":1618258832983.235,"size":142537},{"id":"bc400a86f0c3833b5b3739841b7a0f4b27c6b6823db174845f728d759f5ec967a7b0e93873f271d39c74943b052bc7663bce7c0463bee366a8e4989c5ce5507f","href":"https://static.observableusercontent.com/files/bc400a86f0c3833b5b3739841b7a0f4b27c6b6823db174845f728d759f5ec967a7b0e93873f271d39c74943b052bc7663bce7c0463bee366a8e4989c5ce5507f","name":"Employment-City-Daily.csv","type":"text/csv","lastModified":1617475681622.227,"size":15155},{"id":"d0e6b4c03e94325e4a76ead75f5b91c96dbef34d738e48bdfc7febabe95bddceae59e979e995b69d83e412a31d22fe880ee93ae83ea0e4eba94866646c1d9296","href":"https://static.observableusercontent.com/files/d0e6b4c03e94325e4a76ead75f5b91c96dbef34d738e48bdfc7febabe95bddceae59e979e995b69d83e412a31d22fe880ee93ae83ea0e4eba94866646c1d9296","name":"mbda-gated-station-validations-by-line-seasonally-adjusted@2.csv","type":"text/csv","lastModified":1617486822015.258,"size":114902},{"id":"a5b14e5e8b86eae061feb075fe2131e08e629a4630576c90f23f044280d9783a560138da48681cccc9efa08acbb6aa302c9d49f4e23b9b466b5aa803dd875c29","href":"https://static.observableusercontent.com/files/a5b14e5e8b86eae061feb075fe2131e08e629a4630576c90f23f044280d9783a560138da48681cccc9efa08acbb6aa302c9d49f4e23b9b466b5aa803dd875c29","name":"tabular-station-validations-plus-income@1.csv","type":"text/csv","lastModified":1617660800758.288,"size":5281480}] 31:{"id":"cca8f8c82f26ac5b","slug":"does-charlie-wfh","title":"Does Charlie WFH?","thumbnail":"92bb8ac78a7ab26b2f925fc6c4e4c63f9842731faab40cc5d6b39fda81bc2c9e","access_level":"public","create_time":"$D2021-04-02T23:55:45.785Z","update_time":"$D2021-04-30T19:36:53.559Z","view_time":null,"first_public_time":"$D2021-04-30T19:38:16.640Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"69c521ca096fbf54","login":"gvarnavi","name":"Georgios Varnavides","avatar_url":"https://avatars-next.observableusercontent.com/57bb5cf1c4a2d1352d2dcf9f07e535f6e39eb182bbe2295099a4f46fdde5f613","tier":"starter_2024"},"version":5860,"publish_version":5860,"role":null,"authored":false,"authors":[{"type":"individual","id":"6649dc029d167559","login":"gvarnavi","name":"Georgios Varnavides","avatar_url":"https://avatars-next.observableusercontent.com/4c6924e984dc3d1f89f81dee4e6fc0ca3ab63880a01338b6b6f64d28bc7321e5","tier":null}],"members":[{"type":"individual","id":"6649dc029d167559","login":"gvarnavi","name":"Georgios Varnavides","avatar_url":"https://avatars-next.observableusercontent.com/4c6924e984dc3d1f89f81dee4e6fc0ca3ab63880a01338b6b6f64d28bc7321e5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Does Charlie WFH?","cells":[{"id":859,"value":"md`# Does Charlie WFH?\nGeorgios Varnavides and Max L'Etoile.\n\nPrototype notebook for interactive visualization comparing the drop in ridership with median income along MBTA tracks during the pandemic.\n\nThe deployed visualization can be found here: https://6859-sp21.github.io/a4-does-charlie-wfh/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3187,"value":"md`## Intro Visualizations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3261,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2863,"value":"md`## Single Line Highlight`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2868,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3237,"value":"md`## Martini Glass Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1908,"value":"fullscreen = {\n const button = html`