proportionalSymbols = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
//creates basemap to show US states and makes the color of the base map
svg.append("path")
.datum(topojson.feature(basepolygons, basepolygons.objects.US_WGS84))
.attr("fill", "#ccc")
.attr("d", path_basemap) ;
//sets its symbology by showing state boundaries and color of boundaries. I chose the stroke or lines of states to be dark gray as i felt it best showed the outlines of polygons
svg.append("path")
.datum(topojson.mesh(basepolygons, basepolygons.objects.US_WGS84, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "gray")
.attr("stroke-linejoin", "round")
.attr("d", path_basemap);
//creates legend for map and placement of it
const legend = svg.append("g")
.attr("fill", "#777")
.attr("transform", "translate(850,550)")
.attr("text-anchor", "middle")
.style("font", "10px sans-serif")
.selectAll("g")
.data([2e6,1e7, d3.max([...data.values()])])
.join("g");
//makes legend groups of circles and fills the shape along with outside the shape
legend.append("circle")
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("cy", d => -radius(d))
.attr("r", radius);
legend.append("text")
.attr("y", d => -2 * radius(d))
.attr("dy", "1.3em")
.text(format);
//this determines the color of the points on the map (both the fill and the outline of the circles)
svg.append("g")
// I chose the color purple found from color brewer because it is a nice color without being too distracting or bright.
.attr("fill", "#88419d")
// The fill-opacity determines the transperancy of the circles so that all points can easily be seen and interpreted
.attr("fill-opacity", 0.5)
// I chose the outline to be darker then the fill color so that the circles can easily stand out from one another and the stroke-width determines the width of the outline of the point symbol
.attr("stroke", "#6e016b")
.attr("stroke-width", 0.5)
// The determines the shape of the point symbols. I chose circles since they are ghg emissions and release around the area of the site
.selectAll("circle")
.data(points.features
.map(d => (d.value = data.get(d.properties.GHGRP_ID), d))
//displays the value of each point by hovering over it
.sort((a, b) => b.value - a.value))
.join("circle")
//translates points to where they are located on the map and displays the values associated with each
.attr("transform", d => `translate(${path_points.centroid(d)})`)
.attr("r", d => radius(data.get(d.properties.GHGRP_ID)))
.append("title")
.text(d => `${d.properties.GHGRP_ID} : ${format(d.value)}`);
return svg.node();
}
height = 610
width = 975
path_points = d3.geoPath().projection(projection)
path_basemap = d3.geoPath().projection(projection)
projection = d3.geoAlbersUsa()
//includes Alaska and Hawaii
format = d3.format(".2s")
radius(9900000)
d3.max([...data.values()])
radius(8371.1)
//proportional symbols
//this will scale the square root of a number to a class that is in the data
// the parenthases links the points to the radius of the points.
// the [0,15] is the output range of the values and determines the size they show up on the map. The parenthases before the comma are the input values
radius = d3.scaleSqrt([0, d3.max([...data.values()])], [0, 15])
data.get("1014558")
data = Object.assign(new Map(csv_data))
//use an ID to match with the variable you are wanting to plot to join the data Important to specify as integers by using the plus sign
csv_data = d3.csvParse(await FileAttachment("CO2_Emissions2.csv").text(),({GHGRP_ID, GHG_Emissions}) => [+GHGRP_ID, +GHG_Emissions])
//import the point data (geojson)
points = FileAttachment("CO2_Emissions_Points.json").json()
//import the polygon base map data
basepolygons = FileAttachment("US_simple.json").json()
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
topojson = require("topojson-client@3")
d3 = require("d3@5")
//appendix
// the data was found from http://ghgdata.epa.gov/ghgp provided by EPA. The data is from 2023 and covers ghg emissions by metric tons by facilities throughout the United States. The ghg emissions include power plants, petrolium and natural gas, refineries, chemicals, minerals, waste, pulp and paper, and other. The United States map cover was found through United States Census Bereau. The raw data was used but cleaned up by eliminating uneccessary columns from the dataset such as the parent companys, and subparts along with additional information. Since the data was not standerdized biases could include more ghg emissions near greater places of population as they are more likely to be using more of everything then places with low population size.
// Interpretation of patterns: The largest amount of emissions appear to occur in the Eastern part of the United States. There are large clusters very high emitters around areas that are most likely cities. As we see towards the west coast there is less emissions probably due to populations being more spread out and less larger cities. This is somewhat of a bias within the data as it was not standardized to look at ghg emissions by population size.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
