Created
January 18, 2023 12:46
-
-
Save zaynaib/0e2126a6aafddafeaae76e89622f14f8 to your computer and use it in GitHub Desktop.
D3.js map project of Chicago. Gray map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| async function chicagoMap(){ | |
| let chiNeighborhoods = await d3.json('https://raw.githubusercontent.com/zaynaib/chicago-elections/main/election_leaflet/data/chicago-wards.geojson') | |
| console.log(chiNeighborhoods) | |
| let width = 700; | |
| let height = 780; | |
| let svg = d3.select( "#viz" ) | |
| .append( "svg" ) | |
| .attr( "width", width ) | |
| .attr( "height", height ); | |
| // Append empty placeholder g element to the SVG | |
| // g will contain geometry elements | |
| let g = svg.append( "g" ); | |
| console.log(g) | |
| let chiProjection = d3.geoAlbers() | |
| .scale( 80000 ) //how far zoomed in the map should be | |
| .rotate( [87.623,0] ) | |
| .center( [0, 41.881] ) | |
| .translate( [width/2,height/2] ); | |
| // Create GeoPath function that uses built-in D3 functionality to turn | |
| // lat/lon coordinates into screen coordinates | |
| chi_geoPath = d3.geoPath() | |
| .projection( chiProjection ); | |
| g.selectAll( "path" ) | |
| .data( chiNeighborhoods.features ) //using .features to bind the data this time. GeoJSON that is an object that has two features, features are what we actually want to access the array of objects | |
| .enter() //this then propogates into our group | |
| .append( "path" ) //path per geoemtry | |
| .attr( "fill", "#ccc" ) //then applying a fill color. can be hex colors or actual colors | |
| .attr( "stroke", "#333") //defining the stroke color, in this case black | |
| .attr( "d", chi_geoPath ); //this element d is different from stuff from last week. this week just adding an attribute called d that corresponds to each element. will draw each of the states. it's a black box for us, will loop through for us wihtout us having to create a for loop | |
| } | |
| chicagoMap() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| </head> | |
| <body> | |
| <div id="viz"> | |
| </div> | |
| <script src="https://d3js.org/d3.v7.min.js"></script> | |
| <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script> | |
| <script src="mapping-d3.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment