eurostat-map 4.4.1 → 4.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -126
- package/build/215.eurostatmap.min.js.map +1 -1
- package/build/eurostatmap.js +4953 -4982
- package/build/eurostatmap.min.js +1 -1
- package/build/eurostatmap.min.js.map +1 -1
- package/build/types/core/MapConfig.d.ts +74 -1
- package/build/types/core/MapInstance.d.ts +93 -0
- package/build/types/index.d.ts +3 -3
- package/build/types/legend/LegendConfig.d.ts +24 -7
- package/build/types/legend/choropleth/ChoroplethLegendConfig.d.ts +80 -0
- package/build/types/map-types/choropleth/BivariateChoroplethConfig.d.ts +4 -0
- package/build/types/map-types/choropleth/ChoroplethConfig.d.ts +4 -0
- package/build/types/map-types/choropleth/TrivariateChoroplethConfig.d.ts +4 -0
- package/package.json +6 -3
package/README.md
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
# eurostat-map: Data-Driven Maps
|
|
2
|
+
|
|
1
3
|
<div align="center">
|
|
2
4
|
<img src="https://img.shields.io/bundlephobia/min/eurostat-map" alt="npm bundle size">
|
|
3
5
|
<img src="https://img.shields.io/npm/v/eurostat-map" alt="npm">
|
|
@@ -5,8 +7,6 @@
|
|
|
5
7
|
<a href="http://www.awesomeofficialstatistics.org"><img src="https://awesome.re/mentioned-badge.svg" alt="Mentioned in Awesome Official Statistics"></a>
|
|
6
8
|
</div>
|
|
7
9
|
|
|
8
|
-
# eurostat-map: JavaScript & TypeScript Mapping Library for Eurostat Data
|
|
9
|
-
|
|
10
10
|
<br>
|
|
11
11
|
<div align="center">
|
|
12
12
|
<img src="https://raw.githubusercontent.com/eurostat/eurostat-map/master/docs/img/eurostat-map-logo-cropped.png" alt="examples" width="400"/>
|
|
@@ -16,16 +16,15 @@
|
|
|
16
16
|
</div>
|
|
17
17
|
|
|
18
18
|
<div align="center">
|
|
19
|
-
|
|
19
|
+
D3-based mapping library for Eurostat and custom data - the engine that powers <a href="https://gisco-services.ec.europa.eu/image/" target="_blank"><strong>IMAGE</strong></a>.
|
|
20
20
|
</div>
|
|
21
21
|
|
|
22
22
|
<div align="center">
|
|
23
|
-
<a href="docs/reference.md"><strong>
|
|
24
|
-
<a href="https://eurostat.github.io/eurostat-map/examples/
|
|
25
|
-
<a href="https://observablehq.com/collection/@eurostat-ws/eurostatmap-js"><strong>Quickstart notebook</strong></a>
|
|
23
|
+
<a href="docs/reference.md" target="_blank"><strong>Documentation</strong></a> ·
|
|
24
|
+
<a href="https://eurostat.github.io/eurostat-map/examples/index.html" target="_blank"><strong>Live examples</strong></a> ·
|
|
25
|
+
<a href="https://observablehq.com/collection/@eurostat-ws/eurostatmap-js" target="_blank"><strong>Quickstart notebook</strong></a>
|
|
26
26
|
</div>
|
|
27
|
-
|
|
28
|
-
## At a Glance
|
|
27
|
+
<hr>
|
|
29
28
|
|
|
30
29
|
- **Interactive SVG maps** rendered using **D3.js**.
|
|
31
30
|
- **TypeScript support** with built-in definition typings.
|
|
@@ -35,7 +34,21 @@
|
|
|
35
34
|
<hr>
|
|
36
35
|
<br>
|
|
37
36
|
<div align="center">
|
|
38
|
-
|
|
37
|
+
|
|
38
|
+
<table>
|
|
39
|
+
<tr>
|
|
40
|
+
<td><a href="https://eurostat.github.io/eurostat-map/examples/population-density.html" target="_blank"><img src="examples/img/previews/population-density.png" alt="Population density example" /></a></td>
|
|
41
|
+
<td><a href="https://eurostat.github.io/eurostat-map/examples/prop-circles.html" target="_blank"><img src="examples/img/previews/prop-circles.png" alt="Proportional circles example" /></a></td>
|
|
42
|
+
<td><a href="https://eurostat.github.io/eurostat-map/examples/flowmap.html" target="_blank"><img src="examples/img/previews/flowmap.png" alt="Flow map example" /></a></td>
|
|
43
|
+
<td><a href="https://eurostat.github.io/eurostat-map/examples/mushroom.html" target="_blank"><img src="examples/img/previews/mushroom.png" alt="Mushroom map example" /></a></td>
|
|
44
|
+
</tr>
|
|
45
|
+
<tr>
|
|
46
|
+
<td><a href="https://eurostat.github.io/eurostat-map/examples/sparklines-grid-cartogram.html" target="_blank"><img src="examples/img/previews/sparklines-grid-cartogram.png" alt="Sparklines map example" /></a></td>
|
|
47
|
+
<td><a href="https://eurostat.github.io/eurostat-map/examples/pop-unemploy-bivariate.html" target="_blank"><img src="examples/img/previews/pop-unemploy-bivariate.png" alt="Bivariate map example" /></a></td>
|
|
48
|
+
<td><a href="https://eurostat.github.io/eurostat-map/examples/trivariate.html" target="_blank"><img src="examples/img/previews/trivariate.png" alt="Trivariate map example" /></a></td>
|
|
49
|
+
<td><a href="https://eurostat.github.io/eurostat-map/examples/livestock_composition.html" target="_blank"><img src="examples/img/previews/livestock_composition.png" alt="Trivariate map example" /></a></td>
|
|
50
|
+
</tr>
|
|
51
|
+
</table>
|
|
39
52
|
</div>
|
|
40
53
|
|
|
41
54
|
---
|
|
@@ -43,12 +56,8 @@
|
|
|
43
56
|
## Resources
|
|
44
57
|
|
|
45
58
|
- [Quick Start](#quick-start)
|
|
46
|
-
- [
|
|
47
|
-
- [Examples by Use Case](#examples-by-use-case)
|
|
48
|
-
- [Installation](#installation)
|
|
59
|
+
- [Examples](https://eurostat.github.io/eurostat-map/examples/index.html)
|
|
49
60
|
- [Documentation](#documentation)
|
|
50
|
-
- [Developer Path](#developer-path)
|
|
51
|
-
- [Technical details](#technical-details)
|
|
52
61
|
- [About](#about)
|
|
53
62
|
- [Contribute](#contribute)
|
|
54
63
|
- [Copyright](#copyright)
|
|
@@ -62,74 +71,6 @@
|
|
|
62
71
|
npm install eurostat-map
|
|
63
72
|
```
|
|
64
73
|
|
|
65
|
-
```javascript
|
|
66
|
-
import eurostatmap from 'eurostat-map'
|
|
67
|
-
|
|
68
|
-
eurostatmap
|
|
69
|
-
.map('choropleth')
|
|
70
|
-
.title('Population density in Europe')
|
|
71
|
-
.stat({ eurostatDatasetCode: 'demo_r_d3dens', unitText: 'people/km²' })
|
|
72
|
-
.legend({ x: 500, y: 180, title: 'Density, people/km²' })
|
|
73
|
-
.build()
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
Want a guided setup? Try the notebook:
|
|
77
|
-
https://observablehq.com/@joewdavies/eurostat-map-js
|
|
78
|
-
|
|
79
|
-
## What You Can Build
|
|
80
|
-
|
|
81
|
-
- [Choropleth](https://eurostat.github.io/eurostat-map/examples/population-density.html): classed or continuous regional shading.
|
|
82
|
-
- [Value-by-alpha](docs/reference.md): dual encoding with color and opacity.
|
|
83
|
-
- [Bivariate choropleth](https://eurostat.github.io/eurostat-map/examples/pop-unemploy-bivariate.html): two variables in one map.
|
|
84
|
-
- [Trivariate choropleth](https://eurostat.github.io/eurostat-map/examples/trivariate.html): three-variable ternary coloring.
|
|
85
|
-
- [Categorical](https://eurostat.github.io/eurostat-map/examples/categorical.html): discrete class-based mapping.
|
|
86
|
-
- [Proportional symbols](https://eurostat.github.io/eurostat-map/examples/prop-circles.html): size-based symbol encoding.
|
|
87
|
-
- [Mushroom](https://eurostat.github.io/eurostat-map/examples/mushroom.html): bilateral symbol comparison per region.
|
|
88
|
-
- [Pie composition](https://eurostat.github.io/eurostat-map/examples/prop-piecharts.html): proportional category shares.
|
|
89
|
-
- [Bar composition](docs/reference.md): grouped/stacked regional breakdowns.
|
|
90
|
-
- [Stripe composition](https://eurostat.github.io/eurostat-map/examples/livestock_composition.html): compact stripe-based composition.
|
|
91
|
-
- [Waffle composition](https://eurostat.github.io/eurostat-map/examples/waffle.html): grid-cell composition breakdowns.
|
|
92
|
-
- [Coxcomb composition](https://eurostat.github.io/eurostat-map/examples/coxcomb.html): radial composition profiles.
|
|
93
|
-
- [Sparkline](https://eurostat.github.io/eurostat-map/examples/sparklines.html): in-map time series microcharts.
|
|
94
|
-
- [Flow map](https://eurostat.github.io/eurostat-map/examples/flowmap.html): directional links between territories.
|
|
95
|
-
|
|
96
|
-
## Examples by Use Case
|
|
97
|
-
|
|
98
|
-
### Core analytical maps
|
|
99
|
-
|
|
100
|
-
- [Population density choropleth](https://eurostat.github.io/eurostat-map/examples/population-density.html) (see [code](https://github.com/eurostat/eurostat-map/blob/master/examples/population-density.html))
|
|
101
|
-
- [Proportional circles](https://eurostat.github.io/eurostat-map/examples/prop-circles.html) (see [code](https://github.com/eurostat/eurostat-map/blob/master/examples/prop-circles.html))
|
|
102
|
-
- [Categorical NUTS typology](https://eurostat.github.io/eurostat-map/examples/categorical.html) (see [code](https://github.com/eurostat/eurostat-map/blob/master/examples/categorical.html))
|
|
103
|
-
- [World map](https://eurostat.github.io/eurostat-map/examples/world.html) (see [code](https://github.com/eurostat/eurostat-map/blob/master/examples/world.html))
|
|
104
|
-
|
|
105
|
-
### Composition and structure
|
|
106
|
-
|
|
107
|
-
- [Proportional pie charts](https://eurostat.github.io/eurostat-map/examples/prop-piecharts.html) (see [code](https://github.com/eurostat/eurostat-map/blob/master/examples/prop-piecharts.html))
|
|
108
|
-
- [Farm size composition](https://eurostat.github.io/eurostat-map/examples/farm_size.html) (see [code](https://github.com/eurostat/eurostat-map/blob/master/examples/farm_size.html))
|
|
109
|
-
- [Livestock composition](https://eurostat.github.io/eurostat-map/examples/livestock_composition.html) (see [code](https://github.com/eurostat/eurostat-map/blob/master/examples/livestock_composition.html))
|
|
110
|
-
|
|
111
|
-
### Time and change
|
|
112
|
-
|
|
113
|
-
- [Population change](https://eurostat.github.io/eurostat-map/examples/population-change.html) (see [code](https://github.com/eurostat/eurostat-map/blob/master/examples/population-change.html))
|
|
114
|
-
- [Sparklines since 2012](https://eurostat.github.io/eurostat-map/examples/sparklines.html) (see [code](https://github.com/eurostat/eurostat-map/blob/master/examples/sparklines.html))
|
|
115
|
-
- [20 years of GDP change](https://eurostat.github.io/eurostat-map/examples/small_multiple.html) (see [code](https://github.com/eurostat/eurostat-map/blob/master/examples/small_multiple.html))
|
|
116
|
-
|
|
117
|
-
### Relationships and advanced views
|
|
118
|
-
|
|
119
|
-
- [Bivariate unemployment/population](https://eurostat.github.io/eurostat-map/examples/pop-unemploy-bivariate.html) (see [code](https://github.com/eurostat/eurostat-map/blob/master/examples/pop-unemploy-bivariate.html))
|
|
120
|
-
- [Flow map](https://eurostat.github.io/eurostat-map/examples/flowmap.html) (see [code](https://github.com/eurostat/eurostat-map/blob/master/examples/flowmap.html))
|
|
121
|
-
- [Country focus: Spain](https://eurostat.github.io/eurostat-map/examples/spain.html) (see [code](https://github.com/eurostat/eurostat-map/blob/master/examples/spain.html))
|
|
122
|
-
|
|
123
|
-
## Installation
|
|
124
|
-
|
|
125
|
-
### Node.js
|
|
126
|
-
|
|
127
|
-
```npm
|
|
128
|
-
npm install eurostat-map
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
then
|
|
132
|
-
|
|
133
74
|
```javascript
|
|
134
75
|
import eurostatmap from 'eurostat-map'
|
|
135
76
|
```
|
|
@@ -140,67 +81,38 @@ or
|
|
|
140
81
|
const eurostatmap = require('eurostat-map')
|
|
141
82
|
```
|
|
142
83
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
For the latest version, use:
|
|
84
|
+
or
|
|
146
85
|
|
|
147
86
|
```html
|
|
148
87
|
<script src="https://unpkg.com/eurostat-map"></script>
|
|
149
88
|
```
|
|
150
89
|
|
|
151
|
-
|
|
90
|
+
then
|
|
152
91
|
|
|
153
|
-
```
|
|
154
|
-
|
|
92
|
+
```javascript
|
|
93
|
+
eurostatmap
|
|
94
|
+
.map('choropleth')
|
|
95
|
+
.title('Population density in Europe')
|
|
96
|
+
.stat({ eurostatDatasetCode: 'demo_r_d3dens', unitText: 'people/km²' })
|
|
97
|
+
.legend({ x: 500, y: 180, title: 'Density, people/km²' })
|
|
98
|
+
.build()
|
|
155
99
|
```
|
|
156
100
|
|
|
157
|
-
|
|
101
|
+
Want a guided setup? Try the notebook:
|
|
102
|
+
https://observablehq.com/@joewdavies/eurostat-map-js
|
|
158
103
|
|
|
159
104
|
## Documentation
|
|
160
105
|
|
|
161
|
-
For detailed documentation see the **[
|
|
106
|
+
For detailed documentation on what eurostat-map can do, see the **[documentation page](docs/reference.md)**.
|
|
162
107
|
|
|
163
|
-
|
|
108
|
+
For generated, signature-accurate API docs from TypeScript/JSDoc, see [the API docs](https://eurostat.github.io/eurostat-map/docs/api/index.html).
|
|
164
109
|
|
|
165
110
|
Anything unclear or missing? Feel free to [ask](https://github.com/eurostat/eurostat.js/issues/new)!
|
|
166
111
|
|
|
167
|
-
## Developer Path
|
|
168
|
-
|
|
169
|
-
### Local setup
|
|
170
|
-
|
|
171
|
-
```bash
|
|
172
|
-
npm install
|
|
173
|
-
npm run server
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
### Build and quality checks
|
|
177
|
-
|
|
178
|
-
```bash
|
|
179
|
-
npm run build-prod
|
|
180
|
-
npm run format
|
|
181
|
-
```
|
|
182
|
-
|
|
183
|
-
### Where to start in the codebase
|
|
184
|
-
|
|
185
|
-
- Factory and map creation: [src/eurostat-map.js](src/eurostat-map.js)
|
|
186
|
-
- Core map scaffolding: [src/core/map-instance.js](src/core/map-instance.js), [src/core/stat-map.js](src/core/stat-map.js)
|
|
187
|
-
- Map types: [src/map-types](src/map-types)
|
|
188
|
-
- Legend system: [src/legend](src/legend)
|
|
189
|
-
- Type declarations: [src/types](src/types)
|
|
190
|
-
|
|
191
|
-
### Contribution flow
|
|
192
|
-
|
|
193
|
-
1. Pick an issue or propose one in Discussions/Issues.
|
|
194
|
-
2. Add or update an example in [examples](examples) when changing behavior.
|
|
195
|
-
3. Run build and formatting before opening a PR.
|
|
196
|
-
4. Link relevant docs updates in [docs/reference.md](docs/reference.md) when APIs change.
|
|
197
|
-
|
|
198
|
-
## Technical details
|
|
199
|
-
|
|
200
|
-
Maps based on [NUTS regions](http://ec.europa.eu/eurostat/web/nuts/overview) rely on [Nuts2json API](https://github.com/eurostat/Nuts2json) and [TopoJSON](https://github.com/mbostock/topojson/wiki) format. Statistical data are accessed using [Eurostat STATISTICS API](https://wikis.ec.europa.eu/display/EUROSTATHELP/API+-+Getting+started+with+statistics+API) for [JSON-stat](https://json-stat.org/) data. The data are decoded and queried using [JSON-stat library](https://json-stat.com/). Custom data can also be used with `map.statData().setData({ES:3,FR:2,DE:5})`. Maps are rendered as SVG maps using [D3.js library](https://d3js.org/).
|
|
201
|
-
|
|
202
112
|
## About
|
|
203
113
|
|
|
114
|
+
eurostat-map is an open-source JavaScript library for building interactive, publication-ready statistical maps focused on Europe. It combines D3-based SVG rendering with direct support for Eurostat datasets (JSON-stat), NUTS geographies from Nuts2json, and custom data workflows, and includes map types such as choropleth, proportional symbols, cartograms, flow maps, and composition charts. The project is designed for analysts, journalists, and institutions that need reproducible, configurable map visualizations for both exploratory analysis and official communication.
|
|
115
|
+
|
|
204
116
|
| | |
|
|
205
117
|
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
206
118
|
| _contributors_ | [<img src="https://github.com/jgaffuri.png" height="40" />](https://github.com/jgaffuri) [<img src="https://github.com/JoeWDavies.png" height="40" />](https://github.com/JoeWDavies) |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"215.eurostatmap.min.js","mappings":";CAAA,
|
|
1
|
+
{"version":3,"file":"215.eurostatmap.min.js","mappings":";CAAA,SAAUA,iCAAiCC,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,GAAIH,GACe,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,KAAM,KCTTC,UAAY,SAAZA,UAAaC,GACT,IAAAC,EAA8ED,EAAME,KAArEC,EAAUF,EAAjBG,MAAmBC,EAAKJ,EAALI,MAAOC,EAASL,EAATK,UAAWC,EAASN,EAATM,UAAWC,EAAUP,EAAVO,WAAYC,EAAKR,EAALQ,MAGpEC,cAAcD,GAAS,yCAkBvB,IAhBA,IAAML,EAAQD,EAAWQ,IAAI,SAACC,EAAGC,GAI7B,OAHAD,EAAEE,EAAIF,EAAEG,WAAWC,SAAS,GAC5BJ,EAAEK,EAAIL,EAAEG,WAAWC,SAAS,GAC5BJ,EAAEM,EAAIb,EAAMQ,GACLD,CACX,GAEMO,EAAMC,GACPC,gBAAgBjB,GAChBkB,MAAM,IAAKF,GAAGG,OAAO,SAACC,GAAC,OAAKA,EAAET,WAAWC,SAAS,EAAE,GAAES,SAASnB,IAC/DgB,MAAM,IAAKF,GAAGM,OAAO,SAACF,GAAC,OAAKA,EAAET,WAAWC,SAAS,EAAE,GAAES,SAASlB,IAC/De,MAAM,UAAWF,GAAGO,aAAa,SAACH,GAAC,OAAKA,EAAEN,CAAC,GAAEV,WAAWA,IACxDoB,OAECC,EAASC,KAAKC,KAAKD,KAAKE,IAAIb,EAAIc,YAAcH,KAAKE,IAAI,EAAIb,EAAIe,eAE5DrB,EAAI,EAAGA,EAAIgB,EAAQhB,IACxBM,EAAIgB,OACAtB,EAAI,IAAO,GACXuB,YAAY,CAAEC,KAAM,WAAYC,SAAUzB,EAAG0B,MAAOV,IAI5DO,YAAY,CAAEC,KAAM,MAAOjC,MAAAA,IAC3BN,KAAK0C,OACT,E","sources":["webpack://eurostatmap/webpack/universalModuleDefinition","webpack://eurostatmap/./src/core/dorling/dorling-worker.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"eurostatmap\"] = factory();\n\telse\n\t\troot[\"eurostatmap\"] = factory();\n})(self, () => {\nreturn ","onmessage = (event) => {\r\n const { nodes: inputNodes, radii, strengthX, strengthY, iterations, d3URL } = event.data\r\n\r\n // Load D3 dynamically into the worker\r\n importScripts(d3URL || 'https://unpkg.com/d3@7/dist/d3.min.js')\r\n\r\n const nodes = inputNodes.map((n, i) => {\r\n n.x = n.properties.centroid[0]\r\n n.y = n.properties.centroid[1]\r\n n.r = radii[i]\r\n return n\r\n })\r\n\r\n const sim = d3\r\n .forceSimulation(nodes)\r\n .force('x', d3.forceX((d) => d.properties.centroid[0]).strength(strengthX))\r\n .force('y', d3.forceY((d) => d.properties.centroid[1]).strength(strengthY))\r\n .force('collide', d3.forceCollide((d) => d.r).iterations(iterations))\r\n .stop()\r\n\r\n const nTicks = Math.ceil(Math.log(sim.alphaMin()) / Math.log(1 - sim.alphaDecay()))\r\n\r\n for (let i = 0; i < nTicks; i++) {\r\n sim.tick()\r\n if (i % 10 === 0) {\r\n postMessage({ type: 'progress', progress: i, total: nTicks })\r\n }\r\n }\r\n\r\n postMessage({ type: 'end', nodes })\r\n self.close()\r\n}\r\n"],"names":["webpackUniversalModuleDefinition","root","factory","exports","module","define","amd","self","onmessage","event","_event$data","data","inputNodes","nodes","radii","strengthX","strengthY","iterations","d3URL","importScripts","map","n","i","x","properties","centroid","y","r","sim","d3","forceSimulation","force","forceX","d","strength","forceY","forceCollide","stop","nTicks","Math","ceil","log","alphaMin","alphaDecay","tick","postMessage","type","progress","total","close"],"sourceRoot":""}
|