d3-geo
d3-interpolate-path
d3-geo | d3-interpolate-path | |
---|---|---|
6 | 4 | |
999 | 312 | |
-0.2% | - | |
4.8 | 0.0 | |
24 days ago | over 1 year ago | |
JavaScript | JavaScript | |
GNU General Public License v3.0 or later | BSD 3-clause "New" or "Revised" License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
d3-geo
-
75 Blog Posts to Learn Data Visualization
This tutorial will show you how to convert publicly available shapefiles to TopoJSON to create interactive maps with d3/d3-geo. I will show you how to do this without the use of the command line so you can get into experimenting with d3 as fast as possible. If you are interested in working with shapefiles and TopoJSON in a more advanced fashion, I suggest you take a look at Mike Bostock’s recent multipart tutorials on command-line cartography.
-
Open Source Adventures: Episode 28: Introduction to D3
geographical data handling system
-
I built a full stack website where you guess the country based on its music!
For the globe spinning, I used d3 and topojson to render the world at whatever projection/rotation/etc I give it. Then, using requestAnimationFrame, every frame I slightly rotate the world. Then the "water" behind it is just a blue circle that has hidden overflow.
-
[OC] The Hague Schematic Tram Map Compared to the Geographic Map
Using a d3-geo we make projection and a path generator to 'draw' the geographic lines
-
My lockdown side project: An interactive vintage map builder
Thanks for the compliments! The territory data is coming from https://github.com/aourednik/historical-basemaps, I use this data to render an SVG map with D3.js. This is pretty powerful since you can control every part of the rendering mechanism. With D3-geo you can easily do the projections and graticule.
d3-interpolate-path
-
[OC] The Hague Schematic Tram Map Compared to the Geographic Map
Using d3-transition and d3-interpolate-path I interpolate between the path commands of both datasets.
-
Rotterdam metro map layout compared to actual geographic layout
Source: Schematic transit diagram from Wikipedia: Rotterdam Metro, geographic transit lines from OpenStreetMap Tools used: QGIS for cleaning geographic data, VS Code for editing the schematic SVG, JavaScript, D3.js, d3-interpolate-path
-
[OC] Rotterdam Subway Map Compared to the Geographic Map
That's a good idea, I've thought of it while making it too. Right now all points in the lines are used as 'control points' for morphing (using d3-interpolate-path for those interested) . Some segments animate a little off because the number of points between the geographic and schematic vary too much. To only morph the segments between stations, I'd have to write a custom interpolation function, which is likely very hard! I might take a shot at it one day though. The other option is to add points to the schematic lines paths (using a tool like SVG path editor), which is very tedious and not very precise either.
What are some alternatives?
react-simple-maps - Beautiful React SVG maps with d3-geo and topojson using a declarative api.
d3-transition - Animated transitions for D3 selections.
topojson - An extension of GeoJSON that encodes topology! 🌐
amusicalplanet
historical-basemaps - Collection of georeferenced boundaries of world countries and cultural regions for use in mapping historical data on global or continental scale
sea-labels - GeoJSON of multilingual sea labels positioned with curved lines
d3-format - Format numbers for human consumption.
d3-scale - Encodings that map abstract data to visual representation.
Data-Visualizations-Medium - Understanding Data and Machine Learning Models with Visualizations
polylabel - A fast algorithm for finding the pole of inaccessibility of a polygon (in JavaScript and C++)
d3-interpolate - Interpolate numbers, colors, strings, arrays, objects, whatever!