2b:null 2c:["$","title",null,{"children":"FINAL PROJECT by Vikramaditya | NIU ReDAV | Observable"}] 31:T14f1,NewOrleans = { const projection = d3.geoMercator().fitSize([1000, 800], newOrleans); const path = d3.geoPath().projection(projection); const barScale = d3.scaleLinear() .domain([0, d3.max(data3, d => Math.max(d.medianIncome, d.impact))]) .range([0, 50]); //color scale for positive values const colorScalePositive = d3.scaleSequential(d3.interpolateBlues) .domain([0, d3.max(data3, d => Math.max(0, d.PersonalFunds))]); //color scale for Final Impact(negative values) const maxNegativeValue = d3.min(data3, d => Math.min(d.PersonalFunds, 0)); const colorScaleNegative = d3.scaleSequential((t) => d3.interpolateReds(1 - t)) .domain([maxNegativeValue, 0]); //svg container const svg = d3.create("svg") .attr("viewBox", [0, 0, 1000, 800]) .style("width", "100%") .style("height", "auto"); svg.append("text") .attr("x", 200) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "24px") .style("font-weight", "bold") .text("New Orleans Neighborhoods"); svg.append("text") .attr("x", 200) .attr("y", 60) .attr("text-anchor", "middle") .style("font-size", "24px") .style("font-weight", "bold") .style("fill", "gray") .text("Financial Impact"); const neighborhoods = svg.selectAll(".neighborhood") .data(newOrleans.features) .join("path") .attr("class", "neighborhood") .attr("d", path) .attr("fill", d => { const dataEntry = data3.find(p => p.neighborhood === d.properties.name); return dataEntry ? (dataEntry.PersonalFunds >= 0 ? colorScalePositive(dataEntry.PersonalFunds) : colorScaleNegative(dataEntry.PersonalFunds)) : "#ddd"; }) .attr("stroke", "black"); neighborhoods.append("title") .text(d => { const dataEntry = data3.find(p => p.neighborhood === d.properties.name); return `${d.properties.name}: ${dataEntry ? dataEntry.PersonalFunds.toFixed(2) : ''}`; }); //to place grouped bars on centroid of the map const groups = svg.selectAll(".neighborhood-group") .data(data3) .join("g") .attr("class", "neighborhood-group") .attr("transform", d => { const centroid = path.centroid(d.feature); return `translate(${centroid[0]},${centroid[1]})`; }); groups.selectAll("rect") .data(d => [d.medianIncome, d.impact]) .join("rect") .attr("x", (d, i) => i * 5) .attr("y", d => -barScale(Math.abs(d))) .attr("width", 5) .attr("height", d => barScale(Math.abs(d))) .attr("fill", (d, i) => d >= 0 ? (i === 0 ? "green" : "red") : "orange") .attr("stroke", "black") .append("title") .text((d, i) => { if (d < 0) { return `Duplicate Funds: $${Math.abs(d)}`; } else { return i === 0 ? `Median Income: $${d}` : `PersonalFundsSpent: $${d}`; } }); // Legend and text for Positive Funds const positiveLegend = svg.append("g") .attr("transform", "translate(700, 700)"); positiveLegend.append("text") .attr("x", 0) .attr("y", -10) .style("font-size", "12px") .text("Damage Covered(Income-FundsSpent)"); const positiveLegendData = d3.range(0, d3.max(data3, d => Math.max(0, d.PersonalFunds)), d3.max(data3, d => Math.max(0, d.PersonalFunds)) / 9); positiveLegendData.forEach((value, i) => { positiveLegend.append("rect") .attr("x", i * 25) .attr("y", 0) .attr("width", 25) .attr("height", 20) .style("fill", colorScalePositive(value)); }); positiveLegend.append("text") .attr("x", 0) .attr("y", 35) .style("font-size", "10px") .text("0"); positiveLegend.append("text") .attr("x", 9 * 25) .attr("y", 35) .style("font-size", "10px") .text(d3.max(data3, d => Math.max(0, d.PersonalFunds)).toFixed(2)); // Legend and textfor Negative Funds const negativeLegend = svg.append("g") .attr("transform", "translate(700, 760)"); negativeLegend.append("text") .attr("x", 0) .attr("y", -10) .style("font-size", "12px") .text("FinancialImpact(Income-FundsSpent)"); const negativeLegendData = d3.range(maxNegativeValue, 0, -maxNegativeValue / 9); negativeLegendData.forEach((value, i) => { negativeLegend.append("rect") .attr("x", i * 25) .attr("y", 0) .attr("width", 25) .attr("height", 20) .style("fill", colorScaleNegative(value)); }); negativeLegend.append("text") .attr("x", 0) .attr("y", 35) .style("font-size", "10px") .text(maxNegativeValue.toFixed(2)); negativeLegend.append("text") .attr("x", 9 * 25) .attr("y", 35) .style("font-size", "10px") .text("0"); // Bar Legend for Duplicate Funds(Orange) const barLegend = svg.append("g") .attr("transform", "translate(50, 720)"); barLegend.append("rect") .attr("width", 7) .attr("height", 20) .attr("fill", "orange") .attr("y", 0); barLegend.append("text") .attr("x", 30) .attr("y", 15) .text("Duplicate Funds(To be Returned)") .style("font-size", "12px"); // Bar Legend for FundsSpent (Red) barLegend.append("rect") .attr("width", 7) .attr("height", 20) .attr("fill", "red") .attr("y", 25); barLegend.append("text") .attr("x", 30) .attr("y", 40) .text("Funds spent after FEMA/Insurance+Grants") .style("font-size", "12px"); // Bar Legend for Median Income (Green) barLegend.append("rect") .attr("width", 7) .attr("height", 20) .attr("fill", "green") .attr("y", 50); barLegend.append("text") .attr("x", 30) .attr("y", 65) .text("Median Income") .style("font-size", "12px"); return svg.node(); }32:T1510,LouiMap = { const projection = d3.geoMercator().fitSize([1000, 800], louisianaCounty); const path = d3.geoPath().projection(projection); //using powerscale(this scale inscreases the smaller value significantly compared to larger value...using this for better visibility for smaller values) const barScale = d3.scalePow() .exponent(0.3) .domain([0, d3.max(data2, d => Math.max(d.TotalFundsReceived, d.TotalDamageAssessment))]) .range([0, 50]); //for positive values const colorScalePositive = d3.scaleSequential(d3.interpolateBlues) .domain([0, d3.max(data2, d => Math.max(0, d.FundsNeeded))]); //for negative values (funds that need to be returned/duplication of funds) const colorScaleNegative = d3.scaleSequential(d3.interpolateReds) .domain([0, d3.min(data2, d => Math.min(0, d.FundsNeeded))]); //svg container const svg = d3.create("svg") .attr("viewBox", [0, 0, 1000, 800]) .style("width", "100%") .style("height", "auto"); svg.append("text") .attr("x", 720) .attr("y", 50) .attr("text-anchor", "middle") .style("font-size", "24px") .style("font-weight", "bold") .text("Louisiana") .style("text-decoration", "underline"); const parishes = svg.selectAll(".PARISH") .data(louisianaCounty.features) .join("path") .attr("class", "PARISH") .attr("d", path) .attr("fill", d => { const dataEntry = data2.find(p => p.PARISH === d.properties.name); return dataEntry ? (dataEntry.FundsNeeded >= 0 ? colorScalePositive(dataEntry.FundsNeeded) : colorScaleNegative(dataEntry.FundsNeeded)) : "#ddd"; }) .attr("stroke", "black"); parishes.append("title") .text(d => { const dataEntry = data2.find(p => p.PARISH === d.properties.name); return `${d.properties.name}: ${dataEntry ? dataEntry.FundsNeeded : 'No data'}`; }); //to place grouped bars on the parish cntroid const groups = svg.selectAll(".PARISH-group") .data(data2) .join("g") .attr("class", "PARISH-group") .attr("transform", d => { const centroid = path.centroid(d.feature); return `translate(${centroid[0]},${centroid[1]})`; }); groups.selectAll("rect") .data(d => [d.TotalFundsReceived, d.TotalDamageAssessment]) .join("rect") .attr("x", (d, i) => i * 5) .attr("y", d => -barScale(d)) .attr("width", 5) .attr("height", d => barScale(d)) .attr("fill", (d, i) => i === 0 ? "green" : "red") .attr("stroke", "black") .append("title") .text((d, i) => i === 0 ? `Funds Received: $${d}` : `Property Damage: $${d}`); //legend for positive values const positiveLegend = svg.append("g") .attr("transform", "translate(550, 280)"); positiveLegend.append("text") .attr("x", 0) .attr("y", -10) .style("font-size", "12px") .style("fill", "gray") .text("Funds needed after FEMA/insurance+Grants"); d3.schemeBlues[9].forEach((color, i) => { positiveLegend.append("rect") .attr("x", i * 25) .attr("y", 0) .attr("width", 25) .attr("height", 20) .style("fill", color); }); const positiveMaxValue = colorScalePositive.domain()[1]; positiveLegend.append("text") .attr("x", 0) .attr("y", 35) .style("font-size", "10px") .text("0"); positiveLegend.append("text") .attr("x", 9 * 25) .attr("y", 35) .style("font-size", "10px") .text(`${Math.round(positiveMaxValue)}`); //legend for negative values const negativeLegend = svg.append("g") .attr("transform", "translate(550, 350)"); negativeLegend.append("text") .attr("x", 0) .attr("y", -10) .style("font-size", "12px") .style("fill", "gray") .text("Duplicate Funds(To be Returned)"); d3.schemeReds[9].forEach((color, i) => { negativeLegend.append("rect") .attr("x", i * 25) .attr("y", 0) .attr("width", 25) .attr("height", 20) .style("fill", color); }); const negativeMinValue = d3.min(data2, d => Math.min(0, d.FundsNeeded)); negativeLegend.append("text") .attr("x", 0) .attr("y", 35) .style("font-size", "10px") .text("0"); negativeLegend.append("text") .attr("x", 9 * 25) .attr("y", 35) .style("font-size", "10px") .text(`${Math.round(negativeMinValue)}`); //scale note const scaleNote = svg.append("text") .attr("x", 600) .attr("y", 240) .style("font-size", "12px") .style("fill", "gray") .text("(Bars: Scaled for Visibility)"); //bar legend const barLegend = svg.append("g") .attr("transform", "translate(50, 720)"); barLegend.append("rect") .attr("width", 5) .attr("height", 20) .attr("fill", "red"); barLegend.append("text") .attr("x", 30) .attr("y", 15) .text("Property Damage") .style("font-size", "12px"); barLegend.append("rect") .attr("width", 5) .attr("height", 20) .attr("y", 25) .attr("fill", "green"); barLegend.append("text") .attr("x", 30) .attr("y", 40) .text("Funds Received") .style("font-size", "12px"); barLegend.append("rect") .attr("width", 20) .attr("height", 20) .attr("y", 50) .attr("fill", "gray"); barLegend.append("text") .attr("x", 30) .attr("y", 65) .text("No Data/Missing Data") .style("font-size", "12px"); return svg.node(); }; 33:T1481,function GroupedBarChart(selectedParishes, parishColorMap) { d3.select("#barchart").selectAll("*").remove(); // Dimensions and margins const marginTop = 60; const marginRight = 30; const marginBottom = 50; const marginLeft = 60; const width = 928; const height = 600; const structureTypes = Array.from(new Set(transformedData2.map(d => d.StructureType))); const filteredData = structureTypes.map(type => { return { StructureType: type, parishes: selectedParishes.map(parish => { const parishData = transformedData2.find(d => d.PARISH === parish && d.StructureType === type); return { PARISH: parish, StructureTypeAmount: parishData ? parishData.StructureTypeAmount : 0 }; }) }; }); const x0 = d3.scaleBand() .domain(structureTypes) .rangeRound([marginLeft, width - marginRight]) .paddingInner(0.1); const x1 = d3.scaleBand() .domain(selectedParishes) .rangeRound([0, x0.bandwidth()]) .padding(0.05); const y = d3.scaleLinear() .domain([0, d3.max(filteredData, d => d3.max(d.parishes, p => p.StructureTypeAmount))]).nice() .rangeRound([height - marginBottom, marginTop]); // SVG container const svg = d3.select("#barchart").append("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Tooltip const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); const barGroups = svg.append("g") .selectAll("g") .data(filteredData) .join("g") .attr("transform", d => `translate(${x0(d.StructureType)},0)`); // Creating bars with transitions barGroups.selectAll("rect") .data(d => d.parishes) .join( enter => enter.append("rect") .attr("x", d => x1(d.PARISH)) .attr("y", height - marginBottom) .attr("width", x1.bandwidth()) .attr("height", 0) .attr("fill", d => parishColorMap.get(d.PARISH) || "#ddd") .call(enter => enter.transition() .duration(1000) .attr("y", d => y(d.StructureTypeAmount)) .attr("height", d => y(0) - y(d.StructureTypeAmount))), update => update .attr("fill", d => parishColorMap.get(d.PARISH) || "#ddd") .call(update => update.transition() .duration(1000) .attr("x", d => x1(d.PARISH)) .attr("width", x1.bandwidth()) .attr("y", d => y(d.StructureTypeAmount)) .attr("height", d => y(0) - y(d.StructureTypeAmount))), exit => exit .call(exit => exit.transition() .duration(1000) .attr("y", height - marginBottom) .attr("height", 0) .remove()) ); // Tooltip barGroups.selectAll("rect") .on("mouseover", function(event, d) { tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(`Parish: ${d.PARISH}
Amount: ${d.StructureTypeAmount}`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); }); // structure dmg value on bar barGroups.selectAll("text.valueLabel") .data(d => d.parishes) .join("text") .attr("class", "valueLabel") .attr("x", d => x1(d.PARISH) + x1.bandwidth() / 2) .attr("y", d => y(d.StructureTypeAmount) - 5) .attr("text-anchor", "middle") .text(d => d3.format(".2s")(d.StructureTypeAmount)) .attr("fill", "black") .attr("font-size", "10px"); // Append axes const xAxis = svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x0).tickSizeOuter(0)); xAxis.selectAll("text") .attr("transform", "rotate(0)") .attr("text-anchor", "middle"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(null, "s")); // X-axis label svg.append("text") .attr("transform", `translate(${width / 2}, ${height})`) .attr("dy", "-0.5em") .attr("text-anchor", "middle") .text("STRUCTURE TYPE"); // Viz Title svg.append("text") .attr("x", (width / 2)) .attr("y", marginTop / 2 - 10) .attr("text-anchor", "middle") .style("font-size", "24px") .style("text-decoration", "underline") .style("font-weight", "bold") .text("Structure Type : Damage Comparison"); const legend = svg.append("g") .attr("transform", `translate(${width - marginRight - 150}, ${marginTop})`); legend.selectAll("rect") .data(selectedParishes) .join("rect") .attr("x", 0) .attr("y", (d, i) => i * 20) .attr("width", 18) .attr("height", 18) .style("fill", d => parishColorMap.get(d) || "#ddd"); // Use color from parishColorMap legend.selectAll("text") .data(selectedParishes) .join("text") .attr("x", 24) .attr("y", (d, i) => i * 20 + 9) .attr("dy", ".35em") .style("text-anchor", "start") .text(d => d); return svg.node(); } 34:T40c,financialImp = Object.entries(groupedByNeighborhood).map(([d, v]) => { const damageAssessments = v.map(d => parseFloat(d['Current Damage Assessment'])); // damage to structure types const currentDOBAmounts = v.map(d => parseFloat(d['Current Total DOB Amount (no Legal Fees removed)'])); // fema+Insurance const totalClosingAmounts = v.map(d => parseFloat(d['TOTAL_CLOSING_AMOUNT']));// road home grants //using median funcctionn to calculate median const medianDamageAssessment = median(damageAssessments); const mediancurrentDOBAmounts = median(currentDOBAmounts); const medianTotalClosingAmount = median(totalClosingAmounts); const Funds = medianDamageAssessment - (mediancurrentDOBAmounts + medianTotalClosingAmount); //can be negative or positive values meaning - to be paid by people or people have received duplicate funds and have to return them back. return { neighborhood: d, medianDamageAssessment, mediancurrentDOBAmounts , medianTotalClosingAmount, financialImpact: Funds }; })35:T535,// Neighbohood names on the map and on the dataset are not same..so changing them to have common names financialImpact = (() => { const nameChange = { "St. Thomas Development": "St. Thomas Dev", "Lakeshore/Lake Vista": "Lakeshore - Lake Vista", "Village de l'est": "Village De Lest", "Lower Garden District Neighborh": "Lower Garden District", "Mid-City Neighborhood": "Mid-City", "Lakeview Neighborhood": "Lakeview", "New Aurora/English Turn": "New Aurora - English Turn", "Marlyville/Fountainebleau": "Marlyville - Fontainbleau", "Tall Timbers/Brechtel": "Tall Timbers - Brechtel", "McDonough": "Mcdonogh", "Treme'/Lafitte": "Treme - Lafitte", "Lower Ninth Ward Neighborhood": "Lower Ninth Ward", "Central City Neighborhood": "Central City", "Uptown Neighborhood": "Uptown", "Viavant/Venetian Isles": "Viavant", "U.S. Naval Base Neighborhood": "U.S. Naval Base", "Bywater Neighborhood": "Bywater", "Tulane/Gravier": "Tulane - Gravier", "Fischer Project": "Fischer Dev", "Desire Development": "Desire Dev", "Florida Development": "Florida Dev", "B.W. Cooper": "B. W. Cooper" }; return financialImp.map(d => { const newName = nameChange[d.neighborhood]; return {...d,neighborhood: newName ? newName : d.neighborhood}; }); })(); 36:[{"id":"f0533b3396803d62a1ceddb28dda9a85d2d3b2e2023a53eee140577564bc49fc97bd8e908b6ef2802c3f28c65c2728a10264e28c058c450da08a247cb3becdd2","href":"https://static.observableusercontent.com/files/f0533b3396803d62a1ceddb28dda9a85d2d3b2e2023a53eee140577564bc49fc97bd8e908b6ef2802c3f28c65c2728a10264e28c058c450da08a247cb3becdd2","name":"new-orleans@1.geojson","type":"application/geo+json","lastModified":1699841551182.425,"size":367258},{"id":"bc64519951d24aaf73aed4b0df83e832a62738e04332c329a390a94e9b9ab3cbcb55b8f954e7bb922688fc27b9b4ce271dce607ca6fc3075530c2028086f88e6","href":"https://static.observableusercontent.com/files/bc64519951d24aaf73aed4b0df83e832a62738e04332c329a390a94e9b9ab3cbcb55b8f954e7bb922688fc27b9b4ce271dce607ca6fc3075530c2028086f88e6","name":"NewOrleans_Median income.csv","type":"text/csv","lastModified":1699847974380.646,"size":2007},{"id":"f8a1a3dcecc8113672f45fe4f1a6613725d33ca041a33e987a1a1b77952681249a8778207f4ecc8ff9d8ae4c514e3a5273c94fa23fe3579cae49647d5c75a1ea","href":"https://static.observableusercontent.com/files/f8a1a3dcecc8113672f45fe4f1a6613725d33ca041a33e987a1a1b77952681249a8778207f4ecc8ff9d8ae4c514e3a5273c94fa23fe3579cae49647d5c75a1ea","name":"roadhome_for_datastore.csv","type":"text/csv","lastModified":1697490914190.05,"size":35661551},{"id":"aaffba5066c3a249f99540e44f3141b315272cb49336da5ea2463f0b8db3075e55b429cfd9f201be65e9b2441651bcc12f8c330f3891be74ddfac94c8cbb99a5","href":"https://static.observableusercontent.com/files/aaffba5066c3a249f99540e44f3141b315272cb49336da5ea2463f0b8db3075e55b429cfd9f201be65e9b2441651bcc12f8c330f3891be74ddfac94c8cbb99a5","name":"louisiana-with-county-boundaries_1101.geojson","type":"application/geo+json","lastModified":1697504825354.277,"size":153773}] 2f:{"id":"0fdae1863a22c517","slug":null,"title":"FINAL PROJECT by Vikramaditya","thumbnail":null,"access_level":"public","create_time":"$D2023-10-16T21:14:35.241Z","update_time":"$D2023-12-28T02:52:47.230Z","view_time":null,"first_public_time":"$D2023-12-28T03:28:26.713Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"pro_2024"},"version":2186,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b2e5eec88de8c511","login":"vikramaditya","name":"VIKRAMADITYA REDDY","avatar_url":"https://avatars-next.observableusercontent.com/f986dcad7f7e030f565ac4508e1a5f20d530b42ccf8e1e78a4fc75ea6c4bfc45","tier":null}],"members":[{"type":"individual","id":"0290d485d6927639","login":"dakoop","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3db1688f30a1b05a38931e472a94cfdfe52090e6ecdd5fe4b5f9ed17708aebe4","tier":null,"role":"editor"},{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"FINAL PROJECT by Vikramaditya","cells":[{"id":0,"value":"

FINAL PROJECT by Vikramaditya

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":638,"value":"

VIKRAMADITYA REDDY VARKALA

Z1973679

Data Visualization(CSCI 627)

2023-12-03

\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1918,"value":"

DataSet:Louisiana Road Home program

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1819,"value":"

TASK 1

Whats the trend between Funds distributed and Damage caused by hurricane across each Parish?

Are there any regions that experienced severe damage but received comparatively less grants?

which structure type has the most damage among Parishes?

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1865,"value":"

Viz Usage Description

\nUse the Slider to select the number of selections/clicks(parish comparisons), click on the parish to select parish and view different Structure damage comparisons on bar chart click again to deselect parish. Hover over Grouped bars on map to view funds received and Damage values. Hover over parish to view parish name and funds needed value .Hover over bars on Bar chart to view Parish Name and Structure Type Damage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1823,"value":"viewof count = Inputs.range([0, 4], {label: \"No of Parishes to compare\", step: 1, placeholder: \"0–4\"})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1828,"value":"html`\n \n

\n ${LouiMap}\n

\n \n\n

\n`;\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1833,"value":"

TASK 2

\n\n

Which neighborhood of New Orleans have had the most financial Impact due to Hurricane.?

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1874,"value":"

Viz Usage Description

\nHover over Grouped bars on map to view Median Income and Median Funds Spent/Duplication Of funds. Hover over parish to view parish name and Financial Impact.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1838,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"

ROAD HOME GRANTS - DATASET

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"roadhome_for_datastore = await FileAttachment(\"roadhome_for_datastore.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"roadhome_for_datastore","database":"$undefined"},{"id":8,"value":"data = FileAttachment(\"roadhome_for_datastore.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"pdata = data.csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"

LOUISIANA

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2053,"value":"mapColor = d3.scaleOrdinal()\n .domain(selectedParishes)\n .range(d3.schemeSet2);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"uniqueNeighborhoods = [...new Set(pdata.map(item => item['NOLA Neighborhood Name']))];\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"linedata = pdata.map(d => ({\"Structure Type\": d[\"Structure Type\"],\"TOTAL_CLOSING_AMOUNT\": d[\"TOTAL_CLOSING_AMOUNT\"],\"PARISH\": d[\"PARISH\"],\"Current_Damage_Assessment\": d[\"Current Damage Assessment\"] \n }));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"aggData = d3.rollups(linedata,\n v => d3.sum(v, d => +d.TOTAL_CLOSING_AMOUNT), \n d => d[\"Structure Type\"],\n d => d.PARISH\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"transformedData = aggData.flatMap(([type, parishValues]) => {\n return parishValues.map(([parish, totalamount]) => ({\n \"Structure Type\": type,\n \"TOTAL_CLOSING_AMOUNT\": totalamount ,\n \"PARISH\": parish\n }));\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"louisianaCounty = FileAttachment(\"louisiana-with-county-boundaries_1101.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"countyNames = louisianaCounty.features.map(d=> d.properties.name);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"uniqueParishes = [...new Set(pdata.map(d => d.PARISH))];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"ndata = {\n const updatedData = pdata.map(d => {\n return {\n ...d,\n PARISH: mapParishNames(d.PARISH)\n };\n });\n\n return updatedData;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"// Parishes names on the map and on the dataset are not same..so changing them to have common names\nmapParishNames = (oldName) => {\n const nameMappings = {\n \"St. Tammany\": \"Saint Tammany\",\n \"St. Bernard\": \"Saint Bernard\",\n \"St. James\": \"Saint James\",\n \"St. John the Baptist\": \"Saint John the Baptist\",\n \"St. Charles\": \"Saint Charles\",\n \"St. Martin\": \"Saint Martin\",\n \"St. Mary\": \"Saint Mary\",\n \"St. Helena\": \"Saint Helena\"\n \n };\n\n return nameMappings[oldName] || oldName; \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"centroid = {\n const path = d3.geoPath();\n return feature => path.centroid(feature);\n}\n//to place bars on the map","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"aggregateByParish = (data) => {\n return data.reduce((s, d) => {\n const parish = d.PARISH;\n const closingAmount = parseFloat(d.TOTAL_CLOSING_AMOUNT) || 0;\n const damageAssessment = parseFloat(d['Current Damage Assessment']) || 0;\n const dobAmount = parseFloat(d['Current Total DOB Amount (no Legal Fees removed)']) || 0;\n\n if (!s[parish]) {\n s[parish] = {\n PARISH: parish,\n TotalClosingAmount: 0,\n TotalDamageAssessment: 0,\n TotalDOBAmount: 0\n };\n }\n\n s[parish].TotalClosingAmount += closingAmount;\n s[parish].TotalDamageAssessment += damageAssessment;\n s[parish].TotalDOBAmount += dobAmount;\n\n return s;\n }, {});\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1105,"value":"data0 = {\n \n const Data4 = aggregateByParish(ndata);\n const finalData = Object.keys(Data4).map(d => { const parishData = Data4[d];\n return {\n PARISH: parishData.PARISH,\n TotalClosingAmount: parishData.TotalClosingAmount,\n TotalDamageAssessment: parishData.TotalDamageAssessment, //total damage to structures.\n TotalDOBAmount: parishData.TotalDOBAmount,\n TotalFundsReceived: parishData.TotalClosingAmount + parishData.TotalDOBAmount,// fema+insurance+ROad home grants\n FundsNeeded: parishData.TotalDamageAssessment - (parishData.TotalClosingAmount + parishData.TotalDOBAmount)\n };\n });\n\n return finalData;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"data2 = data0.map(d => ({...d,feature: louisianaCounty.features.find(f => f.properties.name === d.PARISH)})).filter(d => d.feature);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1575,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"**GROUPED BAR CHART. **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1233,"value":"aggr = ndata.reduce((s, d) => {\n const parish = d.PARISH;\n const structureType = d['Structure Type'];\n const closingAmount = parseFloat(d.TOTAL_CLOSING_AMOUNT);\n\n if (!s[parish]) {\n s[parish] = {\n totalClosingAmount: 0,\n structureTypes: {}\n };\n }\n\n s[parish].totalClosingAmount += closingAmount;\n\n if (!s[parish].structureTypes[structureType]) {\n s[parish].structureTypes[structureType] = 0;\n }\n\n s[parish].structureTypes[structureType] += closingAmount;\n\n return s;\n}, {});\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1236,"value":"rArray = Object.entries(aggr).map(([parish, data]) => ({\n PARISH: parish,\n TOTAL_CLOSING_AMOUNT: data.totalClosingAmount,\n StructureTypes: data.structureTypes\n}));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1238,"value":"function transformData1(resultArray) {\n \n const sType = new Set();\n resultArray.forEach(d => {\n Object.keys(d.StructureTypes).forEach(type => sType.add(type));\n });\n\n const transformedData = [];\n resultArray.forEach(d => {\n sType.forEach(type => {\n const entry = {\n PARISH: d.PARISH,\n TOTAL_CLOSING_AMOUNT: d.TOTAL_CLOSING_AMOUNT,\n StructureType: type,\n StructureTypeAmount: d.StructureTypes[type] || 0\n };\n transformedData.push(entry);\n });\n });\n\n return transformedData;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1240,"value":"transformedData1 = transformData1(rArray);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1667,"value":"structureTypeMap = ({\n \"Single (including mobile home)\": \"Single-mobile\",\n \"Duplex (with one owner-occupied unit)\": \"Duplex\",\n \"Townhouse\": \"Townhouse\",\n \"Single Family on Leased Land\": \"Single-Leased\",\n \"Mobile Home\": \"Mobile Home\",\n \"Condominium\": \"Condo\",\n \"Mobile Home on Leased Land\": \"Mobile-Leased\",\n \"Single\": \"Single\",\n \"Ineligible\": \"Ineligible\"\n})\n//shortening the structure type name for labels visibility on bar chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1669,"value":"transformedData2 = transformedData1.map(d => {\n if (structureTypeMap[d.StructureType]) {\n return {...d, StructureType: structureTypeMap[d.StructureType]};\n }\n return d;\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1541,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2081,"value":"parishColorMap = new Map();\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2090,"value":"availableColors = d3.schemeSet2.slice(0, 4);\n//only 4 colours because of 4 selecions\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2084,"value":"function assignColor(parish) \n{\n if (!parishColorMap.has(parish)) \n {\n let color = availableColors.shift()\n parishColorMap.set(parish, color);\n }\n return parishColorMap.get(parish);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2086,"value":"function removeColor(parish) \n{\n if (parishColorMap.has(parish)) \n {\n availableColors.push(parishColorMap.get(parish));\n parishColorMap.delete(parish);\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1543,"value":"mapSelection = function(feature, element) \n{\n const x = data2.find(p => p.PARISH === feature.properties.name);\n if (!x) return;\n\n const parishName = x.PARISH;\n const select = d3.select(element).classed(\"selected\");\n\n if (!select && mutable selectedParishes.length < count) \n {\n \n d3.select(element)\n .classed(\"selected\", true)\n .style(\"fill\", assignColor(parishName));\n mutable selectedParishes = [...mutable selectedParishes, parishName];\n } \n else if (select) \n {\n d3.select(element)\n .classed(\"selected\", false)\n .style(\"fill\", \"\"); \n removeColor(parishName);\n mutable selectedParishes = mutable selectedParishes.filter(p => p !== parishName);\n }\n\n GroupedBarChart(mutable selectedParishes,parishColorMap);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1447,"value":"mutable selectedParishes = [];\n\n//mutates the array based on the selction from the map","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1453,"value":"{\n const parishes = d3.select(LouiMap).selectAll(\"path\");\n\n parishes.on(\"click\", function(event, d) {\n mapSelection(d, this);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1456,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":628,"value":"

NEW ORLEANS

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":697,"value":"

Medican Income Data

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":733,"value":"neworleans_medianIncome = await FileAttachment(\"NewOrleans_Median income.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"neworleans_medianIncome","database":"$undefined"},{"id":727,"value":"data1 = FileAttachment(\"NewOrleans_Median income.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"medianIncome=data1.csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"uniqueNeighborhood = [...new Set(medianIncome.map(item => item.Neighborhood))];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"newOrleans = FileAttachment(\"new-orleans@1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":" **Data Manipulation**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1004,"value":"orleansData = pdata.filter(d => d.PARISH === 'Orleans');\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"function median(d) \n{\n if (d.length === 0) \n return 0;\n d.sort((a, b) => a - b);\n \n const mid = Math.floor(d.length / 2);\n if (d.length % 2) \n {\n return d[mid];\n }\n return (d[mid-1]+d[mid])/2.0;\n}\n//funcgtion to calculate median","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1010,"value":"groupedByNeighborhoodMap= d3.group(orleansData, d => d['NOLA Neighborhood Name']);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"groupedByNeighborhood = Object.fromEntries(groupedByNeighborhoodMap);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"neighborhoodNames= [...new Set(financialImpact.map(d=>d.neighborhood))];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"combinedFinancialImpact = financialImpact.reduce((s,d) => {\n const x = medianIncome.find(inc => inc.Neighborhood === d.neighborhood);\n if (x) \n {\n s.push({ ...d, medianIncome2000: x['Median Income in 2000'] });\n }\n return s;\n}, []);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"OrleansPlotData = combinedFinancialImpact.map(d => {\n\n // Removing $ symbol before income\n const medianIncome = parseFloat(d.medianIncome2000.replace(/[$,]/g, ''));\n\n const PersonalFunds = (medianIncome - d.financialImpact);\n\n return {\n neighborhood: d.neighborhood,\n medianIncome: medianIncome,\n impact: d.financialImpact,\n PersonalFunds: PersonalFunds\n };\n});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"data3 = OrleansPlotData.map(d => ({...d,feature: newOrleans.features.find(f => f.properties.name === d.neighborhood)})).filter(d => d.feature);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1926,"value":"**References:**\n**Examples from D3 gallery(observable)**\n\n

https://observablehq.com/@d3/grouped-bar-chart/2

\n\n

https://observablehq.com/@d3/spike-map/2?intent=fork

\n\n

https://observablehq.com/@observablehq/views#

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"