eurostat / eurostat-map.js Goto Github PK

Reusable library to quickly create and customise web maps showing Eurostat data directly retrieved from Eurostat database.

Home Page: https://github.com/eurostat/eurostat-map.js

License: Other

JavaScript 96.40% HTML 3.59% CSS 0.01%

eurostat map nuts web-mapping svg topojson choropleth choropleth-map proportional-symbol-maps

eurostat-map.js's Introduction

eurostat-map.js

Quickly create and customise thematic web maps based on NUTS regions, showing Eurostat data directly retrieved from the Eurostat database.

Examples

Population density (see the code)
Population density map with dot pattern (see the code)
Population map with proportional circles (see the code)
GDP map with custom proportional symbols (see the code)
Causes of death with proportional pie charts (see the code)
Population change (see the code)
NUTS typology as a categorical map (see the code)
Focus on Spain (see the code)
20 years of GDP change in Europe (see the code)
Unemployment/population relation (see the code)
Farm sizes composition (see the code)
Livestock composition (see the code)
Sparklines: Population in Europe since 2012 (see the code)
World map (see the code)

Installation

Node.js: With npm install eurostatmap and then eurostatmap = require("eurostatmap").
Standalone: For the latest version, use <script src="https://unpkg.com/eurostat-map"></script> as shown in the examples. For a fixed version, use <script src="https://unpkg.com/[email protected]"></script>, where X.Y.Z is a version number among these ones.

Documentation

See the API reference:

Anything unclear or missing? Feel free to ask !

Technical details

Maps based on NUTS regions rely on Nuts2json API and TopoJSON format. Statistical data are accessed using Eurostat REST webservice for JSON-stat data. The data are decoded and queried using JSON-stat library. Maps are rendered as SVG maps using D3.js library.

About


contributors
version	See npm
status	Since 2018
license	EUPL 1.2

Support and contribution

Feel free to ask support, fork the project or simply star it (it's always a pleasure).

Copyright

The Eurostat NUTS dataset is copyrighted. There are specific provisions for the usage of this dataset which must be respected. The usage of these data is subject to their acceptance. See the Eurostat-GISCO website for more information.

Disclaimer

The designations employed and the presentation of material on these maps do not imply the expression of any opinion whatsoever on the part of the European Union concerning the legal status of any country, territory, city or area or of its authorities, or concerning the delimitation of its frontiers or boundaries. Kosovo*: This designation is without prejudice to positions on status, and is in line with UNSCR 1244/1999 and the ICJ Opinion on the Kosovo declaration of independence. Palestine*: This designation shall not be construed as recognition of a State of Palestine and is without prejudice to the individual positions of the Member States on this issue.

eurostat-map.js's People

Contributors

Stargazers

Watchers

Forkers

edwindj erickwang pii-analytika hypertechsa

eurostat-map.js's Issues

Cartogram map

See if and how a cartogram map could be developped. The idea is to deform NUTS regions of the map template so that their area reflects a quantitative stat value.
See for example, something to potentially reuse: https://github.com/shawnbot/topogram
See also: https://observablehq.com/search?query=cartogram

B&W pattern

Make that:
https://observablehq.com/@tmcw/b-w-choropleth

Allow user to generate small multiples

Develop a new function which replicates the functionality seen here

Build simple site with GUI for eurostat-map

Using EUI, build an interface on top of eurostat-map.js which allows the user to customize their map

Legend - proportionnal symbols

Stop using https://d3-legend.susielu.com/ which is no longer maintained (apparently). Go for something even simpler !
Adopt something more compact such as what has been done for NutsDorlingCartogram or on the right here:
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcNmBE7UgO2MJOPWfVqDZCa1KMXtzlu6AVfA&usqp=CAU
Use rounded values.
Adapt for all kind of symbols, not only circles

Several statistics maps

In order to be able to make maps based on several statistics, it is necessary to make it possible to load not only one but several statistical sources.

Examples of such maps:

proportionnal circles colored depending on evolution rate
value-by-alpha maps. See http://andywoodruff.com/blog/how-to-make-a-value-by-alpha-map/
or more generally, bi/multi-variate maps. See https://gistbok.ucgis.org/bok-topics/multivariate-mapping
maps showing one stat indicator computed on-th-fly as an aggregation of several stat variables
See all examples in: https://minds.wisconsin.edu/handle/1793/67887
...

Trivariate choropleth map

See for example:
https://ikashnitsky.github.io/2018/the-lancet-paper/

automated classification methods for choropleth maps

Currently, equal intervals and quantiles are available, besides user defined threshold.
Other automated classifications could be added:

jenks (see http://bl.ocks.org/tmcw/4969184)
standard deviation

Make application with interactivity

Use GUI components to allow users to change map parameters (Converging toward a new IMAGE ?).
Or make SVG elements (map title, etc.) editable (example: click on a text element to edit it)

Time slider
Selection of databases.

improve legend box dimension computation

See the 'TODOs' in legend.js file.
Use SVG getBBox to compute automatically the dimensions of the legend in the end, and apply this dimension to the legend box. Then, get rid of 'computeWidth' and 'computeHeight' methods. It would then no longer be necessary to indicate the legend width/height in their config.
See:

https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox
d3.select("#usefulSelector").node().getBBox();

fix pan and zoom limits to map extent

at the moment it is possible to zoom and pan until areas outside of the map bounds are visible

add different options for labelling method:

new method: labelsToShow([])

defaults to ["countries","seas"]

Export map. As an image (PNG)

The possibility to export a map as an image should be offered.
This could be done with for example https://html2canvas.hertzen.com/
See an example of how to that for a table: http://bl.ocks.org/jgaffuri/6705b7ca387cb9c20ee17703903b117f

diverging color ramps for choropleth maps

See: https://github.com/d3/d3-scale-chromatic/blob/master/README.md#diverging
The default value of central value should be 0. Other possibilities should be average, mean or user defined.

Continuous color ramps for choropleth maps

Currently, only discrete classifications are available for choropleth maps.
Continuous color ramps, with different scaling functions (linear, logarithmic, exponential, etc.) should be proposed.

Switzerland NUTS 1 tooltip text not shown fully

Add new map types: Value-by-alpha map

NOTE: can be addressed only after #57.

See for example: http://andywoodruff.com/blog/how-to-make-a-value-by-alpha-map/
https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3173776/

This requires using 2 statistical values for the map, one for the value (rate/share) and another one for alpha (quantity/weight).

Should be very similar to bivariate-choropleth, except it should use "fill-opacity" style property instead of color combination.

Export map. As a SVG file.

For users willing to further customise their map, a possibility to export the map as a SVG file to be edited with (for example) inkscape, should be provided.
In oder to make these SVG files thiner, it might be needed to round the coordinates first, with d3.round function.

Migration to d3 v6

Current version is 5.15.
It might be good to consider migrating to the current version of d3 which is 6.2.0: https://www.npmjs.com/package/d3

Programmatic definition of statistical data

Make it possible to define cartographic figures directly in javascript code like that:

map.setStat(
{
  LU01: 3534.345,
  DE02: 45.453,
  LV45: 6454.3534,
...
});

Rely on out._statDataIndex; attribute.

Zoom effect on stroke-width

When using the zoom, the "stroke-width" styles should be changed according to the real value specified by the user. Currently, the zoom sets the width to 1px, whatever the zoom level.

Prop symbol maps: Use color to show a second variable.

See: https://www.axismaps.com/guide/bivariate-proportional-symbols
Currently, all symbols are colored the same.
Follow the same approach as for nutsdorlingcartogram and other multivariate maps to show another stat variable as the symbol color.
This could be addressed as an enrichment of the existing "ps" map type, rather than a new one.

Example of such map:
Show a quantity (as size) and its variation (as color value).

Do not show countries

include a new geometry in nuts2json for the land mass.
show this new geometry as a background, above the sea rectangle and below the nuts/cntr geometries.
add option to show/hide country geometries
add option for the fill style of this land mass geometry.

Note that this land mass geometry is required for the value-by-alpha map. Otherwise, when changing the regions opacity, the blue of the sea will appear...

The land mass polygon could be used to make coastal margin: https://observablehq.com/@jgaffuri/coastal-margin-with-css-stroke-width

Spark lines map

This is a new type of map, were timeseries are shown directly on the map. This is pertinent to show significant and sudden changes ('explosion' and crisis effects) for some datasets. This could be used for example to show GDP evolution when a new crisis hits.

See:
https://github.com/datagistips/geosparklines/
https://datagistips.hypotheses.org/514

.psStrokeWidth not working

Proportional circle map stroke width setter only changes stroke width of legend circles:

.psStrokeWidth(0.1)

As an alternative to pie charts, use other types of shapes do show decomposition (radial pie charts, squares (flag like), etc.). See some examples here, in some images at the bottom:
https://observablehq.com/@tomshanley/cheysson-color-palettes

Make compositions possible?

compositions chroploth + prop circle
composition choropleth map showing variation (diverging colors) + rectangle/bar showing quantities +/-

Add map insets

Based on what has been recently added to Nuts2json API.

Show map data source

Currently, the source of the map information is not shown on the examples.
For maps based on eurostat data, we should have something like: "Source, Eurostat XXX" where XXX is the eurostat database code, with a link to the corresponding page on Eurostat website.
Example: https://ec.europa.eu/eurostat/databrowser/view/road_eqs_busmot_h/ for database with code road_eqs_busmot_h.

This could information be shown as part of the legend box, the bottom text (currently used for the copyright) or another map component ? Maybe another map component at the bottom right corner, or under the insets, is the most suitable.

Legends: Add "No data" box.

Add "no data" box in legends where needed (choropleth, categorical, etc.)

proportional symbols - make other symbols possible, not only circles

The "transform" attribute should be used to scale and move the group symbol instead of current circle radius.
Propose list of predefined symbols (circle, square, etc. see https://github.com/d3/d3-shape#symbols) and maybe user defined ones (as SVG paths)
Beside proportionnal symbols, vertical bars could also be proposed. In that case, the scaling of the symbol would occur only along the vertical dimension. Example: https://4.bp.blogspot.com/-IbwkPe0Cd7o/Tv74ukFKxbI/AAAAAAAAALw/hDwLkziybiw/s1600/barMap.png

Add geographical names

The map template could be enhanced by adding few geographical names such as ocean names or country names for large maps.

See for example how it could look like on country names: https://www.nytimes.com/interactive/2020/10/22/world/europe/europe-hospitals-covid.html
https://www.mapsofworld.com/europe/maps/political-map-of-europe.jpg

Some useful resources:
https://css-tricks.com/snippets/svg/curved-text-along-path/
https://vanseodesign.com/web-design/svg-text-on-a-path-part-1/
Suitable cartographic fonts could be used: https://www.typography.com/fonts/styles/cartography

Free color ramps

Currently, color ramps for choropleth maps are based on color-brewer/d3-chromatic lib.
The possibility should be given to use any kind of user defined color ramp, such as the Eurostat color ramps (already defined in eurostat-map.js).

Define map styles with CSS

Currently, map styles are defined in javascript with .style(...) functions.
It could be interesting to see if some styling parameters could be defined with CSS instead.
Check if CSS overrides the SVG styling.

Proportional pie chart map

Pie chart colors show composition. Pie chart size shows quantity.
See:
https://observablehq.com/@joewdavies/mapping-with-pie-charts-most-common-causes-of-death-in-europ
Make it a new map type.
This will certainly reuse some components from prop-symb map and stripe composition map.

Add new map types: Bivariate choropleth

See:
http://www.personal.psu.edu/cab38/ColorSch/SchHTMLs/CBColorSeqSeq.html
https://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/
https://nowosad.github.io/post/cbc-bp2/
https://www.axismaps.com/guide/bivariate-choropleth
https://observablehq.com/@benjaminadk/bivariate-choropleth-color-generator
https://stackoverflow.com/questions/52822286/d3-combine-two-colour-scales-into-one
https://www.slideshare.net/ESRI/arcgis-extensions?next_slideshow=1

Legend hover functionality not working for insets

This only occurs for certain map types, namely:

catergorical
choropleth
bivariate choropleth

It DOES work in stripe composition maps

New map type: Pie charts

see https://observablehq.com/@joewdavies/mapping-with-pie-charts-most-common-causes-of-death-in-europ

Document and comment

Comment the code
Keep documentation (README.md) progressively synchronised with latest developments, as much as possible
Keep examples progressively synchronised with latest developments, as much as possible

New map type for "value-by-alpha" maps

See for example: http://andywoodruff.com/blog/how-to-make-a-value-by-alpha-map/
This requires using 2 statistical values for the map.

Implement space as default thousands separator

The publications team for the DRYB used a space as a thousands separator. maybe we should implement this as the default?

Add new map type: Composition stripes map

This map shows the composition of something using striped texture. Each stripe represent a category. Different colors are used to differenciate the different categories. The width of each stripe is proportionnal to the share of the category in the total. The total width of the stripes for all categories is the same for all regions (equal to 100%). For each region, the stripe sequence is repeated periodically accross the region geometry.

Example:
See image, top row, second from the right: https://philogb.github.io/blog/assets/france/bertin.png

Use that to show:

Population by age group
Livestock composition by animal
GDP by NACE type
Mortality by cause of death
Household consumption by COICOP
Governement expenditure by COFOG
etc.

Test several maps on the same page

Maybe some procedures interfer between the maps?
Create a new test for this case.

New example map for prop symbols

Currently on the website, we have only one example map showing prop symb as circles. It would be nice to add a new one with another type of symbol. With another variable than population (as soon as it is a quantity!).
This task should include the addition of a 250*250 thumbnail of the new map on the pages.