Cartophile

@Cartophile·6 public vizzes

MM Basic D3 map (Robinson) d3v4

This example displays a Robinson projection world map, rendered as grey SVG paths, with populated places plotted as red or purple circles sized by population. The code uses `d3.geoRobinson()` and `d3.geoPath()` from D3 v4, along with the `d3-geo-projection` extension. It loads GeoJSON data for world boundaries and populated places from two remote URLs. Circle radii reflect `pop_max`, while `megacity` status determines color, and points are positioned by passing coordinates through the projection. All rendering occurs in SVG within a full-page viewport.

Sep 11, 2017

Loading thumbnail…

Leaflet starter MM2

This example displays a close-up terrain map of Paris, centered on coordinates [48.8566, 2.3522] at zoom level 15. It uses the Leaflet JavaScript library (v0.7.7) to create a map instance and add a tile layer from Stamen’s terrain tiles, with attribution to OpenStreetMap contributors. The page is styled with a fixed full-screen layout, and the map fills the entire viewport. The code loads Leaflet’s CSS and JS from a CDN and then calls `L.map` and `L.tileLayer` to render the map.

Sep 10, 2017

Loading thumbnail…

Leaflet starter MM

This example demonstrates a minimal interactive map centered on coordinates [49, 50, 3], rendered with the Leaflet JavaScript library. It displays a Stamen Terrain tile layer with OpenStreetMap attribution, filling the entire viewport via a styled `#mapdiv` element. The code sets up the map instance using `L.map().setView()` and adds the tile layer with `L.tileLayer().addTo()`. The map supports standard pan and zoom interactions, relying on Leaflet’s core API rather than additional plugins or data sources.

Sep 10, 2017

Loading thumbnail…

World map economy

This example presents a world map visualization focused on economic data, embedding an interactive map created with CartoDB’s builder interface. The page uses d3.v4 to load and structure the environment, but the core rendering is handled by an external iframe that pulls from a Carto map. The visualization displays geographic regions with economic indicators, allowing users to explore the data through Carto’s interactive mapping tools. The code relies on d3’s selection and utility functions for DOM setup, while the primary map rendering occurs outside d3’s native drawing capabilities.

Sep 10, 2017

Loading thumbnail…

Map test

This example displays a full-screen interactive map embedded from Carto Builder, presenting geographic data in a standard tiled web-mapping interface. The page itself uses an iframe element to load the external Carto visualization, while D3 v4 is loaded via a script tag but is not actively used for rendering or interaction. The map includes pan and zoom controls provided by the Carto platform, and the overall layout is fixed to the viewport with zero margins for a seamless presentation. The code primarily demonstrates a simple integration pattern between a hosting page and a third-party mapping service, rather than a custom D3 visualization.

Sep 10, 2017

Loading thumbnail…

Bham block 1

A scatterplot of Gapminder data shows average GDP per capita against life expectancy for each country, with circle size encoding population and color indicating the region. The visualization uses D3 v4 to load the CSV and append SVG circles, scaling positions with `d3.scaleLinear` for the x- and y-axes and determining radius from the raw population value. Country labels and axis annotations are commented out, leaving the bare plot unadorned.

Sep 10, 2017