rveciana

Kufic calligraphy has impressed me since long ago. This example is from the walls of the Gudi Khatun Mausoleum in Nakhchivan, Azerbaijan.

The text is animated in the correct order to understand how the words are ordered. The meaning of the text is

There is no God but God, and Muhammad is His prophet. May God bless him.

First, I made the SVG image from the pictures I found. The elements must be lines so they can be animated this way. That's why kufic calligraphy is good for the example, since all the strokes have the same width.

rveciana

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.

rveciana

This example is the same as this Jason Davies GIST, but using Canvas instead of SVG.

How is the color selected:

The place was easy to find

context.fillStyle = color(d.color = d3.max(neighbors[i], function(n) { return countries[n].color; }) + 1 | 0);

I had to think for some time to understand how does this work. Let's separate it:

rveciana

licence: mit

rveciana

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

rveciana

license: mit

rveciana

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.

rveciana

license: mit

rveciana

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.

rveciana

licence: mit