Given a set of (x, y, z) coordinates, how would I go about creating a contour map?
Would be nice to know how to implement in d3 but wouldn't mind trying to implement it myself if I had some direction.
For d3 users, can I create a contour map using d3.geom.contour() and jasondavies'
conrec.js:
https://github.com/jasondavies/conrec.js
Essentially, I'd like to replicate this contour map using d3.js: http://beaugunderson.com/routes/
It looks like this would be very easy with conrec.js. If you pass the data in the form that you have it, you can get a list of paths by calling .contourList() on the result. That you should be able to pass without modification to a d3 .data() call. All you should need to do is supply a path generator that maps the coordinates in the data to screen coordinates.
Plotly.js is based on d3.js and provides contour plots. See for example:
https://plot.ly/javascript/contour-plots/
Plotly.js: How to avoid overlapping contour lines?
How to apply plotly.js to an existing svg group <g> as target instead of applying it to a target <div> element?
There is also a contour plugin for d3.js (which I did not use yet):
https://github.com/d3/d3-plugins/blob/master/geom/contour/contour.js
And an example:
http://bl.ocks.org/mbostock/4241134
Related
I want to make a system where a user will be able to draw a hexagonal grid. The regions and their coordinates will be stored in Database. We are thinking to implement H3 libary for this. How will be the library help is in making H3 hexagons all over the country?
I have made a node project with h3-js library but can't figure how which function to actually render or draw hexagons over a projection/map.
In general, to render H3 cells, you can get the vertexes using h3.h3ToGeoBoundary(cell) (v3) or h3.cellToBoundary(cell) (v4). This gives you an array of [lat, lng] pairs; passing true as the second argument gives you [lng, lat] pairs and closed loops appropriate for GeoJSON. You can use the geojson2h3 library to facilitate the process of converting one or more H3 cells to GeoJSON, which can be rendered to a map using Mapbox, Google Maps, or a variety of other mapping tools.
See https://observablehq.com/#nrabinowitz/h3-tutorial-heatmap-rendering?collection=#nrabinowitz/h3-tutorial for an example of rendering cells to a map using Mapbox.
Recently I found this tuto for create custom for with CSS grid, I think it's will help you for your problem :
https://css-tricks.com/css-grid-and-custom-shapes-part-1/#aa-css-grid-of-hexagons
How might I use the curve factories in d3-shape to smooth / interpolate geojson lines and polygons? As far as I understand the API, I can pass a list of coordinates, get an SVG line string back from:
var line = d3.line(coords).curve(d3.curveCatmullRom.alpha(0.5));
What I want is an array of coordinates that I can construct a LineString from.
I think I need to define a context that returns coordinates. There is plenty on rendering from geojson to svg linestrings but I can't find any information on rendering to geojson coordinates.
How to create stackbar chart in raphael js. I know it in D3js but could not find any way to create it in raphael js. Can some one share some inputs to get it done.
Either use g.raphael library, or just implement it yourself, all you need is to draw rectangles of different height or width on different positions with labels on them.
I quite like this graphic by NYtimes. This one I think is created with illustrator but would it be possible to create something like this with d3.js? Is there a working example of this somewhere?
It looks like a voronoi treemap. It is created by recursively subdivide the area with a weighted voronoi diagram:https://www.jasondavies.com/voronoi-treemap/. For instance you can substract the weight from the euclidian distance and skipping overlapping points.
Is it possible to use D3 for polylines in Leaflet?
What I am trying to achieve is a less accurate, but more stylised, route display. I'd like to use d3's interpolation('monotone') on a line (or path) which runs through each marker point in Leaflet and creates a smooth, curved line.
The only example I have found close to this is http://erasmus.ahoi.in which creates nice smooth arcs using d3 and canvas.
Does anyone know of any examples of this?
I have created a fiddle with some markers on a Leaflet map in case someone wants to give it a shot: http://fiddle.jshell.net/zw8TR/10/
Mike Bostock (the creator of D3) has written a nice tutorial on how to use D3 in combination with Leaflet. He uses GeoJSON polygons in his example but they can easily be swapped with GeoJSON linestrings, which you would be needing.
See: http://bost.ocks.org/mike/leaflet/