MIT Technicolor Campus Map

100%

MIT Technicolor Campus Map

✓ Published5🌍 Public

Last edited Dec 16, 2020

Created on Jun 4, 2019

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.

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.

For more information about how the data was derived, see Gist:MIT Campus Map Data.

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

95% match

Loading thumbnail…

MIT Technicolor Campus Map

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.

JJMason88

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

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

93% match

Loading thumbnail…

Ok, what about a color legend

This example displays a Mercator projection world map using d3.geoPath and TopoJSON world-atlas data, overlaid with circles representing video views from the Harvardx/MITx online course dataset. An ordinal color scale identifies courses, and a d3.scaleSqrt sizes points by view count. The React component renders an SVG with interactive hover states: a color legend built with React elements allows filtering and fading of map circles to highlight specific courses through d3.csv-loaded data.

Ssophburke

69% match

Loading thumbnail…

Why Losing Details?

This example shows a set of MIT building footprints rendered as black-outlined, semi-transparent polygons on an orthographic projection. The visualization attempts to display fine geometric details from a TopoJSON file, but the author notes that many details are lost in the rendering. Users can drag to rotate the globe and zoom to scale the projection, with the view updating via `d3.geoPath` and `d3.geoOrthographic`. The code uses `topojson.feature` to extract building geometries and applies SVG paths for display.

CCurran Kelleher

69% 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

69% 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

69% match