Fork of d3.js with leaflet.js

100%

Fork of d3.js with leaflet.js

✓ Published0🌍 Public

Last edited Oct 15, 2022

Created on Oct 15, 2022

This example overlays red SVG circles on an OpenStreetMap tile layer using D3.js and Leaflet.js. It loads geographic coordinates from circles.json and renders each point as a fixed-radius circle positioned via Leaflet’s `latLngToLayerPoint` projection, which updates on map view changes using the `viewreset` event. The visualization demonstrates how to combine D3’s data-binding and SVG manipulation with Leaflet’s interactive map APIs for custom geographic overlays.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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

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

80% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal geographic visualization using D3 v7, rendering a red point at coordinates [0,0] on a Mercator-projected map. It creates an SVG canvas, applies `d3.geoMercator` for projection and `d3.geoPath` to generate the path data for the point. The circle is drawn as a single SVG path with a red fill and black stroke. The code highlights the basic setup for projecting geographic coordinates into SVG paths using the D3 library.

NNigel

79% match

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and arrange multiple colored circles on an SVG canvas using D3.js. It shows a data-driven approach where each circle’s position, size, and color are defined in a JavaScript array. The code uses D3’s `select`, `selectAll`, and `join` methods to bind data to circle elements, then sets attributes like `cx`, `cy`, `r`, and `fill` via method chaining. The visualization highlights D3’s general update pattern and hot-reloading workflow, with a light green background and semi-transparent circles for overlap effects.

RRohithNaiduDevareddy@my.unt.edu

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

76% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue spherical backdrop. It uses D3.js v5’s `geoPath` and `geoNaturalEarth1` projection to generate geographic outlines from the world-atlas TopoJSON dataset. The code also loads the TopoJSON library to extract country features, then appends each path to the SVG container. The visualization demonstrates a straightforward choropleth-style map without interactivity, emphasizing the projection and vector rendering pipeline.

SSnapika

75% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green against a blue oceanic sphere. It uses D3 v5 and the topojson library to load and parse world-atlas data from an external URL, then projects the geographic features with a natural Earth projection and draws them using d3.geoPath. The map is generated entirely in the browser from TopoJSON data, with a simple CSS-styled SVG output.

DD3React

75% match

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and update SVG circles with D3.js, using a data-driven approach where each circle’s position, radius, and fill color are bound to an array of objects. The code employs D3’s `select`, `selectAll`, `data`, and `join` methods to manage DOM elements, while method chaining sets circle attributes like `cx`, `cy`, `r`, and `fill`. It also shows how to set the SVG container’s dimensions from the parent element’s client size. The visualization serves as a tutorial illustration of D3’s general update pattern, with data defined inline rather than loaded externally.

RRohithNaiduDevareddy@my.unt.edu

75% match