My first map

100%

✓ Published0🌍 Public

Last edited Jan 15, 2016

Created on Jan 15, 2016

This map displays the neighborhoods of Boston as a static set of gray polygons. The visualization uses D3.js version 3.5.5, with the `d3.geo.albers` projection and `d3.geo.path` to render the geographic features. It pulls spatial data from a `neighborhoods.js` file, sourced from a gist by Sokrates86. The map is centered on Boston coordinates, and the code was built with Blockbuilder.org.

AI-generated description

Built with blockbuilder.org

Similar vizzes

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

77% match

Loading thumbnail…

Massachusetts

This example renders a static map of Massachusetts using a Mercator projection. The code loads a GeoJSON file containing the state’s boundary geometry and displays it as an SVG path. It applies a light gray fill and dark stroke via D3’s `geoPath` and `geoMercator` APIs, centering the map at Boston with a fixed scale.

Ssjpeno@wpi.edu

72% match

Loading thumbnail…

Cheap map

This example displays a geographic map of Massachusetts towns, colored light green with black borders, that turns red on hover. The visualization is built using D3 version 5 and renders as an SVG element. It loads GeoJSON data from a remote GitHub gist containing town boundaries and projects it using D3’s map projections, specifically `geoConicConformal` and `geoAlbersUsa`. The code defines SVG classes for styling the map’s countries and a hover effect, though the actual rendering of the map geometry is not yet implemented in the provided JavaScript snippet.

NNilla

69% match

Loading thumbnail…

Massachusetts Towns

This example visualizes the towns of Massachusetts as a choropleth-style map using SVG. It loads GeoJSON town boundaries from a remote gist and renders them as filled paths with black strokes via `d3.geoPath`, projected using `d3.geoConicConformal` with parameters fit to the state. The map is drawn into a dynamically created SVG element sized 800×400, with the projection fitted to the data extent. D3 v5 and TopoJSON are used for data loading and path generation, though the code appears incomplete as only the town polygons are shown without additional styling or interactivity.

NNilla

69% match

Loading thumbnail…

Dot density map

This dot density map visualizes population distribution across Massachusetts census blocks using one dot to represent two people. The code renders polygons to an offscreen canvas with unique colors per feature, then uses Canvas `getImageData` for point-in-polygon tests to place random dots within each block’s bounds. It draws the final dots on a separate canvas using the Albers projection and `d3.geo.path`, with data from a TopoJSON file (`block.json`). The map uses colors and the D3 v3 library.

AAnimesh Nautiyal

68% match

Loading thumbnail…

Fork of Map of top-rated restaurants in Greater Boston

This map visualizes the distribution of top-rated restaurants (4 stars or above) across Greater Boston towns, using a sequential color scale from light to dark red to indicate counts. The choropleth map renders town boundaries with `d3.geoPath` and a `geoIdentity` projection, coloring polygons grey where no data exists. Hovering over a town displays its name and count in a styled tooltip. The data comes from the public Yelp dataset, processed with D3’s `csv` and `json` loaders, and the map supports zoom interactions via `d3.zoom`.

Cchipbrownlee

67% match

Loading thumbnail…

v1 - MA Map

This visualization shows a map of Massachusetts with the state’s geographic boundary drawn using hardcoded GeoJSON data, projected with d3.geoMercator and rendered via d3.geoPath. The map is centered on Boston, where the crash data originates, and displays the state outline with a black stroke over a white background. The code uses d3.select and data binding to append the path elements, though it does not yet plot the actual crash locations or temporal patterns from the Boston Crash Dataset.

Ssjpeno@wpi.edu

67% match

Loading thumbnail…

v5 - Boston Crash Map

A geographic map of Boston displays crash locations as points against a basemap of neighborhood boundaries. The visualization shows the spatial distribution of incidents across the city, with individual crashes differentiated by mode type—motor vehicle, pedestrian, or bicycle—using a Mercator projection. Built with D3.js, it uses `geoMercator` and `geoPath` to render the neighborhoods, while crash coordinates from a Boston Crash Dataset are projected as points.

Ssjpeno@wpi.edu

67% match