Published
Edited
Dec 16, 2021
1 star
redlining_airQuality = {
// we create an SVG with the width and height specified
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
svg.append("g")
.selectAll("path")
.data(neighborhoods.features)
.join("path")
// This line renders our population data
.attr("fill", d => airQualityColor(airQualityByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))))
.attr("d", path)
.append("title")
.text(d => `Air Quality Score: ${airQualityByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))}`);
// this part renders the census borders over top
svg.append("g")
.selectAll("path")
.data(redlinedNeighborhoods.features)
.join("path")
.attr("fill", "none")
.attr("stroke", d => d.properties.holc_grade == "D" ? "white" : "none")
.attr("stroke-width", "2px")
.attr("stroke-linejoin", "round")
.attr("d", path);
// we need to return a DOM element.
// the .node() function returns the DOM element corresponding to the d3 selection.
return svg.node();
}
html `<div>
<input type="checkbox" class="checkbox" value="A" onclick="redline_and_income()"><label>Income</label>
<input type="checkbox" class="checkbox" value="B" onclick="redlined_and_whitePop()"><label>White</label>
<input type="checkbox" class="checkbox" value="C" onclick="redlined_and_treeCover()"><label>Tree</label>
</div>`
redline_and_income = {
// we create an SVG with the width and height specified
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
svg.append("g")
.selectAll("path")
.data(neighborhoods.features)
.join("path")
// This line renders our population data
.attr("fill", d => incomeColor(incomeByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))))
.attr("d", path)
.append("title")
.text(d => `Median Household Income ($): ${incomeByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))}`);
// this part renders the redlining borders over top
svg.append("g")
.selectAll("path")
.data(redlinedNeighborhoods.features)
.join("path")
.attr("fill", "none")
.attr("stroke", d => d.properties.holc_grade == "D" ? "white" : "none")
.attr("stroke-width", "2px")
.attr("stroke-linejoin", "round")
.attr("d", path);
// we need to return a DOM element.
// the .node() function returns the DOM element corresponding to the d3 selection.
return svg.node();
}
redlined_and_whitePop = {
// we create an SVG with the width and height specified
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
svg.append("g")
.selectAll("path")
.data(neighborhoods.features)
.join("path")
// This line renders our population data
.attr("fill", d => whitePopColor(whitePopByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))))
.attr("d", path)
.append("title")
.text(d => `White Population (%): ${d3.format(".1f")(whitePopByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))}`);
// this part renders the redlining borders over top
svg.append("g")
.selectAll("path")
.data(redlinedNeighborhoods.features)
.join("path")
.attr("fill", "none")
.attr("stroke", d => d.properties.holc_grade == "D" ? "white" : "none")
.attr("stroke-width", "2px")
.attr("stroke-linejoin", "round")
.attr("d", path);
// we need to return a DOM element.
// the .node() function returns the DOM element corresponding to the d3 selection.
return svg.node();
}
redlined_and_treeCover = {
// we create an SVG with the width and height specified
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
svg.append("g")
.selectAll("path")
.data(neighborhoods.features)
.join("path")
// This line renders our population data
.attr("fill", d => treeCoverColor(treeCoverByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))))
.attr("d", path)
.append("title")
.text(d => `Tree Cover (%): ${d3.format(".1f")(treeCoverByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))}`);
// this part renders the redlining borders over top
svg.append("g")
.selectAll("path")
.data(redlinedNeighborhoods.features)
.join("path")
.attr("fill", "none")
.attr("stroke", d => d.properties.holc_grade == "D" ? "white" : "none")
.attr("stroke-width", "2px")
.attr("stroke-linejoin", "round")
.attr("d", path);
// we need to return a DOM element.
// the .node() function returns the DOM element corresponding to the d3 selection.
return svg.node();
}
imperviousSurfaceArea = {
// we create an SVG with the width and height specified
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
svg.append("g")
.selectAll("path")
.data(neighborhoods.features)
.join("path")
// This line renders our population data
.attr("fill", d => imperviousAreaColor(imperviousAreaByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))))
.attr("d", path)
.append("title")
.text(d => `Impervious Surface Area (%): ${d3.format(".1f")(imperviousAreaByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))}`);
// this part renders the census borders over top
svg.append("path")
.datum(neighborhoods)
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
// we need to return a DOM element.
// the .node() function returns the DOM element corresponding to the d3 selection.
return svg.node();
}
redlined_and_imperviousSurfaceArea = {
// we create an SVG with the width and height specified
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
svg.append("g")
.selectAll("path")
.data(neighborhoods.features)
.join("path")
// This line renders our population data
.attr("fill", d => imperviousAreaColor(imperviousAreaByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))))
.attr("d", path)
.append("title")
.text(d => `Impervious Surface Area (%): ${d3.format(".1f")(imperviousAreaByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))}`);
// this part renders the redlining borders over top
svg.append("g")
.selectAll("path")
.data(redlinedNeighborhoods.features)
.join("path")
.attr("fill", "none")
.attr("stroke", d => d.properties.holc_grade == "D" ? "white" : "none")
.attr("stroke-width", "2px")
.attr("stroke-linejoin", "round")
.attr("d", path);
// we need to return a DOM element.
// the .node() function returns the DOM element corresponding to the d3 selection.
return svg.node();
}
bi_variate = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);
svg.append(legend)
.attr("transform", "translate(870,450)");
svg.append("g")
.selectAll("path")
.data(topojson.feature(neighborhoods.features)
.join("path")
.attr("fill", d => color(data.get(d.id)))
.attr("d", path)
// .append("title")
// .text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}
// ${format(data.get(d.id))}`);
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
test = {
let rows = allVars.map(row => [String(d3.format("")(row["TRACTCE (a9 final.geojson1)"])), Number((row["_Median (A9 Final.Geojson1)"]-273.15)*(9/5)+32), Number(row["MCPA rating (Pollution Data - Sheet1.csv1)"])])
return new Map(rows)
}
surfaceTemp_AirQual = Object.assign(new Map(neighborhoods.features.properties), ({TRACTCE, _Median (A9 Final.Geojson1), ["MCPA rating (Pollution Data - Sheet1.csv1)"]}) => [["TRACTCE"], [+["_Median (A9 Final.Geojson1)"], +["MCPA rating (Pollution Data - Sheet1.csv1)"]]])), {title: ["Surface Temperature", "Air Quality"]})
neighborhoods.features[1].properties.TRACTCE.replace(/^0+/, '')
d3.format(".1f")(surfaceTempByNeighborhood.get("980000"))
surfaceTempByNeighborhood.get(neighborhoods.features[11].properties.TRACTCE.slice(1))
merged_data = FileAttachment("merged_and_cleaned.csv").csv()
surfaceTempByNeighborhood = {
let rows = allVars5.map(row => [String(d3.format("")(row["TRACTCE (a9 final.geojson1)"])), Number((row["_Median (A9 Final.Geojson1)"]-273.15)*(9/5)+32)])
return new Map(rows)
}
incomeByNeighborhood = {
let rows = allVars6.map(row => [String(d3.format("")(row["TRACTCE (a9 final.geojson1)"])), Number(row["Median Hou (A9 Final.Geojson1)"])])
return new Map(rows)
}
whitePopByNeighborhood = {
let rows = allVars.map(row => [String(d3.format("")(row["TRACTCE (a9 final.geojson1)"])), Number((row["White Popu (A9 Final.Geojson1)"]/row["Total Popu (A9 Final.Geojson1)"])*100)])
return new Map(rows)
}
airQualityByNeighborhood = {
let rows = allVars2.map(row => [String(d3.format("")(row["TRACTCE (a9 final.geojson1)"])), Number(row["MCPA rating (Pollution Data - Sheet1.csv1)"])])
return new Map(rows)
}
treeCoverByNeighborhood = {
let rows = allVars3.map(row => [String(d3.format("")(row["TRACTCE (a9 final.geojson1)"])), Number(row["Percent tree cover"])])
return new Map(rows)
}
imperviousAreaByNeighborhood = {
let rows = allVars4.map(row => [String(d3.format("")(row["TRACTCE (a9 final.geojson1)"])), Number(row["Percent impervious area"])])
return new Map(rows)
}
Income_and_Temp_chart = Scatterplot(merged_data, {
x: d => d['_Median (A9 Final.Geojson1)'],
y: d => d['Median Hou (A9 Final.Geojson1)'] -273.15 *(9/5)+32 ,
xLabel: "Income →",
yLabel: "↑ Surface Temperature",
stroke: "steelblue",
width,
height: 600,
})
Plot.plot(merged_data{
y: {
label: "↑ Temperature (°F)",
transform: f => f -273.15 *(9/5)+32 // convert Celsius to Fahrenheit
},
})
Red_Line_and_Demographic_chart = PieChart(merged_data, {
name: d => d['Holc Grade'] == "D" ,
value: d => d.whitePopByNeighborhood,
.append("title")
.text(d => `White Population (%): ${d3.format(".1f"));
width,
height: 500
})
import {PieChart} from "@d3/pie-chart"
import {Scatterplot} from "@d3/scatterplot"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.