Published
Edited
Dec 9, 2021
3 stars
color = d3.scaleQuantize().range(d3.schemeBlues[9]);
saintPaulScreenreader = {
var height = 580;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
.attr('role', 'img'); //screen reader identifies whole svg as an image
var title = svg.append('title'); //screen reader will read aloud title (must be first child of svg!)
title.text("Choropleth map of Saint Paul neighborhoods showing points corresponding to pedestrian/bike accidents. Neighborhoods are colored darker blue based on how many accidents have been The central neighborhoods (Union Park, Capitol River, Payne-Phalen) have the most pedestrian accidents");
var g = svg.append('g');
// first we define a projection function that takes in lat/long coordinates and converts them to (x,y) coordinates.
var projection = d3.geoMercator()
.center([-93.091301, 44.954445])
.scale(width * 200)
.translate([width / 2, height / 2.5])
// Now we can go through all the counties in our geojson file and add them to our svg
g.selectAll('path')
.data(ramseyCounties.features)
.enter()
.append('path')
.attr("stroke", "white")
.sort((a,b) => d3.ascending(a.properties.numBikeCrashes, b.properties.numBikeCrashes))
.attr('fill', d => color(d.properties.numBikeCrashes))
.attr('d', d3.geoPath().projection(projection)) //d3.geoPath--given a GeoJSON geometry or feature object, generates an SVG path data string
.append('title').text(d=>d.properties.name2+ " has " + d.properties.numBikeCrashes + " pedestrian accidents.");
svg.append('g')
.attr("fill", "#009999")
.attr("fill-opacity", 0.5)
.attr("stroke", "white")
.attr("stroke-width", 0.5)
.selectAll('circle')
.data(bikeData)
.enter()
.append("circle")
.attr("cx", d => projection([d.long, d.lat])[0] )
.attr("cy", d => projection([d.long, d.lat])[1] )
.attr("r", d=>3)
.attr("fill", d=>d["Crash Type"]==="Bike"? "red": "blue")
.append('title').text(d=>d["Crash Type"] +" crash at " + d["Crash Location"]);
return html`${svg.node()}`;
}
height = 500
margin = ({top: 10, right: 20, bottom: 20, left: 30})
console.log(finalpro.MedianTemperature[2])
{
for (let i = 0; i < 282; i++) {
finalpro[i].MedianHouseholdIncome = Number(finalpro[i].MedianHouseholdIncome)
finalpro[i].MedianTemperature = Number(finalpro[i].MedianTemperature)
}
}
x = d3.scaleLinear()
.domain([d3.min(finalpro, d => d.MedianHouseholdIncome), d3.max(finalpro, d => d.MedianHouseholdIncome)])
.range([margin.left, width - margin.right])
.nice()
y = d3.scaleLinear()
.domain([d3.min(finalpro, d => d.MedianTemperature), d3.max(finalpro, d => d.MedianTemperature)])
.range([height - margin.bottom, margin.top])
.nice()
d3.min(finalpro, d => d.MedianHouseholdIncome)
{
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height)
.attr('role', 'img'); //screen reader identifies whole svg as an image
var title = svg.append('title'); //screen reader will read aloud title (must be first child of svg!)
title.text("Scatterplot of all the counties in Saint Paul, Minnesota graphed against Median Income and Media Temperature. We can tell from the scatterplot that the higher the income of the neighborhood, the lower the surface temperature.");
svg.append('g')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x))
// Add x-axis title 'text' element.
.append('text')
.attr('text-anchor', 'end')
.attr('fill', 'black')
.attr('font-size', '12px')
.attr('font-weight', 'bold')
.attr('x', width - margin.right)
.attr('y', -10)
.text('Median Income');
svg.append('g')
.attr('transform', `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
// Add y-axis title 'text' element.
.append('text')
.attr('transform', `translate(20, ${margin.top}) rotate(-90)`)
.attr('text-anchor', 'end')
.attr('fill', 'black')
.attr('font-size', '12px')
.attr('font-weight', 'bold')
.text('Median Temperature');
const counties = svg
.selectAll('circle')
.data(finalpro)
.join('circle')
.sort((a, b) => b.MedianTemperature - a.MedianTemperature) // <-- sort so smaller circles are drawn last
.attr('class', 'country')
.attr('opacity', 0.75)
.attr('cx', d => x(d.MedianHouseholdIncome))
.attr('cy', d => y(d.MedianTemperature))
.attr('fill', 'orange')
.attr('r', 5)
// .append('title').text(d=>d["MedianTemperature"] +" crash at " + d["MedianHouseholdIncome"]);
counties
.append('title')
.text(d=> "Neighborhood with median income of " + d["MedianHouseholdIncome"] +" dollars has a surface temperature of " + d["MedianTemperature"] + "degrees in Kelvins");
// Add mouse hover interactions, using D3 to update attributes directly.
// In a stand-alone context, we could also use stylesheets with 'circle:hover'.
counties
// The 'on()' method registers an event listener function
.on('mouseover', function() {
// The 'this' variable refers to the underlying SVG element.
// We can select it directly, then use D3 attribute setters.
// (Note that 'this' is set when using "function() {}" definitions,
// but *not* when using arrow function "() => {}" definitions.)
d3.select(this).attr('stroke', '#333').attr('stroke-width', 2);
})
.on('mouseout', function() {
// Setting the stroke color to null removes it entirely.
d3.select(this).attr('stroke', null);
});
return svg.node();
}
finalpro = FileAttachment("tempandincome@1.csv").csv()
finalpro.MedianTemperature = d3.autoType(finalpro.MedianTemperature)
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.