Skip to content

Instantly share code, notes, and snippets.

View nitaku's full-sized avatar

Matteo Abrate nitaku

  • IIT CNR
  • Pisa, Italy
View GitHub Profile
@nitaku
nitaku / README.md
Last active August 8, 2017 12:15
Collision

This example shows how to define a force to avoid collision between circles of different radii in d3 v4 force layout.

@nitaku
nitaku / README.md
Last active November 8, 2019 08:18
World map VII - continents

Merging Natural Earth's countries dataset to create a map of continents yields a map that does not correspond to any of the alternatives listed by Wikipedia for subdividing the world into continents.

This map is similar to the 7 continents convention, but it portrays the Russian Federation and French Guyana (plus many small islands) as part of Europe. A curious continent called "Seven seas (open ocean)", grouping a few islands, can also be found in the dataset.

@nitaku
nitaku / README.md
Last active August 22, 2017 02:34
World population - geo-informed circle packing

An attempt to mix a circle packing layout with a geographical map. Population data is represented by a bubble for each country, which is then colored, grouped and displaced onto the map according to the continent it belongs to (there are a few dubious attributions, you can read about them here).

This expands upon this world map and this bubble chart, using a technique shown here to manage collisions.

Data from Natural Earth & data.worldbank.org.

@nitaku
nitaku / README.md
Last active August 7, 2017 12:47
World population - circle packing

Another take on world population as bubble areas, this time with almost no geography at all. Countries are grouped and colored according to their continent.

Data from Natural Earth & data.worldbank.org.

@nitaku
nitaku / README.md
Last active August 7, 2017 10:16
World population - bubbles without map

Population of the countries of the world, encoded as circular areas as in the previous example. This time, countries are not depicted. Bubbles are placed onto a country's centroid, and the graticule is left to help locating faraway bubbles (e.g., the pacific islands) and give a sense of geographical displacement.

@nitaku
nitaku / README.md
Last active November 8, 2019 08:25
World population - bubbles on map

This example shows bubbles with area proportional to each country's population (2016) superimposed on a world map. Bubbles are also colored according to the continent.

Showing population and geography together, this map could probably be better redesigned as a choropleth of population density. This example is an exercise to prepare for different kinds of data, for which a geographical density would not make sense.

Population data is obtained from data.worldbank.org. The name of the source is "World Development Indicators" and was last updated on 2017, August 2nd.

Based on this example about implementing a map of the world and this one about population bubbles.

@nitaku
nitaku / README.md
Last active August 4, 2017 10:23
World map VI

This iteration of a general purpose world map (see the previous attempt) adds coloring according to the color classes defined in Natural Earth's dataset, making it more like a political map.

The mapcolor7 property is used in conjunction with a desaturated version of d3's schemeCategory10 scale.

@nitaku
nitaku / README.md
Last active September 13, 2019 10:59
World map V

Continuing the series on implementing a general purpose world map (see the previous attempt), this example introduces a way to solve the placement of labels for countries with faraway territories (like France). In previous solutions, the labels were placed at the centroid of the whole MultiPolygon feature, but this time it is splitted into multiple Polygon features, each labeled independently.

A tooltip is also added to help identifying regions when zoomed out.

@nitaku
nitaku / README.md
Last active August 4, 2017 09:16
World map IV

This example tries to improve the previous one by introducing a way to show more labels as the zoom level increases. The "algorithm" is a poor man's level of detail computation that uses empirically found magic numbers with an inverse square root law. It probably would not work reasonably in other cases.

Also, a minor bug is solved: Apparently, vector-effect: non-scaling-stroke does not work with , so the world's outline was not scale independent. This is solved by creating two different paths without relying on .

@nitaku
nitaku / README.md
Last active August 3, 2017 20:47
World map III

An improvement upon the previous example. A Natural Earth dataset is transformed into topoJSON while keeping the original properties. This lets it possible to display labels even for the countries that have no ISO code (stylized in italics in the map).

These are the commands used to prepare the data:

wget http://naciscdn.org/naturalearth/50m/cultural/ne_50m_admin_0_countries.zip
unzip ne_50m_admin_0_countries.zip
ogr2ogr -f GeoJSON ne_50m_admin_0_countries.geo.json ne_50m_admin_0_countries.shp
geo2topo -q 1e5 countries=ne_50m_admin_0_countries.geo.json > ne_50m_admin_0_countries.topo.json