Creating visualizations like this one but using canvas is possible.
Since the Canvas element hasn't got the getTotalLength() method as it exists in SVG, I'm using the svg-path-properties, that allows this calculations with a good precision (<0.1px), as well as allowing the getPointAtLength function too.
| licence: mit |
This file shows how to use the geoConicConformalSpain projection from d3-composite-projections.
To change the file, edit draw.js and run
browserify draw.js| uglifyjs > bundle.js
The dependencies are installed with:
npm install d3-composite-projections d3-geo d3-request d3-selection d3-transition topojson
| license: mit |
Example to ilustrate this question at gis.stackoverflow.
The solution is using a combination of lineIntersect and lineSlice. The first one gives the points where the line and the polygon intersect. The second takes the part of the polyline btween the two points.
If the result is more complex (i.e. the resulting intersection is a polyline), the algorithm should be repeated for each part in the polygon.
| license: mit |
This example, inspired from Mike Bostock's Non-contiguous catrogram example, shows the percentage of people in Catalonia able to speak in Catalan in every comarca (data from IDESCAT).
But the Catalan population is not evenly distributed, but concentrated around Barcelona and surroundings. So comparing the region colors can lead to wrong conclusions, since they don't represent comparable amount of people.
When the Resize to population density button is pressed, the size of each coamrca is reduced according to its population density. The maximum density corresponds to the Barcelonès, which is not reduced. When the sizes are changed is much easier to compare the number of people.
The size is not reduced linearly, but applying the square root, because Catalonia is so unevenly populated that it was difficult so see anything outside Barcelona's region.
| licence: mit |
This file shows how to use the conicConformalPortugal projection from d3-composite-projections. The example is the same as the one at this block, but with this new composite projection gives a much better result.
The previous example showed how to intersect a line with a polygon, but the situations can be more complicated, as shown in this example.
The solution is using the lineSplit function for each part of the multilinestring and selecting the ones that fit the needs. The first part can be inside or outside the polygon, depending on the first point. Detecting this, is easy to get only the needed parts.
