31:T482,md` After the COVID pandemic started in January 2020, the dynamics of living in Seattle were expected to change. For instance, the stay-at-home policy and reduction of willingness/need to travel may have led to the preference of staying at home for many residents. Such a lifestyle change in the large-scale population for more than one year (from January 2020 to May 2021) had caused a different reaction from the home/rental market and the local government in Seattle. Therefore, we are interested in observing and comparing the trends of living-related variables in Seattle before and after the pandemic. \n \n Our target users are travelers or Seattle residents considering relocating to other regions in Seattle. Their primary interest lies in the cost of living (home/rental price) and the quality of living based on the observed public request of mending facilities and community maintenance from residents to the local government. Currently, it is still the COVID pandemic period, and an observation ranging before and after COVID would help the user to make a comparison and corresponding decision to relocate before or after the pandemic ends.`32:T17cc,chart = { const height = 500; const width = 775; const path = d3.geoPath().projection(projection); const svg = d3.create("svg") .attr("viewBox", [300, 0, width, height]); /* const water = svg.selectAll("path.water") .data(tilesFromFile) .enter().append("path") .attr("class", "water") .style("fill", "#A0BEF8") .attr("d", d => path(d.data.water)) .style("stroke-width", 1) .style("stroke-opacity", .5); */ let selectedZip = "All"; let isFocused = false; // Draw initial small multiple groups (default to data from all zip codes) drawSmallMultiples(svg, selectedZip); // Add header to indicate zip code that user has selected svg.append('text') .text("All of Seattle") .attr("id", "zipHeader") .attr("transform", `translate(${width + 20}, ${margin.top + 20})`) .attr("font-size", "22px") .attr("font-weight", "500"); // Add descriptor for pre-post COVID-19 divider svg.append("line") .attr("x1", width - 55) .attr("y1", height - 5) .attr("x2", width - 55) .attr("y2", height - 25) .attr("stroke", "steelblue") .attr("stroke-dasharray", 4) .attr("fill", "none") .attr("stroke-width", 1) svg.append("text") .text("Feb. 2020 ~ US Declares Public Health Emergency Due to COVID-19") .attr("id", "small-multiple-legend") .attr("transform", `translate(${width - 45}, ${height - 10})`) .attr("font-size", '12px') .attr("font-style", 'italic'); const gradient = svg .append("linearGradient") .attr("y1", 0) .attr("y2", 0) .attr("x1", "0") .attr("x2", width * 0.75) .attr("id", "gradient") .attr("gradientUnits", "userSpaceOnUse") gradient .append("stop") .attr("offset", "0") .attr("stop-color", "#A0BEF8") gradient .append("stop") .attr("offset", "2.5") .attr("stop-color", "white") // This adds the water color. Comment out to remove. svg.append("rect") .attr("width", "75%") .attr("height", "100%") .attr("fill", "url(#gradient)"); svg.selectAll("path.zip") .data(dataGeoWithMeasures.features) .enter() .append("path") .attr("class", "zip") .attr("d", path) .style("fill", d => { return "white"; // Override colorings for now return selectedMeasure in d.properties.dataPrePost ? color(d.properties.dataPrePost[selectedMeasure].PreCovidMean) : color(0); }) .style("fill-opacity", 1) .style("stroke", "grey") .style("stroke-opacity", 0.3) .style("cursor", "pointer") .on("mouseover", (d, i, n) => { if (!isFocused) { const zip = d.properties.GEOID10; d3.select(n[i]) .style("stroke-opacity", 1) .style("stroke", "#69b3a2") .style("fill", "#69b3a2") .style("fill-opacity", 0.2); selectedZip = zip; d3.select("#zipHeader").text(`Zip Code: ${selectedZip}`); drawSmallMultiples(svg, selectedZip); } }) .on("mouseout", (d, i, n) => { if (!isFocused) { d3.select(n[i]) .style("stroke-opacity", 0.3) .style("stroke", "grey") .style("fill", "white") .style("fill-opacity", 1); selectedZip = "All"; d3.select("#zipHeader").text("All of Seattle"); drawSmallMultiples(svg, selectedZip); } }) .on("click", (d, i, n) => { const zip = d.properties.GEOID10; if (!isFocused) { d3.select(n[i]) .style("stroke-opacity", 1) .style("stroke", "#69b3a2") .style("stroke-width", 2) .classed("selected", true); isFocused = true; selectedZip = zip; } else { if (zip !== selectedZip) { d3.selectAll(".selected") .style("stroke-opacity", 0.3) .style("stroke", "grey") .style("stroke-width", 1) .style("fill", "white") .style("fill-opacity", 1) .classed("selected", false); d3.select(n[i]) .style("stroke-opacity", 1) .style("stroke", "#69b3a2") .style("stroke-width", 1) .style("fill", '#69b3a2') .style("fill-opacity", 0.4) .classed("selected", true); selectedZip = zip; } else { d3.select(n[i]) .style("stroke-opacity", 0.3) .style("stroke", "grey") .style("stroke-width", 1) .classed("selected", false); isFocused = false; selectedZip = "All"; } } d3.select("#zipHeader").text(selectedZip === "All" ? "All of Seattle" : `Zip Code: ${selectedZip}`); drawSmallMultiples(svg, selectedZip); }); const sparkline = (values, width = 12.5, height = 7) => { const extent = d3.extent(values); const x = d3.scaleLinear().domain([0, 1]).range([0.5, width - 0.5]); const y = d3.scaleLinear().domain([extent[0] * 0.8, extent[1] * 1.2]).range([height - 0.5, 0.5]); const line = d3.line().x((d, i) => x(i)).y(y); return line(values); } // Add a sparkline over each zip svg.selectAll("path.sparkline") .data(dataGeoWithMeasures.features) .enter() .append("path") .attr("class", "sparkline") .attr("transform", d => { const coords = path.centroid(d); return `translate(${[ coords[0]-6, coords[1] ]})` }) .attr('d', d => { const data = d.properties.dataMonthly[selectedMeasure]; if (data) { const firstlast = [ data[0].Value, data[data.length-1].Value ]; return sparkline(firstlast); } }) .attr("fill", "transparent") .attr('stroke', d => { const data = d.properties.dataMonthly[selectedMeasure]; if (data) { const first = +data[0].Value; const last = +data[data.length-1].Value; if (first > last) { return "red"; } else if (first === last) { return "steelblue"; } else { return "green"; } } return "steelblue"; }); return Object.assign(svg.node(), { update(selectedMeasures) { drawSmallMultiples(svg, selectedZip); } }); }33:T17c2,function drawSmallMultiples(svg, selectedZip) { /** * Small multiples * Adapted from https://observablehq.com/@nyuvis/small-multiples-with-different-axes */ const margin = { top: 20, bottom: 20, left: 50, right: 20 }; const height = 500; const width = 750; // Clear previous data in svg svg.selectAll(".small-multiple-area").remove(); svg.selectAll(".small-multiple-line").remove(); svg.selectAll(".small-multiple-title").remove(); svg.selectAll(".small-multiple-label").remove(); svg.selectAll(".y-axis").remove(); svg.selectAll(".x-axis").remove(); svg.selectAll(".grid").remove(); svg.selectAll(".divide").remove(); svg.selectAll(".no-data").remove(); // Create a parent for all small multiple groups const g = svg .append("g") .attr("transform", `translate(${width - 100}, ${margin.top + 40})`) .raise(); // Create a child element for each small multiple within parent const cells = g .append("g") .selectAll("g") .data(dataMonthlyByZipAndMeasure[selectedZip]) .join("g") .attr("class", "cell") .attr("transform", (d) => `translate(${col(d.col)}, ${row(d.row)})`) .on("mouseover", (d, i, n) => { d3.select(n[i]).selectAll('.small-multiple-label').style('fill','black'); }) .on("mouseout", (d, i, n) => { d3.select(n[i]).selectAll('.small-multiple-label').style('fill','transparent'); }); // Add area to each cell cells .append("path") /* .attr('d', d => { const data = dataMonthlyByZipAndMeasure[selectedZip].find(v => v.key === d); const vals = data ? data.values : []; const scale = zip2Measure2Scale[selectedZip][d]; if (scale) return scale.area(vals); return null; }) */ .attr("d", (d) => zip2Measure2Scale[selectedZip][d.key].area(d.values)) .attr("class", "small-multiple-area") .attr("fill", "#69b3a2") .attr("opacity", 0.2) .style("cursor", "pointer") .on("mouseover", (d, i, n) => d3.select(n[i]).style("opacity", "0.5")) .on("mouseout", (d, i, n) => d3.select(n[i]).style("opacity", "0.3")); // Add line to each cell const paths = cells .append("path") /* .attr('d', d => { const data = dataMonthlyByZipAndMeasure[selectedZip].find(v => v.key === d); const vals = data ? data.values : []; const scale = zip2Measure2Scale[selectedZip][d]; if (scale) return scale.line(vals); return null; }) */ .attr("d", (d) => zip2Measure2Scale[selectedZip][d.key].line(d.values)) .attr("class", "small-multiple-line") .attr("fill", "none") .attr("stroke", "#69b3a2") .attr("stroke-width", 2) .attr("stroke-opacity", 0.9) .on("mouseover", (d, i, n) => { d3.select(n[i]).style("stroke-opacity", "1"); }) .on("mouseout", (d, i, n) => { d3.select(n[i]).style("stroke-opacity", "0.8"); }); // Add a title to each cell cells .append("text") .text((d) => d.key) .attr("class", "small-multiple-title") .attr("dy", "-3px") .attr("font-size", "9px") .attr("font-weight", "700") .attr("color", "rgb(150,150,150)"); cells.each(function (d) { const yscale = d3 .scaleLinear() .domain([0, d3.max(d.values, (d) => d.Value)]) .range([row.bandwidth(), 0]) .nice(); const xscale = d3 .scaleTime() .domain([ startDate, endDate ]) // Hard-code to align x-axes //.domain(d3.extent(d.values, (d) => d.Month)) .range([0, col.bandwidth()]) .nice(); // Add y-axis d3.select(this) .append("g") .attr("class", "y-axis") .call(d3.axisLeft(yscale).ticks(4).tickSizeOuter(0)) .call((g) => g.selectAll(".domain").remove()); // Hide domain line at the top // Add y-axis gridlines d3.select(this) .append("g") .attr("class", "grid") .attr("stroke-opacity", 0.1) .attr("stroke-dasharray", 2) .call( d3.axisLeft(yscale).ticks(4).tickSize(-col.bandwidth()).tickFormat("") ) .call(g => g.select(".domain").remove()); // Only show x-axis line & dividing line if data available if (d.values.length) { // Add first label d3.select(this) .append('text') .attr('class', 'small-multiple-label') .attr('x', d => xscale(d.values[0].Month)-20) .attr('y', d => yscale(d.values[0].Value)) .attr('dy', '0.35em') .style('fill', "transparent") .style('font-family', 'sans-serif') .style('font-size', "10px") .text(d => Math.floor(d.values[0].Value).toLocaleString()); // Add last label d3.select(this) .append('text') .attr('class', 'small-multiple-label') .attr('x', d => xscale(d.values[d.values.length-1].Month)-10) .attr('y', d => yscale(d.values[d.values.length-1].Value)) .attr('dy', '0.35em') .style('fill', "transparent") .style('font-family', 'sans-serif') .style('font-size', "10px") .text(d => Math.floor(d.values[d.values.length-1].Value).toLocaleString()); // Add x-axis d3.select(this) .append("g") .attr("class", "x-axis") .attr("transform", `translate(0, ${row.bandwidth()})`) .call(d3.axisBottom(xscale).ticks(d3.timeYear).tickSizeOuter(0)); // Add dividing line indicating pre/post COVID-19 d3.select(this) .append("line") .attr("class", "divide") .style("stroke", "steelblue") .style("stroke-dasharray", 4) .style("fill", "none") .style("stroke-width", 1) .attr("y1", yscale.range()[0]) .attr("y2", yscale.range()[1]) .attr("x1", xscale(new Date(2020, 2))) .attr("x2", xscale(new Date(2020, 2))); } else { d3.select(this) .append('text') .attr("class", "no-data") .attr("font-size", "9.5px") .style("fill", "rgb(150,150,150)") .text("(No data available)") .attr("transform", `translate(0, 10)`) } }); }34:T5ac,dataGeoWithMeasures = { const geo = Object.assign({}, seattleZipCodesGeo); for (let i = 0; i < geo.features.length; i++) { const properties = geo.features[i].properties; const zip = properties.ZCTA5CE10; properties.dataMonthly = Object.fromEntries( d3.nest() .key(k => k.Measure) .entries(dataByMonthFinal .params({ zip }) .filter((d, $) => d.ZipCode === $.zip) .filter((d, $) => d.Month >= $.startDate) .filter((d, $) => d.Month <= $.endDate) .orderby('Month') .objects()) .map(e => [ e.key, e.values ]) ); properties.dataPrePost = Object.fromEntries( d3.nest() .key(k => k.Measure) .entries(dataPrePost .params({ zip }) .filter((d, $) => d.ZipCode === $.zip) .objects()) .map(e => [ e.key, e.values[0] ]) ); geo.properties = properties; } return geo; }35:T601,dataByMonth = { return aq.from(spdCrimeAgg) .derive({ DataSource: d => 'SPDCrime', ZipCode: d => `${d.ZipCode}` }) .select({ DataSource: 'DataSource', OffenseType: 'Measure', Date: 'Month', ZipCode: 'ZipCode', count: 'Value' }) // Add Public Requests .union( aq.from(publicRequestsAgg) .derive({ DataSource: d => 'PublicRequests', ZipCode: d => `${d.ZipCode}` }) .select({ DataSource: 'DataSource', 'Request Type': 'Measure', Date: 'Month', ZipCode: 'ZipCode', count: 'Value' }) ) // Add Zillow Homes .union( aq.from(zillowHomesPivot) .derive({ DataSource: d => 'ZillowHomes', Measure: d => 'Median Home Price', ZipCode: d => `${d.ZipCode}` }) .select({ DataSource: 'DataSource', Measure: 'Measure', Date: 'Month', ZipCode: 'ZipCode', Value: 'Value' }) ) // Add Zillow Rent .union( aq.from(zillowRentPivot) .derive({ DataSource: d => 'ZillowHomes', Measure: d => 'Median Monthly Rent Price', ZipCode: d => `${d.ZipCode}` }) .select({ DataSource: 'DataSource', Measure: 'Measure', Date: 'Month', ZipCode: 'ZipCode', Value: 'Value' }) ) // Add Pet Licenses .union( aq.from(petLicensesAgg) .derive({ DataSource: d => 'PetLicenses', Measure: d => 'Pet Licenses', ZipCode: d => `${d.ZipCode}` }) .select({ DataSource: 'DataSource', Measure: 'Measure', Date: 'Month', ZipCode: 'ZipCode', count: 'Value' }) ) }36:T11f1,{ const normalizeType = d => d .split(' ') .map(t => t[0] + t.toLowerCase().substring(1, t.length)) .join(' ') for (let i = 0; i < spdCrime.length; i++) { spdCrime[i].OffenseType = normalizeType(spdCrime[i].OffenseType); switch (spdCrime[i].Area) { /** * Mapped manually using * - https://github.com/seattleio/seattle-boundaries-data/blob/master/data/neighborhoods.geojson * - https://github.com/seattleio/seattle-boundaries-data/blob/master/data/zip-codes.geojson * - Google Maps (for search) */ case "ALASKA JUNCTION": spdCrime[i].ZipCode = 98116; break; case "ALKI": spdCrime[i].ZipCode = 98116; break; case "BALLARD NORTH": spdCrime[i].ZipCode = 98117; break; case "BALLARD SOUTH": spdCrime[i].ZipCode = 98107; break; case "BELLTOWN": spdCrime[i].ZipCode = 98121; break; case "BITTERLAKE": spdCrime[i].ZipCode = 98133; break; case "BALLARD NORTH": spdCrime[i].ZipCode = 98117; break; case "BRIGHTON/DUNLAP": spdCrime[i].ZipCode = 98118; break; case "CAPITOL HILL": spdCrime[i].ZipCode = 98102; break; case "CENTRAL AREA/SQUIRE PARK": spdCrime[i].ZipCode = 98122; break; case "CHINATOWN/INTERNATIONAL DISTRICT": spdCrime[i].ZipCode = 98104; break; case "CLAREMONT/RAINIER VISTA": spdCrime[i].ZipCode = 98144; break; case "COLUMBIA CITY": spdCrime[i].ZipCode = 98118; break; case "COMMERCIAL DUWAMISH": spdCrime[i].ZipCode = 98134; break; case "COMMERCIAL HARBOR ISLAND": spdCrime[i].ZipCode = 98134; break; case "DOWNTOWN COMMERCIAL": spdCrime[i].ZipCode = 98104; break; case "EASTLAKE - EAST": spdCrime[i].ZipCode = 98102; break; case "EASTLAKE - WEST": spdCrime[i].ZipCode = 98102; break; case "FAUNTLEROY SW": spdCrime[i].ZipCode = 98136; break; case "FIRST HILL": spdCrime[i].ZipCode = 98104; break; case "FREMONT": spdCrime[i].ZipCode = 98103; break; case "GENESEE": spdCrime[i].ZipCode = 98116; break; case "GEORGETOWN": spdCrime[i].ZipCode = 98108; break; case "GREENWOOD": spdCrime[i].ZipCode = 98103; break; case "HIGH POINT": spdCrime[i].ZipCode = 98126; break; case "HIGHLAND PARK": spdCrime[i].ZipCode = 98106; break; case "HILLMAN CITY": spdCrime[i].ZipCode = 98118; break; case "JUDKINS PARK/NORTH BEACON HILL": spdCrime[i].ZipCode = 98144; break; case "LAKECITY": spdCrime[i].ZipCode = 98125; break; case "LAKEWOOD/SEWARD PARK": spdCrime[i].ZipCode = 98118; break; case "MADISON PARK": spdCrime[i].ZipCode = 98112; break; case "MADRONA/LESCHI": spdCrime[i].ZipCode = 98122; break; case "MAGNOLIA": spdCrime[i].ZipCode = 98199; break; case "MID BEACON HILL": spdCrime[i].ZipCode = 98108; break; case "MILLER PARK": spdCrime[i].ZipCode = 98112; break; case "MONTLAKE/PORTAGE BAY": spdCrime[i].ZipCode = 98102; break; case "MORGAN": spdCrime[i].ZipCode = 98136; break; case "MOUNT BAKER": spdCrime[i].ZipCode = 98144; break; case "NEW HOLLY": spdCrime[i].ZipCode = 98118; break; case "NORTH ADMIRAL": spdCrime[i].ZipCode = 98116; break; case "NORTH BEACON HILL": spdCrime[i].ZipCode = 98144; break; case "NORTH DELRIDGE": spdCrime[i].ZipCode = 98106; break; case "NORTHGATE": spdCrime[i].ZipCode = 98133; break; case "PHINNEY RIDGE": spdCrime[i].ZipCode = 98103; break; case "PIGEON POINT": spdCrime[i].ZipCode = 98106; break; case "PIONEER SQUARE": spdCrime[i].ZipCode = 98104; break; case "QUEEN ANNE": spdCrime[i].ZipCode = 98119; break; case "RAINIER BEACH": spdCrime[i].ZipCode = 98118; break; case "RAINIER VIEW": spdCrime[i].ZipCode = 98178; break; case "ROOSEVELT/RAVENNA": spdCrime[i].ZipCode = 98105; break; case "ROXHILL/WESTWOOD/ARBOR HEIGHTS": spdCrime[i].ZipCode = 98136; break; case "SANDPOINT": spdCrime[i].ZipCode = 98115; break; case "SLU/CASCADE": spdCrime[i].ZipCode = 98109; break; case "SODO": spdCrime[i].ZipCode = 98134; break; case "SOUTH BEACON HILL": spdCrime[i].ZipCode = 98144; break; case "SOUTH DELRIDGE": spdCrime[i].ZipCode = 98106; break; case "SOUTH PARK": spdCrime[i].ZipCode = 98108; break; case "UNIVERSITY": spdCrime[i].ZipCode = 98105; break; case "WALLINGFORD": spdCrime[i].ZipCode = 98103; break; default: spdCrime[i].ZipCode = null; break; } } return spdCrime; }37:T1954,{ for (let i = 0; i < publicRequests.length; i++) { switch (publicRequests[i].Neighborhood) { /** * Mapped manually using * - https://github.com/seattleio/seattle-boundaries-data/blob/master/data/neighborhoods.geojson * - https://github.com/seattleio/seattle-boundaries-data/blob/master/data/zip-codes.geojson * - Google Maps (for search) */ case "ADAMS": publicRequests[i].ZipCode = 98107; break; case "ATLANTIC": publicRequests[i].ZipCode = 98144; break; case "BELLTOWN": publicRequests[i].ZipCode = 98121; break; case "BROADWAY": publicRequests[i].ZipCode = 98102; break; case "CEDAR PARK": publicRequests[i].ZipCode = 98125; break; case "CENTRAL BUSINESS DISTRICT": publicRequests[i].ZipCode = 98104; break; case "COLUMBIA CITY": publicRequests[i].ZipCode = 98118; break; case "EASTLAKE": publicRequests[i].ZipCode = 98102; break; case "FAIRMOUNT PARK": publicRequests[i].ZipCode = 98126; break; case "FIRST HILL": publicRequests[i].ZipCode = 98104; break; case "FREMONT": publicRequests[i].ZipCode = 98103; break; case "GATEWOOD": publicRequests[i].ZipCode = 98136; break; case "GENESEE": publicRequests[i].ZipCode = 98116; break; case "GREEN LAKE": publicRequests[i].ZipCode = 98103; break; case "HALLER LAKE": publicRequests[i].ZipCode = 98133; break; case "HIGH POINT": publicRequests[i].ZipCode = 98126; break; case "INTERNATIONAL DISTRICT": publicRequests[i].ZipCode = 98104; break; case "LAURELHURST": publicRequests[i].ZipCode = 98105; break; case "LAWTON PARK": publicRequests[i].ZipCode = 98199; break; case "LOWER QUEEN ANNE": publicRequests[i].ZipCode = 98109; break; case "LOYAL HEIGHTS": publicRequests[i].ZipCode = 98117; break; case "MADISON PARK": publicRequests[i].ZipCode = 98112; break; case "MAPLE LEAF": publicRequests[i].ZipCode = 98115; break; case "MATTHEWS BEACH": publicRequests[i].ZipCode = 98115; break; case "MEADOWBROOK": publicRequests[i].ZipCode = 98115; break; case "MID-BEACON HILL": publicRequests[i].ZipCode = 98144; break; case "MINOR": publicRequests[i].ZipCode = 98122; break; case "MONTLAKE": publicRequests[i].ZipCode = 98102; break; case "MOUNT BAKER": publicRequests[i].ZipCode = 98144; break; case "NORTH ADMIRAL": publicRequests[i].ZipCode = 98116; break; case "NORTH BEACH/BLUE RIDGE": publicRequests[i].ZipCode = 98117; break; case "NORTH BEACON HILL": publicRequests[i].ZipCode = 98144; break; case "NORTH DELRIDGE": publicRequests[i].ZipCode = 98106; break; case "NORTH QUEEN ANNE": publicRequests[i].ZipCode = 98119; break; case "PIONEER SQUARE": publicRequests[i].ZipCode = 98104; break; case "RAINIER BEACH": publicRequests[i].ZipCode = 98118; break; case "RAVENNA": publicRequests[i].ZipCode = 98115; break; case "ROOSEVELT": publicRequests[i].ZipCode = 98105; break; case "SEWARD PARK": publicRequests[i].ZipCode = 98118; break; case "SOUTH LAKE UNION": publicRequests[i].ZipCode = 98109; break; case "SOUTH PARK": publicRequests[i].ZipCode = 98108; break; case "SOUTHEAST MAGNOLIA": publicRequests[i].ZipCode = 98199; break; case "STEVENS": publicRequests[i].ZipCode = 98112; break; case "UNIVERSITY DISTRICT": publicRequests[i].ZipCode = 98105; break; case "WALLINGFORD": publicRequests[i].ZipCode = 98103; break; case "WHITTIER HEIGHTS": publicRequests[i].ZipCode = 98117; break; case "WINDERMERE": publicRequests[i].ZipCode = 98105; break; case "ALKI": publicRequests[i].ZipCode = 98116; break; case "ARBOR HEIGHTS": publicRequests[i].ZipCode = 98146; break; case "BITTER LAKE": publicRequests[i].ZipCode = 98133; break; case "BRIARCLIFF": publicRequests[i].ZipCode = 98199; break; case "BRIGHTON": publicRequests[i].ZipCode = 98118; break; case "BROADVIEW": publicRequests[i].ZipCode = 98177; break; case "BRYANT": publicRequests[i].ZipCode = 98105; break; case "CROWN HILL": publicRequests[i].ZipCode = 98117; break; case "DUNLAP": publicRequests[i].ZipCode = 98118; break; case "EAST QUEEN ANNE": publicRequests[i].ZipCode = 98119; break; case "FAUNTLEROY": publicRequests[i].ZipCode = 98136; break; case "GEORGETOWN": publicRequests[i].ZipCode = 98108; break; case "GREENWOOD": publicRequests[i].ZipCode = 98103; break; case "HARRISON/DENNY-BLAINE": publicRequests[i].ZipCode = 98112; break; case "HIGHLAND PARK": publicRequests[i].ZipCode = 98106; break; case "HOLLY PARK": publicRequests[i].ZipCode = 98108; break; case "INDUSTRIAL DISTRICT": publicRequests[i].ZipCode = 98134; break; case "INTERBAY": publicRequests[i].ZipCode = 98119; break; case "LESCHI": publicRequests[i].ZipCode = 98144; break; case "MADRONA": publicRequests[i].ZipCode = 98122; break; case "MANN": publicRequests[i].ZipCode = 98122; break; case "NORTH COLLEGE PARK": publicRequests[i].ZipCode = 98103; break; case "OLYMPIC HILLS": publicRequests[i].ZipCode = 98125; break; case "PHINNEY RIDGE": publicRequests[i].ZipCode = 98103; break; case "PINEHURST": publicRequests[i].ZipCode = 98125; break; case "RAINIER VIEW": publicRequests[i].ZipCode = 98178; break; case "RIVERVIEW": publicRequests[i].ZipCode = 98106; break; case "ROXHILL": publicRequests[i].ZipCode = 98136; break; case "SEAVIEW": publicRequests[i].ZipCode = 98116; break; case "SOUTH DELRIDGE": publicRequests[i].ZipCode = 98106; break; case "SUNSET HILL": publicRequests[i].ZipCode = 98117; break; case "VICTORY HEIGHTS": publicRequests[i].ZipCode = 98125; break; case "VIEW RIDGE": publicRequests[i].ZipCode = 98115; break; case "WEDGWOOD": publicRequests[i].ZipCode = 98115; break; case "WEST QUEEN ANNE": publicRequests[i].ZipCode = 98119; break; case "WEST WOODLAND": publicRequests[i].ZipCode = 98103; break; case "WESTLAKE": publicRequests[i].ZipCode = 98109; break; case "YESLER TERRACE": publicRequests[i].ZipCode = 98122; break; default: publicRequests[i].ZipCode = null; break; } } return publicRequests; }38:[{"id":"d153e2d4ff99e54f7918572e7b67f81304369dd31e4ae6d3e02f56a9531cc1a66083d56f7cbd48d1c2aa5194c5aca47d9f9084daa564d74ea04a70460d85a730","href":"https://static.observableusercontent.com/files/d153e2d4ff99e54f7918572e7b67f81304369dd31e4ae6d3e02f56a9531cc1a66083d56f7cbd48d1c2aa5194c5aca47d9f9084daa564d74ea04a70460d85a730","name":"seattle-pet-licenses-cleaned.csv","type":"text/csv","lastModified":1619725912100.99,"size":2458928},{"id":"d99033bb924e12a4bce135266a3a164f9f4886ce09fb2d68a3a69efcf568ad8bb33604ba0b54c2734019a33ef30bbea8342a93b24b882b95010c5f1047e6b6ab","href":"https://static.observableusercontent.com/files/d99033bb924e12a4bce135266a3a164f9f4886ce09fb2d68a3a69efcf568ad8bb33604ba0b54c2734019a33ef30bbea8342a93b24b882b95010c5f1047e6b6ab","name":"csr-public-requests-filtered.csv","type":"text/csv","lastModified":1619881437968.604,"size":14113665},{"id":"af98799b1c418d7cd4235fe108f5b1648b252964c841b1b364c645f0675b083cc662437d903105acd9cce30c3528776a9ac7183322a9a590dd46d3cfec1a8e09","href":"https://static.observableusercontent.com/files/af98799b1c418d7cd4235fe108f5b1648b252964c841b1b364c645f0675b083cc662437d903105acd9cce30c3528776a9ac7183322a9a590dd46d3cfec1a8e09","name":"sdp_crimestats_aggregate.csv","type":"text/csv","lastModified":1619966570990.506,"size":665051},{"id":"14122f0e7ba9a2f0c489377a46c472e9c1a8e8e504f50786eba65ce44f05545e819114cd62d83cd4148076a9b1fc68f938f2872c822df64e6c8fd7b426833724","href":"https://static.observableusercontent.com/files/14122f0e7ba9a2f0c489377a46c472e9c1a8e8e504f50786eba65ce44f05545e819114cd62d83cd4148076a9b1fc68f938f2872c822df64e6c8fd7b426833724","name":"seattle-zip-codes.geojson","type":"application/geo+json","lastModified":1620050857489.292,"size":49044},{"id":"5a554dccbcf4e984626a217da5e097e13088cebc796ad3c689c25e426a6ea19eb9e8775a2f1089db72aa4bc663acd5239c9d0f632e305d9b3bf7274c8c8f4cb9","href":"https://static.observableusercontent.com/files/5a554dccbcf4e984626a217da5e097e13088cebc796ad3c689c25e426a6ea19eb9e8775a2f1089db72aa4bc663acd5239c9d0f632e305d9b3bf7274c8c8f4cb9","name":"seattle_tiles_detailed.json","type":"application/json","lastModified":1620159959606.969,"size":13150621},{"id":"0367250c347ef681dee358d94b5588cf57721b5a0f17e9a6325660ab36b36f65e84845c7d3defab84c981b38452408ebdd1cae110cf75986415cece5e44f94b7","href":"https://static.observableusercontent.com/files/0367250c347ef681dee358d94b5588cf57721b5a0f17e9a6325660ab36b36f65e84845c7d3defab84c981b38452408ebdd1cae110cf75986415cece5e44f94b7","name":"zillow-home-value-index-wa.csv","type":"text/csv","lastModified":1619724276953.846,"size":1047767},{"id":"79033edd2ab56365a2a34142db7bf97b50c35ed572232daa20354071a9c790cefa262b147abd6704fa38007758744f0c9a4aca74175f8321a12fe391ec835a4e","href":"https://static.observableusercontent.com/files/79033edd2ab56365a2a34142db7bf97b50c35ed572232daa20354071a9c790cefa262b147abd6704fa38007758744f0c9a4aca74175f8321a12fe391ec835a4e","name":"zillow-observed-rent-index-wa.csv","type":"text/csv","lastModified":1619724273503.86,"size":33759}] 2f:{"title":"How has life changed in Seattle since the pandemic began?","cells":[{"id":2495,"value":"md `# How has life changed in Seattle since the pandemic began?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2995,"value":"html `

By Tianran Li, Raymond Fok and Nic Dobbins

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3065,"value":"md`**Motivation of Development**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3068,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3072,"value":"md`**Interactive Visualization Interface**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2522,"value":"md `View a Seattle Zip Code's monthly data by hovering over the map, click to select it, or view all aggregate Seattle monthly data by default.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2547,"value":"md `The sparklines over each Zip Code on the map indicates change from January 2019 to December 2020. Red indicates a decrease in the Zip Code region, green indicates an increase, and blue indicates no change.\nSelecting a specific measure in the dropdown updates the sparklines to show that measure over the map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1898,"value":"viewof selectedMeasure = Select(measures, { \n label: \"Select a Measure\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2554,"value":"html `Sources:\n

https://data.seattle.gov/Public-Safety/SPD-Crime-Data-2008-Present/tazs-3rd5

https://www.kaggle.com/city-of-seattle/seattle-csr-public-requests

https://www.kaggle.com/aaronschlegel/seattle-pet-licenses

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2007,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"md `## Dimension & Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2629,"value":"margin = ({top: 0, bottom: 100, left: 40, right: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1175,"value":"color = d3.scaleLinear()\n .domain(d3.extent(\n dataPrePost\n .params({ selectedMeasure })\n .filter((d, $) => d.Measure === $.selectedMeasure)\n .select('PreCovidMean')\n .objects()\n , d => Math.round(d.PreCovidMean)))\n .unknown('#eee')\n .range(['white','#69b3a2'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1023,"value":"rows = measures.length;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"cols = rows >= 6 ? 2 : 1;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"row = d3.scaleBand()\n .domain(d3.range(rows))\n .range([0, height])\n .paddingInner(0.4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"col = d3.scaleBand()\n .domain(d3.range(cols))\n .range([0, width / 2 - 50])\n .paddingInner(0.3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"x = d3.scaleTime()\n .domain([startDate, endDate])\n .range([0, col.bandwidth()])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1611,"value":"zip2Measure2Scale = Object.fromEntries(zipCodes.map(zip => {\n const zipData = dataByMonthFinal\n .params({ zip })\n .filter((d, $) => d.ZipCode === $.zip)\n .filter((d, $) => d.Month >= $.startDate)\n .filter((d, $) => d.Month <= $.endDate);\n \n return [ zip, Object.fromEntries(measures.map(m => {\n const maxRate = zipData\n .params({ m })\n .filter((d, $) => d.Measure === $.m)\n .rollup({ m: d => op.max(d.Value) })\n .objects()[0].m * 1.2;\n \n const y = d3.scaleLinear()\n .domain([0, maxRate])\n .range([row.bandwidth(), 0]);\n \n const line = d3.line()\n .x(d => x(d.Month))\n .y(d => y(d.Value));\n \n const area = d3.area()\n .x(d => x(d.Month))\n .y1(d => y(d.Value))\n .y0(d => y(0));\n \n return [ m, { y, area, line }];\n })) ];\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1276,"value":"md `## Params`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1472,"value":"startYear = 2019","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"startDate = new Date(`${startYear}-01-01`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"endDate = new Date('2020-12-31')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1889,"value":"numMeasuresToShow = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"measures = dataByMonth.groupby('Measure').count() \n .orderby(aq.desc('count'))\n .objects()\n .slice(0, numMeasuresToShow)\n .map(m => m.Measure)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1573,"value":"zipCodes = [ 'All' ].concat(seattleZipCodesGeo.features.map(z => z.properties.GEOID10))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"md `## Small Multiples / Sparkline data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1570,"value":"dataMonthlyByZipAndMeasure = { \n return Object.fromEntries(zipCodes.map(zip => {\n const zipData = dataByMonthFinal\n .params({ zip })\n .filter((d, $) => d.ZipCode === $.zip)\n .filter((d, $) => d.Month >= $.startDate)\n .filter((d, $) => d.Month <= $.endDate)\n .orderby('Measure','Month')\n .objects();\n const monthly = zipData.filter((d) => measures.includes(d.Measure));\n const grid = d3.cross(d3.range(rows), d3.range(cols), (row, col) => ({ row, col }));\n const nested = d3.nest().key(d => d.Measure).entries(monthly);\n const measWithData = Object.fromEntries(nested.map(n => [ n.key, n ]));\n const allMeasuresNested = measures.map(m => {\n if (m in measWithData) { return measWithData[m] };\n return { key: m, values: [] };\n });\n const data = d3.zip(allMeasuresNested, grid).map(([ { key, values }, { row, col } ]) => (\n { key, values, row, col }\n ));\n return [ zip, data ];\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1655,"value":"md `## Map data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1658,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"md `# Data Preview`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"md `Here's what cleaned, combined data for a given month for a given zip code look like:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"dataByMonthFinal\n .filter(d => op.timestamp(d.Month) === op.timestamp(op.parse_date('2020-01-01')))\n .filter(d => d.ZipCode === \"98105\")\n .orderby('Measure')\n .view(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"md `And aggregated pre/post COVID (pre = Jan2019-Mar2020, post = Mar2020-present) using the same data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"dataPrePost.orderby('ZipCode').view(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"md `# Data Cleanup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md `## Final Aggregation and Combine`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1166,"value":"dataByMonthFinal = dataByMonth\n .params({ zipCodes, measures, startDate, endDate })\n .orderby('ZipCode','Measure','Month')\n\n // Union non-median measures (and sum them)\n .union(dataByMonth\n .filter(d => !op.startswith(d.Measure, 'Median'))\n .filter(d => d.Value > 0.0)\n .groupby('DataSource','Measure','Month')\n .rollup({ Value: d => op.sum(d.Value), ZipCode: d => 'All' })\n .select('DataSource', 'Measure', 'Month', 'ZipCode', 'Value'))\n\n // Union median measures (and take median of medians)\n .union(dataByMonth\n .filter(d => op.startswith(d.Measure, 'Median'))\n .filter(d => d.Value > 0.0)\n .filter((d, $) => op.includes($.zipCodes, d.ZipCode))\n .groupby('DataSource','Measure','Month')\n .rollup({ Value: d => op.median(d.Value), ZipCode: d => 'All' })\n .select('DataSource', 'Measure', 'Month', 'ZipCode', 'Value'))\n .derive({ Value: d => op.parse_int(d.Value) })","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"dataPrePost = {\n const prepost = dataByMonthFinal\n .derive({ \n Period: d => d.Month < op.parse_date('2020-03-01') ? 'PreCovid' : 'PostCovid',\n CompositeKey: d => d.DataSource + '_' + d.Measure + '_' + d.ZipCode\n })\n .groupby('DataSource', 'Measure', 'ZipCode', 'Period', 'CompositeKey')\n .rollup({ \n Sum: d => op.sum(d.Value),\n Mean: d => op.mean(d.Value)\n });\n\n const pre = prepost.filter(d => d.Period === 'PreCovid');\n const post = prepost.filter(d => d.Period === 'PostCovid');\n\n return pre\n .join(post, 'CompositeKey')\n .select({ \n DataSource_1: 'DataSource', Measure_1: 'Measure', ZipCode_1: 'ZipCode', \n Sum_1: 'PreCovidSum', Sum_2: 'PostCovidSum', Mean_1: 'PreCovidMean', Mean_2: 'PostCovidMean', \n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md `## Add zipcodes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"md `## Aggregate Individual Datasets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"petLicensesAgg = aq.from(petLicenses)\n .derive({ \n Date: d => op.parse_date(op.substring(d.LicenseIssueDate,0,7))\n })\n .filter(d => d.ZipCode !== '')\n .groupby('ZipCode','Date')\n .count()\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"spdCrimeAgg = aq.from(spdCrime)\n .derive({ \n Date: d => op.parse_date(d.Year + '-' + d.Month)\n })\n .filter(d => d.ZipCode !== null)\n .groupby('ZipCode','OffenseType','Date')\n .count()\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"publicRequestsAgg = aq.from(publicRequests)\n .derive({ \n Date: d => op.parse_date(op.substring(d['Submitted Date'],0,7))\n })\n .filter(d => d.ZipCode !== null)\n .groupby('ZipCode','Request Type','Date')\n .count()\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"zillowHomesPivot = aq.from(zillowHomes)\n .fold(aq.not('ZipCode','State','City','Metro','CountyName'), { as: ['DateStr', 'Value'] })\n .derive({ Date: d => op.parse_date(op.substring(d.DateStr, 0, 7)) })\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"zillowRentPivot = aq.from(zillowRent)\n .fold(aq.not('ZipCode','MsaName'), { as: ['DateStr', 'Value'] })\n .derive({ Date: d => op.parse_date(d.DateStr) })\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"md `# Raw Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"spdCrime = FileAttachment(\"sdp_crimestats_aggregate.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"aq.from(spdCrime).view(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"publicRequests = FileAttachment(\"csr-public-requests-filtered.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"aq.from(publicRequests).view(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"petLicenses = FileAttachment(\"seattle-pet-licenses-cleaned.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"aq.from(petLicenses).view(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"zillowHomes = FileAttachment(\"zillow-home-value-index-wa.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"aq.from(zillowHomes).view(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"zillowRent = FileAttachment(\"zillow-observed-rent-index-wa.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"aq.from(zillowRent).view(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"seattleZipCodesGeo = FileAttachment(\"seattle-zip-codes.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"md `# Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"import {aq, op} from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"d3 = require('d3@5', 'd3-array@2', 'd3-regression@1', 'd3-tile@1', 'd3-axis' /*\"d3-geo@1\",\"d3-contour@1\", \"d3-scale-chromatic@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\", \"d3-scale@1\", \"d3-time-format@1\", \"d3-array@1\", \"d3-format@1\", \"d3-transition@1\", \"d3-ease@1\", \"d3-collection@1\", \"d3-shape@1\", \"d3-axis@1\", 'd3-array@2', 'd3-regression@1', \"d3-scale-sequential@1\" */)","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"import {\n number,\n input,\n text,\n slider,\n select,\n coordinates,\n checkbox\n} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2491,"value":"import {Checkbox,Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2623,"value":"import { inputsGroup } from '@bumbeishvili/input-groups'","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"md `# D3 prep`","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"tilesFromFile = FileAttachment(\"seattle_tiles_detailed.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"projection = d3.geoMercator()\n //.center([-122.339489, 47.6181435]) // Seattle\n //.center([-122.20267189, 47.6251974]) // Bellevue\n .scale((400000) / (2 * Math.PI))\n .translate([width / 2, height / 2])\n .fitExtent([[0, 0], [width - 0, 500 - 0]], dataGeoWithMeasures);","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}