Skip to main content
SimilarExport ZIP
100%

MIT Technicolor Campus Map

✓ Published0🌍 Public
JJMason88
Last edited Jun 5, 2019
Created on Jun 5, 2019

This map visualizes MIT campus buildings as colorful, zoomable SVG paths, with each building colored by its OpenStreetMap tags. It uses D3 v4’s `d3.geoMercator` projection with `d3.geoPath` to render TopoJSON data, and `d3.zoom` to enable panning and scaling. Building colors come from `d3.scaleOrdinal` with `d3.schemeCategory10`, and the map adjusts to window size on resize. Data originates from an OpenStreetMap export simplified via Mapshaper.

AI-generated description

Colorful exploration of buildings data from OpenStreetMap.

OpenStreetMap export of MIT campus area.

Exported from OpenStreetMap, then simplified and converted to TOPOJSON format using Mapshaper.

MIT Licensed

Similar vizzes

Loading thumbnail…

MIT Technicolor Campus Map

This visualization displays a colorful map of MIT campus buildings sourced from OpenStreetMap, with each structure filled using a categorical color scale based on its tags. The example uses D3 v4 and TopoJSON to load and render the geographic data as SVG paths via `d3.geoPath` with a Mercator projection, while `d3.zoom` enables interactive pan and zoom. The map is fitted to the browser window and redrawn on resize, and building colors are assigned by `d3.scaleOrdinal` with `d3.schemeCategory10`, with each path’s fill derived from the JSON-stringified property tags.

Ssingularity6033
96% match
Loading thumbnail…

MIT Technicolor Campus Map

This map of the MIT campus visualizes building footprints from OpenStreetMap data, with each building’s fill color determined by its tags via a `d3.scaleOrdinal` color scheme. The visualization uses the `d3.geoMercator` projection and `d3.geoPath` to render the geographic features as SVG paths, while a `d3.zoom` interaction enables pan and zoom through transform updates. The data, simplified to TOPOJSON format, is fetched remotely and filtered to exclude relation features before display.

CCurran Kelleher
95% match
Loading thumbnail…

MIT Technicolor Campus Map

This map of the MIT campus displays buildings as colorful, semi-transparent polygons, with each color assigned to a unique set of building properties from OpenStreetMap. The visualization is rendered using SVG through D3.js v4, employing `d3.geoMercator` for projection and `d3.geoPath` to draw shapes from TopoJSON data. Users can pan and zoom interactively via `d3.zoom`, with the viewport initially centered and scaled to the campus. A sequential color scheme from `d3.schemeCategory10` differentiates the structures.

JJovenne Naldrey Sapuay
95% match
Loading thumbnail…

MIT Technicolor Campus Map

This interactive map of MIT’s campus visualizes building footprints from OpenStreetMap data, which is imported as TopoJSON and converted to GeoJSON features. Each building’s color is assigned using `d3.scaleOrdinal` with `d3.schemeCategory10`, based on its attribute tags. The view supports zoom and pan through `d3.zoom` and `d3.zoomIdentity`. Geometries are drawn as SVG paths using `d3.geoPath` with the `d3.geoMercator` projection, and the map automatically fits to the window size.

JJovenne Naldrey Sapuay
94% match
Loading thumbnail…

Massachussets

This example visualizes Massachusetts school districts as a choropleth map, with each town randomly assigned one of three colors from a categorical scale. The geographic boundaries are rendered using a conic conformal projection through `d3.geoPath`, while React manages the component structure. Data is loaded from a local TopoJSON file containing town boundaries, and the color mapping is applied via `d3.scaleLinear`. The map is displayed as SVG paths with black strokes highlighting district borders.

11993-INDALKAR
70% match
Loading thumbnail…

Vector Tiles

This interactive map displays vector tiles of road networks from OpenStreetMap, rendered as SVG paths. It uses Mapzen’s vector tile API to load road data, and d3.geoMercator’s projection with a d3.tile-based tile system to fetch and display 256×256 tiles. The visualization supports pan and zoom via d3.zoom, with a matrix3d transform for scaling and translation. Mouse movement updates a location readout showing latitude and longitude, computed by inverting the projection.

Mmbostock
70% match
Loading thumbnail…

Portland Map

This visualization shows a map of Portland neighborhoods using a conic equal-area projection, rendered as stroked SVG paths. It uses `d3.geoPath` to project and draw the neighborhood boundaries from TopoJSON data, with the geographic projection centered on Portland. The map is displayed in a React component that fetches and parses the data via `d3.json` and `topojson.feature`. The styling applies a teal stroke to the paths, creating a clean, minimal map view.

DDINESH SAI BOPPANA
70% match
Loading thumbnail…

Let's make a map with D3.js!

This map of the world uses D3.js to project geographic data from the world-atlas TopoJSON dataset. The visualization renders countries as light green paths with dark, semi-transparent borders, over a blue spherical backdrop. It employs D3's geoEqualEarth projection and geoPath to convert TopoJSON features into SVG paths, while the topojson library's feature function handles the data transformation.

NNaveenaS12
70% match