25:["$","title",null,{"children":"Visualization Project - Part 2 | Jenah's Workspace | Observable"}] 49:T4ed,{ const scatter = brushableScatterplot(); const bar = barChart(); const histo_acres = filteredHisto("Park Size in Acres", "Parks Sizes (in Acres)"); const histo_value = filteredHisto("Current Total Value", "Home Values"); const norfMap = chart; const banner = await FileAttachment("banner.png").image(); // update the bar chart and histograms when the selection changes d3.select(scatter).on('input', () => { bar.update(scatter.value); histo_acres.update(scatter.value); histo_value.update(scatter.value); }); // intial state of bar chart and histograms bar.update(scatter.value); histo_acres.update(scatter.value); histo_value.update(scatter.value); // build HTML table to place charts in let table = html`

${banner}
${scatter} Random sample of 2000 Norfolk single-family homes' values and distances to the nearest park	${norfMap} Norfolk map: Median home values by district with park locations
${bar}	${histo_acres} ${histo_value}

`; return table; } 4a:T663,function baseHisto(col, data) { // Setup const totalWidth = 600; const totalHeight = 400; const margin = {top: 20, right: 30, bottom: 30, left: 40}; const histoWidth = totalWidth - margin.left - margin.right; const histoHeight = totalHeight - margin.top - margin.bottom; const svg = d3.create("svg") .attr("width", totalWidth) .attr("height", totalHeight); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Ensure the data is numeric data = data.map(d => { d[col] = +d[col]; return d; }); // Define scales const x = d3.scaleLinear() .domain(d3.extent(data, d => d[col])) .range([0, histoWidth]) .nice(); // Calculate number of bins const numBins = 20; const binWidth = (x.domain()[1] - x.domain()[0]) / numBins; const histogram = d3.bin() .value(d => d[col]) .domain(x.domain()) .thresholds(d3.range(x.domain()[0], x.domain()[1], binWidth)); const bins = histogram(data); const y = d3.scaleLinear() .domain([0, d3.max(bins, d => d.length)]) .range([histoHeight, 0]) .nice(); // Add axes g.append("g") .attr("transform", `translate(0,${histoHeight})`) .call(d3.axisBottom(x)); g.append("g") .call(d3.axisLeft(y)); // Draw bars g.selectAll("rect") .data(bins) .join("rect") .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => y(d.length)) .attr("height", d => histoHeight - y(d.length)) .attr("fill", "steelblue"); return svg.node(); } 4b:Tcb0,// pass in the column name to create the histogram function filteredHisto(col, title) { // set up const num_hist = 5; const totalHeight = (scatter_sq + barchartHeight)/num_hist; const totalWidth = scatter_sq; const margin = ({top: 10, right: 10, bottom: 50, left: 150}) const histoWidth = totalWidth - margin.right - margin.left; const histoHeight = totalHeight - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', totalWidth) .attr('height', totalHeight); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // create x scale const x = d3.scaleLinear() .range([0, histoWidth]) .domain(d3.extent(housesParks, d => d[col])).nice(); // https://www.d3-graph-gallery.com/graph/histogram_basic.html // https://observablehq.com/@d3/d3-bin const histogram = d3.bin() .value(d => d[col]) // specify the values used for the histogram .domain(x.domain()); // domain is same as x-axis const bins = histogram(housesParks); // create y scale const y = d3.scaleLinear() .range([histoHeight, 0]) .domain([0, d3.max(bins, d => d.length)]).nice(); // need to know bins first // create and add axes const xAxis = d3.axisBottom(x) if (col === "Current Total Value") { xAxis.tickFormat(d => d >= 1e6 ? `${d / 1e6}M` : d >= 1e3 ? `${d / 1e3}K` : d ); } const xAxisGroup = g.append("g") .attr("transform", `translate(0, ${histoHeight})`); xAxisGroup.append("text") .attr("x", 0) .attr("y", margin.bottom * 0.65) .attr("fill", "black") .attr("font-weight", "bold") .attr("text-anchor", "start") .text(title); xAxisGroup.call(xAxis); const yAxis = d3.axisLeft(y).ticks(3); const yAxisGroup = g.append("g").call(yAxis) // add grid lines .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('x1', 0) .attr('x2', histoWidth)) // NEW: draw background gray bars g.append("g").selectAll("rect") .data(bins) .join("rect") .attr("fill", "lightgray") .attr("x", d => x(d.x0) + 1) .attr("width", d => x(d.x1) - x(d.x0)-1) .attr("y", d => y(d.length)) .attr("height", d => histoHeight - y(d.length)); let barsGroup = g.append("g"); // NEW: added update() that updates bins and redraws bars function update(data) { // update bins const histogram = d3.bin() .value(d => d[col]) // specify the values used for the histogram .domain(x.domain()); // domain is same as x-axis const bins = histogram(data); // setup transition const t = svg.transition() .ease(d3.easeLinear) // easing examples at https://observablehq.com/@d3/easing-animations .duration(200); // draw bars barsGroup.selectAll("rect") .data(bins) .join("rect") .attr("fill", "#B7B5E4") .attr("x", d => x(d.x0) + 1) .attr("width", d => x(d.x1) - x(d.x0) - 1) .transition(t) .attr("y", d => y(d.length)) .attr("height", d => histoHeight - y(d.length)); } return Object.assign(svg.node(), { update }); }4c:T9e1,function barChart() { // set up const totalWidth = scatter_sq; const totalHeight = scatter_sq-300; const margin = ({top: 70, right: 30, bottom: 50, left: 150}) const barWidth = totalWidth - margin.left - margin.right; const barHeight = totalHeight - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', totalWidth) .attr('height', totalHeight); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // create scales const x = d3.scaleLinear() .range([0, barWidth]) .domain([0, d3.max(parkTypeCounts.values())]).nice(); // keep scale the same const y = d3.scaleBand() .domain(parkTypes) .range([0, barHeight]) .padding(0.2); // create and add axes const xAxis = d3.axisBottom(x); const xAxisGroup = g.append("g") .attr("transform", `translate(0, ${barHeight})`); // draw grid lines xAxisGroup.call(xAxis) .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('y1', -barHeight) .attr('y2', 0)); xAxisGroup.append("text") .attr("x", barWidth/2) .attr("y", margin.bottom * 0.75) .attr("fill", "black") .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Count"); const yAxis = d3.axisLeft(y); const yAxisGroup = g.append("g").call(yAxis); yAxisGroup.append("text") .attr("transform", "rotate(-90)") // now x, y flipped in terms of positioning .attr("x", -barHeight / 2) .attr("y", -margin.left * 0.9) .attr("fill", "black") .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Park Type"); let barsGroup = g.append("g"); function update(data) { const parkTypeCounts = d3.rollup( data, group => group.length, d => d['Park Type'] ); // update bars const t = svg.transition() .ease(d3.easeLinear) .duration(200); // draw bars barsGroup.selectAll("rect") .data(parkTypeCounts, ([parkType, count]) => parkType) .join("rect") .attr("fill", ([parkType, count]) => houseColor(parkType)) .attr("height", y.bandwidth()) .attr("x", 0) .attr("y", ([parkType, count]) => y(parkType)) .transition(t) .attr("width", ([parkType, count]) => x(count)) } return Object.assign(svg.node(), { update }); }4d:Tfa6,function brushableScatterplot() { // set up const totalWidth = scatter_sq, totalHeight = scatter_sq; const margin = ({top: 10, right: 10, bottom:50, left: 80}) const visWidth = totalWidth - margin.left - margin.right; const visHeight = totalHeight - margin.top - margin.bottom; // set up const xCol = "Distance to Nearest Park", xLabel = "Distance to Nearest Park (in miles)"; const yCol = "Current Total Value", yLabel = "Home Value"; // the value for when there is no brush const initialValue = housesParks; const svg = d3.create('svg') .attr('width', totalWidth) .attr('height', totalHeight) .property('value', initialValue); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // set up scales const x = d3.scaleLinear() .domain([0, d3.max(housesParks, d => d[xCol])]).nice() .range([0, visWidth]); const y = d3.scaleLinear() .domain([0, d3.max(housesParks, d => d[yCol])]).nice() .range([visHeight, 0]); // set up axes const xAxis = d3.axisBottom(x); const xAxisGroup = g.append('g') .attr('transform', `translate(0, ${visHeight})`); xAxisGroup.call(xAxis) // add grid lines // references https://observablehq.com/@d3/connected-scatterplot .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('y1', -visHeight) .attr('y2', 0)) // add label .append('text') .attr('x', visWidth / 2) .attr('y', margin.bottom * 0.75) .attr('fill', 'black') .attr('text-anchor', 'middle') .attr('font-weight', 'bold') .text(xLabel); const yAxis = d3.axisLeft(y); const yAxisGroup = g.append('g'); // add grid lines // refernces https://observablehq.com/@d3/connected-scatterplot yAxisGroup.call(yAxis) .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('x1', 0) .attr('x2', visWidth)) // add label .append('text') .attr("transform", "rotate(-90)") // now x, y flipped in terms of positioning .attr("x", -visHeight / 2) .attr("y", -margin.left * 0.75) .attr('fill', 'black') .attr('dominant-baseline', 'middle') .attr('font-weight', 'bold') .text(yLabel); // draw points const radius = 3; const dots = g.selectAll('circle') .data(housesParks) .join('circle') .attr('cx', d => x(d[xCol])) .attr('cy', d => y(d[yCol])) .attr('r', radius) // make dots look like Vega-Lite dots .attr('opacity', 0.8) .attr('stroke', d => houseColor(d['Park Type'])) .attr('fill', 'none') .attr('stroke-width', 2); // ********** new stuff starts here ********** const brush = d3.brush() // set the space that the brush can take up .extent([[0, 0], [visWidth, visHeight]]) // handle events .on('brush', onBrush) .on('end', onEnd); g.append('g') .call(brush); function onBrush(event) { // event.selection gives us the coordinates of the // top left and bottom right of the brush box const [[x1, y1], [x2, y2]] = event.selection; // return true if the dot is in the brush box, false otherwise function isBrushed(d) { const cx = x(d[xCol]); const cy = y(d[yCol]) return cx >= x1 && cx <= x2 && cy >= y1 && cy <= y2; } // style the dots dots.attr('stroke', d => isBrushed(d) ? houseColor(d['Park Type']) : 'gray'); // update the data that appears in the cars variable svg.property('value', housesParksData.filter(isBrushed)).dispatch('input'); } function onEnd(event) { // if the brush is cleared if (event.selection === null) { // reset the color of all of the dots dots.attr('stroke', d => houseColor(d['Park Type'])); svg.property('value', initialValue).dispatch('input'); } } return svg.node(); }4e:Taff,chart = { const width = 750; const height = 560; const root = d3.create("div") .attr("class", "root"); const svg = root.append("svg") .attr("viewBox", [0, -20, width, height]); const g = svg.append("g"); const norfProjection = d3.geoAlbers() .scale(184000) .rotate([76.225,0]) .center([0, 36.898]) .translate([width / 2, height / 2]); const tooltip = root.append("div") .attr("class", "tooltip"); const norf_geoPath = d3.geoPath() .projection(norfProjection); const legendDisplay = legend({color: colorScale, title: "Median Home Value (Single-Family Homes)", width: 200}); svg.append(() => legendDisplay) .attr("transform", "translate(20, 40)"); // Draw the districts const districtPaths = g.append("g").selectAll("path") .data(norfolk.features) .join("path") // .attr("fill", d => color(districtToMedianMap.get(String(d.properties.DISTRICT_NO)))) .attr("fill", d => { const medianValue = districtToMedianMap.get(String(d.properties.DISTRICT_NO)); return medianValue == null ? "none" : color(medianValue); }) .attr("d", norf_geoPath) .attr("stroke", "grey") .attr("stroke-width", 0.75) .on('mouseover', function(event, d) { d3.select(this) .attr("stroke", "black") .attr("stroke-width", 2); tooltip .html(`District: ${toTitleCase(d.properties.TEXT)}
Median Home Value: ${districtToMedianMap.get(String(d.properties.DISTRICT_NO))}
Number of Parks: ${districtToNumParkMap.get(String(d.properties.DISTRICT_NO))}`) .style('display', 'block') .style('left', `${event.pageX + 10}px`) .style('top', `${event.pageY - 10}px`); }) .on('mouseout', function() { d3.select(this) .attr("stroke", "grey") .attr("stroke-width", 0.75); tooltip.style('display', 'none'); }); // Draw the parks const parksPoints = g.append("g").selectAll("circle") .data(parks) .join("circle") .attr("cx", d => norfProjection([d.Longitude, d.Latitude])[0]) .attr("cy", d => norfProjection([d.Longitude, d.Latitude])[1]) .attr("r", 5) .attr("fill", "#5F9EA0") .attr("stroke", "white") .attr("stroke-width", 1) .on('mouseover', function(event, d) { d3.select(this) .attr("stroke", "black") .attr("stroke-width", 2) .raise(); tooltip .html(`Park: ${d['Park Name']}
Park Size in Acres: ${d['Acres (ERT in miles)']}`) .style('display', 'block') .style('left', `${event.pageX + 10}px`) .style('top', `${event.pageY - 10}px`); }) .on('mouseout', function() { d3.select(this) .attr("stroke", "white") .attr("stroke-width", 0.5); tooltip.style('display', 'none'); }); return root.node(); } 4f:[{"id":"d83809b2b85d9340bb45a51052f9432feb68bab41bbbc3588cc595c6b403656f6a67a208a74cbf6f65bb9c23bf7f95754058253acac6627acf55c551aec0a9e7","href":"https://static.observableusercontent.com/files/d83809b2b85d9340bb45a51052f9432feb68bab41bbbc3588cc595c6b403656f6a67a208a74cbf6f65bb9c23bf7f95754058253acac6627acf55c551aec0a9e7","name":"parks_data.csv","type":"text/csv","lastModified":1713034382129.264,"size":24726},{"id":"858877c278d476ea7f1868bd115654c9abba37b6f79d6cfb6453ff0a29e41757fe58253af753459143ddf01a048035a074a2d41e58cb1a24079b7291bd760b78","href":"https://static.observableusercontent.com/files/858877c278d476ea7f1868bd115654c9abba37b6f79d6cfb6453ff0a29e41757fe58253af753459143ddf01a048035a074a2d41e58cb1a24079b7291bd760b78","name":"banner.png","type":"image/png","lastModified":1713113819828,"size":35511},{"id":"5bad04562f0b30b55756c81f5da61cb2eee6672f846c428d51e354b98c1f462e38eda6a2c6411fb451a0be611b9b14d7414c1ef19222f46a6188178c2f5b20b4","href":"https://static.observableusercontent.com/files/5bad04562f0b30b55756c81f5da61cb2eee6672f846c428d51e354b98c1f462e38eda6a2c6411fb451a0be611b9b14d7414c1ef19222f46a6188178c2f5b20b4","name":"district_summary.csv","type":"text/csv","lastModified":1713057120302.773,"size":4260},{"id":"64d91011bb04fdaef0aef79a32aa29c5f24c9751f8a24ec7562c488e1cfe1490243de845bec4ecc057c71e88273947fa078769d3917c4c66313215e777e19c70","href":"https://static.observableusercontent.com/files/64d91011bb04fdaef0aef79a32aa29c5f24c9751f8a24ec7562c488e1cfe1490243de845bec4ecc057c71e88273947fa078769d3917c4c66313215e777e19c70","name":"houses_parks_random_sample_n2000.csv","type":"text/csv","lastModified":1713031777412.861,"size":809618},{"id":"2fcf435230c481633583856ccf979c77ef9ea4fd530f32aac805e6f8e1cd69a898e7eb979d2dfec9564d4f60a9f446f37a843d5a4dce6ef1717cf655fd0c2c70","href":"https://static.observableusercontent.com/files/2fcf435230c481633583856ccf979c77ef9ea4fd530f32aac805e6f8e1cd69a898e7eb979d2dfec9564d4f60a9f446f37a843d5a4dce6ef1717cf655fd0c2c70","name":"Planning_District.geojson","type":"application/geo+json","lastModified":1712959024795.627,"size":690789}] 29:{"id":"e1b4b5364864c9fe","slug":null,"title":"Visualization Project - Part 2","thumbnail":"9157576683bca0753c19b93f39d284ad25e93959800fdaacdd38fb7dba5bda6a","access_level":"public","create_time":"$D2024-04-12T00:46:23.393Z","update_time":"$D2024-04-15T13:19:48.637Z","view_time":null,"first_public_time":"$D2025-08-26T12:50:54.287Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"881e7ae16bb0b5e6","login":"jenah-ws","name":"Jenah's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/06a52d8c3283ce9fa38cfce0d9996df0a96bb51b71a8cf3ae69963295bc0d87d","tier":"starter_2024","bio":"","following":false},"version":1052,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8ffaae3dd889105e","login":"jenah","name":"Jenah","avatar_url":"https://avatars-next.observableusercontent.com/4e2b0fe39e47ab5d7068446fb7f7efed9bfd0907436a264dbbd8001bab454e55","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"8ffaae3dd889105e","login":"jenah","name":"Jenah","avatar_url":"https://avatars-next.observableusercontent.com/4e2b0fe39e47ab5d7068446fb7f7efed9bfd0907436a264dbbd8001bab454e55","tier":null,"role":"editor"},{"type":"team","id":"881e7ae16bb0b5e6","login":"jenah-ws","name":"Jenah's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/06a52d8c3283ce9fa38cfce0d9996df0a96bb51b71a8cf3ae69963295bc0d87d","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualization Project - Part 2","cells":[{"id":0,"value":"# Visualization Project - Part 2\nJenah Parman
\nCS 725, Spring 2024
\nDue: April 15, 2024","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":987,"value":"## Dashboard","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1044,"value":"## Report\nhttps://observablehq.com/d/aabc8b708d274ad0","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"housesParksData = FileAttachment(\"houses_parks_random_sample_n2000.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"housesParks = housesParksData.filter(d => d['Current Total Value'] != null).filter(d => d['Park Size in Acres'] != null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"parkTypeCounts = d3.rollup(housesParks, group => group.length, d => d['Park Type']);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"parkTypes = Array.from(parkTypeCounts.keys()).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"parks = FileAttachment(\"parks_data.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"function reverseNode(city) {\n var reversedArr = []; \n \n city.features.forEach(function(feature) {\n if (feature.geometry.type == \"MultiPolygon\") {\n feature.geometry.coordinates.forEach(function(polygon) {\n // console.log(polygon[0]);\n reversedArr = []; \n for (let i = 0; i < polygon[0].length; i++) {\n reversedArr[polygon[0].length-1-i] = polygon[0][i];\n }\n polygon[0] = reversedArr;\n // console.log('reversed: ', reversedArr);\n })\n }\n })\n return city;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"### Charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":428,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"### Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":529,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"function getDistrictTooltipContent(d) {\n return `District: ${d.properties.NAME}
\n Median Home Value: $${d.properties.medianHomeValue.toLocaleString()}
\n Number of Parks: ${d.properties.numParks}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"function getParkTooltipContent(d) {\n return `Park: ${d.name}
\n Location: (${d.coordinates[0]}, ${d.coordinates[1]})`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"Array.from(districtToMedianMap.entries())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"extent = d3.extent(norfolk.features, d => districtToMedianMap.get(String(d.properties.DISTRICT_NO)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"function resized(width, root, svg) {\n let measuredWidth = root.node().getBoundingClientRect().width;\n if (measuredWidth == 0) {\n setTimeout(() => resized(width, root, svg), 12);\n return;\n }\n let scale = width / measuredWidth;\n svg.selectAll(\"line\").attr(\"stroke-width\", scale + \"px\");\n svg.selectAll(\"text\").attr(\"transform\", \"scale(\" + scale + \" \" + scale + \")\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"colorScale = d3.scaleSequential([extent[0], extent[1]], d3.interpolateGreens)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"d3.range(extent[0], extent[1], (extent[1] - extent[0]) / 10).map(colorScale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"districtToMedianMap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"norfolk.features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"norfolk.features.map(d => d.properties.DISTRICT_NO)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"### Definitions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":347,"value":"color = v => scale(v)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"scale = d3.scaleSequential(d3.interpolateGreens).domain(extent)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"data = (await FileAttachment(\"district_summary.csv\").csv()).map((d) => (d.Median = +d.Median, d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"districtToMedianMap = new Map();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"data.forEach(obj => {\n districtToMedianMap.set(obj.Planning_District_Number, obj.Median);\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"districtToNumParkMap = new Map();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"data.forEach(obj => {\n districtToNumParkMap.set(obj.Planning_District_Number, obj.Num_Parks);\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"districtNumbers = norfolk.features.flatMap(feature => {\n return feature.properties.DISTRICT_NO;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"norfolk = FileAttachment(\"Planning_District.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"scatter_sq = width * 0.50;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"barchartHeight = 200; // set as global so can use for histogram height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"customColors = ['#E83F6F', '#FFBF00', '#2374A5', '#49C195']; ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"houseColor = d3.scaleOrdinal()\n .domain(parkTypes)\n .range(customColors);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"function toTitleCase(str) {\n return str.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"import {visualizeTicks} from \"@d3/continuous-scales\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null