leaflet example

100%

leaflet example

✓ Published0🌍 Public

Last edited Sep 17, 2018

Created on Sep 17, 2018

This example shows multiple datasets overlaid as circles on an interactive Leaflet map, with each dataset visualized using a different scale type. It uses the Leaflet library for map tiles and layers, while D3 v5 parses CSV data embedded in `<aside>` elements and binds it to SVG circle markers. The code assigns numerical or categorical attributes to color scales (threshold, quantize, or ordinal) and renders a legend for each group. Map layers for streets, satellite, and grayscale are togglable, and tooltips display an optional address attribute from the data.

AI-generated description

  //////////////////////////////////////////////////////////////////
  // Usage:
  //
  // data: csv file with 
  //  long, lat for position
  //  one numerical or categorical attribute to be visualized
  //  + (optional) one attribute calles "address" to be shown in tooltip
  // 
  // 1. set class of <aside> element above to match the name of the data
  // 2. insert data into aside element
  // 3. specify the following dp (data parameters) 
  // 4. initialize map center with [lat, long]
  // 
  // options for scales:
  // "scaleThreshold", "scaleOrdinal", "scaleOrdinal" or "scaleQuantile"
  //////////////////////////////////////////////////////////////////

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

leaflet and d3.legend

This example combines Leaflet and d3.legend to place three distinct legends on an interactive map, each corresponding to a separate dataset rendered as SVG circles. It shows how to map numerical, quantized, and categorical values to circle sizes and colors, with data embedded in HTML aside elements. The code uses Leaflet for map tiles and layers, D3 v5 for data parsing and scale construction, and the d3-legend plugin to generate the legends. Three datasets are processed, each with its own scale type (threshold, quantize, and ordinal), and their circles are added to layer groups while legends are positioned in a separate container.

EEE2dev

87% match

Loading thumbnail…

leaflet and d3.legend

This example demonstrates how to combine Leaflet maps with d3.legend to create interactive circle markers colored by a D3 scale, with separate legends for each data group. It shows three datasets (BK, KK, KI) rendered as SVG circles on a map, each using a different scale type—threshold, quantize, and ordinal—to map values to colors. The code uses Leaflet’s `L.circle` for markers and tile layers, D3 v5 for scales, and the d3-legend plugin’s `d3.legendColor` to generate legends. Data is parsed from hidden HTML `<aside>` elements containing comma-separated values, and a layer control toggles base maps and overlays.

EEE2dev

87% match

Loading thumbnail…

D3 + Leaflet

This example combines D3 v3 and Leaflet to show interactive pie charts on a map. Hovering over a Leaflet marker creates a D3-generated donut chart in a tooltip div, displaying the percentage bound to that marker’s options via `L.marker(latlng, { achieve: d.achieve })`. The map offers OSM, Thunderforest, and USGS tile layers, with marker data accessed through `event.target.options`. D3’s `d3.svg.arc` and `d3.layout.pie` render the SVG chart.

11Cr18Ni9

77% match

Loading thumbnail…

Leaflet Map Example

This example shows a Leaflet map with interactive markers and a circle overlay, plotting applicant counts per country from a CSV dataset. Using the Leaflet JavaScript library, it renders an OpenStreetMap base layer and adds markers for each data point, binding popups to display country-specific information. The code also demonstrates adding a styled circle geometry to the map, and it imports utilities from TopoJSON for potential geospatial operations.

Kklumng

77% match

Loading thumbnail…

leaflet - Markers on map

This example uses the Leaflet mapping library to place interactive markers on a tile-based map of Tokyo. A small CSV dataset provides the station names and geographic coordinates for each marker, which are loaded with d3.csv. The map background is rendered using Mapbox tile layers, and each station marker is bound to a popup that displays its name. The visualization combines Leaflet’s map interactions with D3’s data-loading capabilities to create a straightforward geographic point display.

HHirosaji

76% match

Loading thumbnail…

D3 + leaflet + GForm

This example combines D3.js, Leaflet, and the Google Maps Geocoding API to visualize geocoded data from a Google Form spreadsheet on an interactive map. Circles are drawn on a Leaflet map using D3, with their positions updated based on the map view. The circles' fill colors correspond to categories in the data, and hovering over a circle triggers a smooth elastic transition that enlarges it, while clicking displays the venue's name, formatted address, and timestamp in an HTML tooltip panel. The map and circles animate in response to panning and zooming, and the data is loaded dynamically via Tabletop from a public Google Sheet.

FFedericopvs

75% match

Loading thumbnail…

d3.js with leaflet.js

This example shows a map centered on Wellington, New Zealand, with five semi-transparent red circles overlaid at specific coordinates, demonstrating how D3.js can be used to render SVG elements on top of a Leaflet map. The code initializes a Leaflet map with an OpenStreetMap tile layer, then loads geographic data from a `circles.json` file. D3.js selects the map's SVG layer, appends a group, and dynamically creates circle elements for each data point, converting the latitude and longitude coordinates into layer points using Leaflet's `latLngToLayerPoint` method to position them correctly. The circles update their positions in response to the map's `viewreset` event.

BBolarinwa Omoware

74% match

Loading thumbnail…

d3.js with leaflet.js

This example demonstrates how to combine Leaflet.js and d3.js so that SVG circle markers stay fixed to geographic coordinates while maintaining a constant screen size. It loads five point locations from a local circles.json file and displays them as red, semi-transparent circles over an OpenStreetMap tile layer. The code uses Leaflet’s map.latLngToLayerPoint() method to convert geographic positions into pixel coordinates within the viewreset event handler, applying the result as SVG transform translations. The implementation relies on d3.json for data loading and d3 selections to append and update the circles.

Dd3noob

74% match