Liddler

@Liddler·6 public vizzes

Basic D3 map (Robinson) d3v4

This example shows a world map and its populated places, with the landmasses filled in red and each city marked by a purple circle. It uses the D3 v4 library with the `d3.geoMercator` projection and `d3.geoPath` to render geographic data from a GeoJSON file containing 50m populated places. The map is drawn as an SVG path, while city coordinates are projected onto the same projection to position the circles. The code relies on `d3.json` to load the external dataset and includes the `d3-geo-projection` plugin.

Sep 10, 2017

Loading thumbnail…

Basic D3 map (Robinson) d3v4

This example shows a basic world map in the Robinson projection, displaying geographic points as red paths and purple circles overlaid on the map. The code uses D3 v4 with the `d3.geoPath` API, along with the `d3.geoMercator` projection, despite the title referencing Robinson. It loads GeoJSON data from an external URL containing populated places, rendering both the map outline and the location points. Circle positions are calculated by projecting each feature’s coordinates through the projection function.

Sep 10, 2017

Loading thumbnail…

Basic D3 map (Robinson) d3v4

This example displays a basic world map rendered with the Robinson projection, a compromise projection that reduces distortion of area, shape, and distance. The visualization loads a GeoJSON dataset of world countries and draws the map as a single SVG path. It uses D3 v4 with the `d3.geoRobinson` projection and `d3.geoPath` to generate the path data, with the `d3-geo-projection` module providing the projection. The map is centered and scaled within an 800 by 500 pixel SVG canvas.

Sep 10, 2017

Loading thumbnail…

Leaflet starter

This example demonstrates a basic interactive map centered on Vancouver, Canada, using the Leaflet JavaScript library. It initializes a map view with coordinates [49, -123] at zoom level 10, then adds a tile layer from Thunderforest’s “spinal-map” style. The map renders OpenStreetMap data as background tiles, with the `L.map` and `L.tileLayer` APIs handling map creation and layer management. The page is styled to fill the entire viewport, and the map div occupies full height. No additional data or interactions are included beyond the base map display.

Sep 10, 2017

Loading thumbnail…

fresh block

A scatterplot maps average GDP per capita against life expectancy, with circle size encoding population and color indicating geographic region. The SVG visualization uses D3 v4’s `scaleLinear` and `scaleSqrt` to position and size circles, loading data from `gapminder_avg.csv`. Each point is rendered with a black stroke and fill opacity adjusted for overlap, revealing broad correlations between wealth, longevity, and population across nations.

Sep 10, 2017

Loading thumbnail…

fresh block

A single SVG canvas displays the text "hello, my name is Rina." at a fixed position, using the generic D3 v4 selection and append methods from the `d3.select` and `svg.append` APIs. The visualization’s data source is the hardcoded string itself, with rendering handled by D3’s SVG text element. The code sets the text’s y coordinate to 200 and x to 120, although the font-size is set to a negative value (-390) and the font-family is "fazingsone", which are unusual properties. No interaction or dynamic data is present.

Sep 9, 2017