eurostat / eurostat-map.js Goto Github PK

Try to add a map background to give an old map style, with some transparency for the foreground.
Example:
https://github.com/eurostat/eurostat-map.js/blob/dev/docs/img/test_old.png
with
https://www.myfreetextures.com/wp-content/uploads/2014/11/old-brown-paper-texture-image.jpg

• map with fill pattern. Test new fill patterns.
  https://riccardoscalco.it/textures/ see example of utilisation here: https://observablehq.com/@oliviafvane/where-do-british-county-names-come-from
  http://www.heropatterns.com/
  https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence
  https://developer.mozilla.org/en-US/docs/Web/SVG/Element#Filter_primitive_elements
• map with stroke styles - patterns
• map with hand written stuff: Test https://roughjs.com/
• map with fill pattern (hashes?) indicating composition
• map with bar rectangle (only height varies) to show variations in quantities.
• map with time series for countries/regions: https://observablehq.com/@pjsier/chicago-covid-zip-sparklines
• https://philogb.github.io/blog/assets/france/bertin.png

Add possibility to show shadowed effect for the countries AND buffered lines as on this image:
https://previews.123rf.com/images/schwabenblitz/schwabenblitz1606/schwabenblitz160601040/58074061-map-of-denmark-with-the-provinces-south-denmark-is-highlighted-by-a-hatching-.jpg

Show temporal data using:
https://github.com/tomshanley/d3-spiral-heatmap

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 +/-

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

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
• ...

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

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.

new method: labelsToShow([])

defaults to ["countries","seas"]

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).

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

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.

Based on what has been recently added to Nuts2json API.

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

See: https://www.axismaps.com/guide/dot-density

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

The area of the symbols should not be exactly proportionnal to its value. The 'perceived area' should be used instead.
See: https://makingmaps.net/2007/08/28/perceptual-scaling-of-map-symbols/

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

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

Using EUI, build an interface on top of eurostat-map.js which allows the user to customize their 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

Develop a new function which replicates the functionality seen here

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

.psStrokeWidth(0.1)

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.

• 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

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).

• 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

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.

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

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.

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

• 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

can be achieved by reversing the domain array using [].reverse()

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.

This only occurs for certain map types, namely:

• catergorical
• choropleth
• bivariate choropleth

It DOES work in stripe composition maps

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

1. The "transform" attribute should be used to scale and move the group symbol instead of current circle radius.
2. Propose list of predefined symbols (circle, square, etc. see https://github.com/d3/d3-shape#symbols) and maybe user defined ones (as SVG paths)
3. 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

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

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();

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

" When I hover over Urban on the legend it goes purple – but all the rural regions go purple also, I image that it should be the Urban regions that get highlighted? "

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.

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

This should be simple.
Even for non programmers.

See: https://github.com/eurostat/eurostat-map.js/blob/master/docs/tutorial.md

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

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

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.

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.

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.

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.

Legend height and title fontsize are not applied correctly on firefox 83.0