Nutsdorlingcartogram NPM

NutsDorlingCartogram

Dorling cartograms from NUTS regions with Eurostat statistics

npm bundle size npm

Installation

npm install nutsdorlingcartogram

then

NutsDorlingCartogram = require('nutsdorlingcartogram')

<script src="https://unpkg.com/nutsdorlingcartogram/build/dorling.min.js"></script>

Usage

NutsDorlingCartogram.dorling()
    .containerId('containerDiv')
    .nutsLevel(2)
    .colors(['#2d50a0', '#6487c3', '#aab9e1', '#f0cd91', '#e6a532', '#d76e2d'])
    .thresholdValues([-15, -10, 0, 10, 15, 20])
    .sizeDatasetCode('demo_r_pjangrp3')
    .sizeDatasetFilters('sex=T&age=TOTAL&unit=NR&time=2019')
    .colorDatasetCode('demo_r_gind3')
    .colorDatasetFilters('indic_de=GROWRT&time=2018')
    .maxCircleRadius({
        0: 50, // Country level
        1: 30, // NUTS 1
        2: 30, // NUTS 2
        3: 20, // NUTS 3
    })
    .showBorders(false)
    .seaColor('white')
    .tooltip({
        colorLabel: 'Population change',
        colorUnit: 'per 1 000 inhabitants',
        sizeLabel: 'Total population',
        shareLabel: 'Share of national population',
    })
    .build();

Check out this notebook for an interactive example.

Cartogram Definition

Accessible methods and their respective parameters. Where possible, values can be defined for each NUTS level; whereby a change in NUTS level using the NUTS selector will rebuild the visualization using the parameters corresponding to the new NUTS level.

Method	Description	Type	Required	Default Value
dorling.containerId	Identifier of the container upon which the cartogram will be appended	string	true	null
dorling.width	SVG viewbox width attribute	number	false	1000
dorling.height	SVG viewbox height attribute	number	false	1000
dorling.standalone	Whether the visualisation is a standalone version or not. Standalone versions include share buttons, modals and a eurostat logo.	Boolean	false	false
dorling.nutsLevel	NUTS level	number	false	2
dorling.sizeDatasetCode	Eurostat database dataset identifier used to determine circle sizes	string	false	"demo_r_pjangrp3"
dorling.sizeDatasetFilters	URL parameter string to apply to the sizeDataset request	string	false	"sex=T&age=TOTAL&unit=NR&time=2018"
dorling.colorDatasetCode	Eurostat dataset identifier used to determine circle colors	number	false	200
dorling.colorDatasetFilters	URL parameter string to apply to the colorDataset request	string	false	"indic_de=GROWRT&time=2018"
dorling.mixNuts	Permits filling in data gaps using data from different NUTS levels. For example: this adds NUTS region "DE1" of NUTS level 1 to the NUTS 2 data: { 2: {level: 1, ids: "DE1" } }	{ nutsLevel: {nutsLevelToBeAdded: number, ids: [] } }	false	null
dorling.exclude	Exclude countries from the data shown. e.g .exclude("MK", "ME", "TR", "AL", "RS")	string	false	null
dorling.colorIsPercentage	Whether or not the values used for the colours should be percentages. If true, the percentages are calculated using colorPercentageCalcDatasetCode and colorPercentageCalcDatasetFilters	boolean	false	false
dorling.colorPercentageCalcDatasetCode	Dataset code for the retrieval of the totals that will be used to calculate the percentages of the colour values. See agriculture example (specific cereal production / all cereal production)	string	false	null
dorling.colorPercentageCalcDatasetFilters	URL parameter string to apply to the colorPercentageCalcDataset request	string	false	null
dorling.colorScheme	d3 scale chromatic function name. Only used when a 'colors' array is not specified (see below)	string	false	"interpolateRdYlBu"
dorling.colors	An array of hex values to use for colouring the circles	[]string	false	null
dorling.thresholdValues	An array of threshold values to use for classifying the data	[]number	false	null
dorling.zoom	Enable d3 zoom functionality using zoom buttons	boolean	false	true
dorling.showNutsSelector	whether or not to show the radio buttons which allow the user to change between NUTS levels	boolean	false	true;
dorling.nutsAvailable	Defines which NUTS levels will be shown in the NUTS level selector	array	false	0,1,2,3;
dorling.nutsSelectorTranslateY	Y-axis translation applied to the NUTS level selector node	{'nutsLevel':number}	false	{ 0: 375, 1: 375, 2: 375, 3: 375 }
dorling.minCircleRadius	Minimum circle radius allowed when scaling the circles (for each NUTS level)	{'nutsLevel':number}	false	{ '0': 1.5, '1': 1.5, '2': 1.5, '3': 1.5 }
dorling.maxCircleRadius	Maximum circle radius allowed when scaling the circles (for each NUTS level)	{'nutsLevel':number}	false	{ '0': 20, '1': 20, '2': 20, '3': 20 }
dorling.positionStrength	The strength of the forces used to maintain the circle at its original position.	number	false	0.7
dorling.collisionStrength	The strength of the collisions between circle during the d3 force simulation	number	false	0.1
dorling.scale	d3-geo projection.scale() value	number	false	0.0002065379208173783
dorling.translateX	d3-geo projection.translate() X value	number	false	-390
dorling.translateY	d3-geo projection.translate() Y value	number	false	1126
dorling.showSource	show links to the source datasets for the colour and size data	boolean	false	true
dorling.footnotesText	Footnote text shown below the map	string	false	null

Legend

Method	Description	Type	Required	Default Value
dorling.colorLegend	Object which stores the configuration parameters for the circle-color legend. See here for more details on the following legend options.	object	false	See here
colorLegend.orient	Accepted values: "vertical" or "horizontal"	string	false	"vertical"
colorLegend.title	Legend title text	string	false	"Circle Colour"
colorLegend.titleWidth	Width of the legend title	number	false	200
colorLegend.cells	Number of cells to be shown in the legend	number	false	5
colorLegend.shape	Shape of the legend cells ("circle" or "rect")	string	false	"rect"
colorLegend.shapeRadius	Radius of the circle when colorLegend.shape is set to "circle"	string	false	null
colorLegend.shapePadding	Padding to be applied to the legend cells for spacing	number	false	5
colorLegend.labelAlign	Alignment of the legend cell labels.	string	false	"middle"
colorLegend.labelOffset	Distance in pixels from legend label to its corresponding cell	number	false	5
colorLegend.titleYOffset	Y-axis translation applied to the hover functionality explanation text	{'nutsLevel':number}	false	{ 0: 330, 1: 330, 2: 330, 3: 330 }
dorling.sizeLegend	Object which stores the configuration parameters for the circle-size legend	object	false
sizeLegend.title	Legend title	string	false	"Circle Size"
sizeLegend.values	Array of values used in the legend	{'nutsLevel':array}	false	maxValue, maxValue / 2, maxValue / 10 for each NUTS level
sizeLegend.textFunction	Function used to manipulate legend labels	function	false	function (value) { return value.toLocaleString() }
sizeLegend.titleYOffset	Y Offset in pixels applied to the legend's title	{'nutsLevel':number}	false	{ '0': 10, '1': 10, '2': 10, '3': 10 }
sizeLegend.titleXOffset	X Offset in pixels applied to the legend's title	{'nutsLevel':number}	false	{ '0': 20, '1': 20, '2': 20, '3': 20 }
sizeLegend.translateY	Y value to be applied to the translate transform of the size legend within the parent "legends" container	{'nutsLevel':number}	false	{ '0': 0, '1': 0, '2': 0, '3': 0 }
sizeLegend.bodyXOffset	Legend title	{'nutsLevel':number}	false	{ '0': 50, '1': 50, '2': 50, '3': 50 }
sizeLegend.bodyYOffset	Legend title	{'nutsLevel':number}	false	{ '0': 90, '1': 90, '2': 90, '3': 90 }
sizeLegend.labelsTranslateX	X-axis translation applied to the labels of each size class	{'nutsLevel':number}	false	{ '0': 90, '1': 90, '2': 90, '3': 90 }
sizeLegend.labelsOffsetY	Y-axis offset applied to labels	{'nutsLevel':number}	false	{ '0': 2, '1': 2, '2': 2, '3': 2 }

Tooltip

Method	Description	Type	Required	Default Value
dorling.tooltip	Object which stores the configuration parameters for the circle-size legend	object	false
tooltip.colorLabel	Label used to describe the color value of the feature	string	false	"Color value:"
tooltip.colorUnit	Unit label to be added after the color value	string	false	""
tooltip.sizeLabel	Label used to describe the size value of the feature	string	false	"Size value:"
tooltip.sizeUnit	Unit label to be added after the size value	string	false	""
tooltip.shareLabel	Label used to describe the percentage share value of the feature	string	false	"Share value:"