MIT Technicolor Campus Map

100%

MIT Technicolor Campus Map

✓ Published0🌍 Public

Last edited Feb 26, 2020

Created on Feb 26, 2020

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.

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

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

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

72% match

Loading thumbnail…

Untitled

A map of France displays colored circles sized by the percentage of survey responses from each university, with a tooltip showing the exact value on hover. The visualization loads geographic boundaries from a TopoJSON file and renders them as SVG paths using `d3.geoPath` with a custom composite projection from compmap.js. Circles are positioned via the projection, sized with `d3.scaleSqrt`, and animated on mouseover through D3 transitions, while CSV data drives the interactive tooltips.

TTimothyMiage

70% match

Loading thumbnail…

Map It

This visualization uses a natural Earth projection and an ordinal color scale to map countries by their type, with a color legend and zoom interaction. Built with D3 v5, it uses `geoPath`, `geoNaturalEarth1`, `scaleOrdinal`, and `schemeSpectral` to render SVG paths, loading country data from the world-atlas TopoJSON and TSV files. The map colors each country based on its `properties.type`, and hovering highlights the country in red. A color legend shows the scale’s domain, and zoom transforms are applied via `zoom()` events.

DDolbyref113

70% match