MIT Technicolor Campus Map

100%

MIT Technicolor Campus Map

✓ Published0🌍 Public

Last edited Sep 4, 2019

Created on Sep 4, 2019

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.

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

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

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

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

67% match

Loading thumbnail…

Mass Map 2

This map displays Massachusetts school districts as geographic regions, using an equal Earth projection to draw each district boundary. The visualization loads TopoJSON data from a GitHub source, then converts it to GeoJSON using the `feature` function before rendering paths with `d3.geoPath`. The map is built with React components and D3 v5, with SVG paths styled using teal strokes and fills from the associated CSS file.

Wwenleicao

66% match

Loading thumbnail…

d3 Choropleth Map

This example displays Massachusetts town boundaries as a choropleth map using two different projections: a U.S.-oriented Albers projection and a Massachusetts-specific conic conformal projection. The code loads TopoJSON geographic data and renders map outlines with `d3.geoPath` and `d3.geoConicConformal`. A color legend module (`colorLegend`) adds a visual key with circles and text, while hover interactions highlight regions via CSS. The visualization uses SVG rendering with D3 v5 and TopoJSON utilities.

NNilla

65% match