Assignment2.2_GeoMapGraph

100%

Assignment2.2_GeoMapGraph

✓ Published2🌍 Public

Last edited Mar 11, 2026

Created on Mar 11, 2026

This example maps the locations of Brooklyn Public Library branches as orange points over a green choropleth of Brooklyn neighborhoods. The map uses a D3 geoMercator projection and d3.geoPath to render GeoJSON boundaries, while library coordinates are loaded from a CSV and drawn as SVG circles. Hovering over a point enlarges it and displays a tooltip with the branch name, phone number, and accessibility status. The visualization is built with D3 v7 and renders entirely as SVG.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment2.2_PieChart

A choropleth-style map of Brooklyn library branches uses orange points over a green base map. Each point is plotted by longitude and latitude from BPL_Locations.csv, projected with `d3.geoMercator()` and drawn as SVG circles. Hovering a point displays a tooltip with the branch name, phone number, and accessibility tags. The underlying neighborhood boundaries come from Brooklyn GeoJSON, rendered through `d3.geoPath()`.

TTony Mai

91% match

Loading thumbnail…

Assignment2.2_PieChart

This map of Brooklyn libraries plots each branch as a circle over a geographic map. The visualization uses a Mercator projection via `d3.geoPath` to render the borough’s shape, then positions the library points by parsing latitude and longitude from the CSV. Each point is colored orange and includes a hover tooltip that displays the library’s name, phone number, and accessibility features. The map is built with D3.v7, with map GeoJSON from a public GitHub repository and location data from the Brooklyn Public Library’s CSV.

TTony Mai

89% match

Loading thumbnail…

Assignment2.2_BarGraph

This bar chart shows the distribution of Brooklyn Public Library branches by their accessibility status, with counts labeled above each bar. The SVG visualization is built using D3 v7, reading branch and access data from BPL_Locations.csv. It uses scaleBand and scaleLinear axes to plot the data, and bars change color from steelblue to orange on hover. The chart groups branches into two categories: fully accessible and partially accessible.

TTony Mai

79% match

Loading thumbnail…

Gist e8914af0b0ac89f0bb63ab1ffa0d4f71

This example plots a single geographic point from a GeoJSON file, marking the Vanderbilt Library’s location with a yellow school symbol and a popup containing its title, tour date, and an external Wikimedia image. The visualization uses an SVG map rendered with D3’s `d3.geoPath` and `d3.forceSimulation` to place the marker, while the associated properties are bound to the feature for interactive display. The map’s basemap and styling are not specified in the code, only the one-point feature and its metadata.

CCliffordAnderson

72% match

Loading thumbnail…

Create a Map with D3

This example shows a map of Boston neighborhoods rendered as gray SVG paths on a 700 by 580 canvas. It uses D3 v4’s `d3.geoAlbers` projection and `d3.geoPath` to convert GeoJSON features from an embedded `mapdata.js` file into visible shapes. The code binds the neighborhood polygons to `path` elements and applies a uniform fill color, demonstrating a basic choropleth-style layout without additional styling or interactivity.

CChristine

71% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a choropleth map of geographic features rendered as SVG paths. It uses D3.js v5 to load the GeoJSON data, apply a Mercator projection with `d3.geoMercator`, and generate the path data via `d3.geoPath`. The TopoJSON library converts the datasource into GeoJSON features using `feature()`, while `d3.json` fetches the remote file before appending each path to the SVG canvas.

Cchaimmaeee

71% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to build a map visualization using D3.js, displaying geographic features as green polygons with black outlines on a blue background. It loads GeoJSON data from a remote URL and renders it as SVG paths using the `geoPath` generator with the `geoAiryRaw` projection from d3-geo-projection. The code relies on `d3.json` for data loading and topojson’s `feature` conversion, with all styling defined in external CSS.

Cchaimmaeee

71% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a map visualization using D3.js, rendering geographical features as green shapes with black strokes on a blue background. It showcases a basic choropleth-style map by loading GeoJSON data from an external URL and projecting it using the `geoAlbers` projection. The code employs `d3.json` to fetch the data and `d3.geoPath` with the projection to generate SVG paths for each feature, while `topojson.feature` converts the data into GeoJSON format. The visualization is rendered entirely as SVG within an HTML page, making it a simple, self-contained map example.

Cchaimmaeee

71% match