Mall:Animerad världskarta
[visa] [redigera] [rensa sidcachen]
Dokumentation
Denna grafikmalls huvudversion lagras på Template:Graph:World Historical Highlights. Gör eller föreslå alla förändringar där, och kopiera förändringar till övriga platser (tills kopieringen har automatiserats).
Mallen visar nationell statistik över tid som en interaktiv koropletkarta (ett färgdiagram på en världskarta). Klickar man på pilknappen uppdateras och renderas visualiseringen. Användaren kan klicka på tidslinjen för att välja år för vilket statistiken ska visas. Användaren kan även hålla ned musen på tidslinjen och markera ett tidsintervall för vilket förändringar av statistiken visas. Statistiken lagras i Wikimedia commons datarymd som en Json-fil. På så sätt kan samma statistik användas i flera språkversioner.
Exempel[redigera wikitext]
Följande kod ger resultat enligt nedan:
| {{Animerad världskarta | title=Global fetma och övervikt: Andel med BMI>25 |
|---|
|
See or edit source data. [2] |
- ^ ”Obesity”. Our World in Data. https://ourworldindata.org/obesity/. Läst 31 december 2017.
- ^ ”Obesity”. Our World in Data. https://ourworldindata.org/obesity/. Läst 31 december 2017.
Se även[redigera wikitext]
{{bildram}}{{Graph:Map}}- ”Help:Tabular Data - MediaWiki”. www.mediawiki.org. https://www.mediawiki.org/wiki/Help:Tabular_Data. Läst 6 november 2019.
- ”Map-page - Wikipedia, the free encyclopedia”. en.wikipedia.beta.wmflabs.org. https://en.wikipedia.beta.wmflabs.org/wiki/Map-page. Läst 6 november 2019.
- ”Commons:Structured data - Wikimedia Commons”. commons.wikimedia.org. https://commons.wikimedia.org/wiki/Commons:Structured_data. Läst 6 november 2019.
Ovanstående dokumentation transkluderas från sidan ”Mall:Animerad världskarta/dok”. Kategorier ska placeras på den dokumentationssidan.
<graph>
{
//
// ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:World_Historical_Highlights
// Please do not modify it anywhere else, as it may get copied and override your changes.
// Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:World_Historical_Highlights
//
"version": 2,
"width": 300,
"height": 200,
"signals": [
// TODO: should be auto-calculated last available
{ "name": "initYear", "init": {{{year}}} },
{ "name": "gapHeight", "init": 26 },
{
// Hide overview if total height is too small
"name": "showOverview",
"init": {"expr": "true || height < (gapHeight + 100)" }
},
{ "name": "overviewHeight", "init": {"expr": "showOverview ? 40 : 0" } },
{ "name": "detailHeight", "init": {"expr": "height - (showOverview ? overviewHeight + gapHeight : 0)" } },
{ "name": "overviewYPos", "init": {"expr": "height - overviewHeight" } },
{ "name": "mapXC", "init": {"expr": "width/2"} },
{ "name": "mapYC", "init": {"expr": "overviewYPos/2"} },
{
"name": "brush_start",
"streams": [{
"type": "@overview:mousedown, @overview:touchstart",
"expr": "clamp(eventX(), 0, width)",
"scale": {"name": "xOverview", "invert": true}
}]
},
{
"name": "brush_end",
"streams": [{
"type": "@overview:mousedown, [@overview:mousedown, window:mouseup] > window:mousemove, @overview:mouseup, @overview:touchstart, [@overview:touchstart, window:touchend] > window:touchmove, @overview:touchend",
"expr": "clamp(eventX(), 0, width)",
"scale": {"name": "xOverview", "invert": true}
}]
},
{
"name": "fromYear",
"init": {"expr": "initYear"},
"expr": "year(min(brush_start, brush_end))"
},
{
"name": "toYear",
"init": {"expr": "initYear"},
"expr": "year(max(brush_start, brush_end))"
},
{
"name": "isRange",
"init": {"expr": "false"},
"expr": "fromYear !== toYear"
},
{
"name": "tooltip",
"init": {"expr": "{x: 0, y: 0, datum: false }"},
"streams": [
{"type": "@map:mouseout, @map:touchstart", "expr": "{x: 0, y: 0, datum: false }" },
{"type": "@map:mouseover, @map:touchstart", "expr": "{x: eventX(), y: eventY(), datum: eventItem().datum.lookup}" }
]
}
],
"data": [{
"name": "data",
"url": "tabular:///{{{table}}}",
"format": {"type": "json", "property": "data"},
"transform": [
{ "type": "formula", "field": "value", "expr": "datum.{{{column}}}" }
]
},{
"name": "totals",
"source": "data",
"transform": [
{
"type": "aggregate",
"groupby": ["year"],
"summarize": [{"field": "value", "ops": ["sum"], "as": ["total"]}]
},
{ "type": "formula", "field": "date", "expr": "datetime(datum.year, 0, 1)" }
]
},{
// Select just the source data for the starting year
"name": "firstYearData",
"source": "data",
"transform": [{"type": "filter", "test": "datum.year === fromYear"}]
},{
// Select just the source data for the ending year
"name": "yearData",
"source": "data",
"transform": [{
"type": "filter", "test": "datum.year === toYear"
},{
"type": "sort", "by": ["-value"]
},{
"type": "rank", "field": "country"
},{
"type": "lookup",
"on": "firstYearData",
"onKey": "country",
"keys": ["country"],
"as": ["firstYear"],
"default": null
},{
"type": "formula", "field": "calc", "expr": "if(isRange, (datum.value - datum.firstYear.value)/datum.firstYear.value, datum.value)"
}]
},{
"name": "mapData",
"url": "map:///Naturalearthdata.com/admin-0-countries-no-antarctica.map",
"format": {"type": "json", "property": "data.features"},
"transform": [{
"type": "geopath",
"projection": "equirectangular",
"scale": 72,
"translate": [{"expr": "mapXC"}, {"expr": "mapYC"}]
},{
"type": "formula",
"field": "my_id",
"expr": "datum.properties.iso_a3 || datum.properties.adm0_a3"
},{
"type": "lookup",
"on": "yearData",
"onKey": "country",
"keys": ["my_id"],
"as": ["lookup"],
"default": 100
}]
},{
"name": "dummyValue",
"values": [{}]
}],
"scales": [{
"name": "color",
"type": "linear",
"domain": {"data": "yearData", "field": "calc"},
"range": ["#f1f1f0", "#08306b"],
"zero": false,
"clamp": true
},{
"name": "diffColor",
"type": "linear",
"domain": [-1, -0.8, -0.6, -0.3, -0.1, 0, 0.1, 0.3, 0.6, 0.8, 1],
"range": ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"],
"zero": false,
"clamp": true
},{
"name": "xOverview",
"type": "time",
"range": "width",
"domain": {"data": "totals", "field": "date"}
},{
"name": "yOverview",
"type": "linear",
"rangeMin": {"signal": "overviewHeight"},
"nice": true,
"zero": false,
"domain": {"data": "totals", "field": "total"}
}],
"marks": [{
"type": "group",
"name": "detail",
"properties": {
"enter": {
"height": {"signal": "detailHeight"},
"width": {"signal": "width"}
} },
"marks": [{
"name": "map",
"type": "path",
"from": {"data": "mapData"},
"properties": {
"enter": {
"stroke": {"value": "#fff"},
"path": {"field": "layout_path"}
},
"update": {
"fill": [
{"test": "isRange", "field": "lookup.calc", "scale": "diffColor"},
{"field": "lookup.calc", "scale": "color"}
]} } }]
},{
"type": "group",
"name": "overview",
"from": {
"data": "dummyValue",
// HACK: brush_end is needed to fool optimizer, because otherwise legend doesn't auto-update
"transform": [{"type": "filter", "test": "(brush_end && 0) || showOverview"}]
},
"properties": {
"enter": {
"x": {"value": 0},
"y": {"signal": "overviewYPos"},
"height": {"signal": "overviewHeight"},
"width": {"signal": "width"},
"fill": {"value": "transparent"}
} },
"axes": [
{"type": "x", "scale": "xOverview"}
],
"marks": [{
// Draw scale for a single year (I wish we could dynamically pick which scale to use for the legend)
"type": "group",
// HACK: brush_end is needed to fool optimizer, because otherwise legend doesn't auto-update
"from": { "data": "dummyValue", "transform": [{"type": "filter", "test": "(brush_end && 0) || !isRange"}] },
"properties": { "enter": { "width": {"signal": "width"} } },
"legends": [{
"fill": "color",
"offset": 20,
"properties": {"legend": {"y": {"value": 30} } }
}]},{
// Draw scale for a range (I wish we could dynamically pick which scale to use for the legend)
"type": "group",
"from": { "data": "dummyValue", "transform": [{"type": "filter", "test": "isRange"}] },
"properties": { "enter": { "width": {"signal": "width"} } },
"legends": [{
"fill": "diffColor",
"offset": 20,
"properties": {
"legend": {"y": {"value": 30} },
"labels": {
"text": [
{"test": "datum.data===0", "value": "0"},
{"test": "(datum.data%1)===0", "template": "\u007b{datum.data|number:'.0%'}\u007d"},
{"value": ""}
]} } }]},{
"name": "yearLabel",
"type": "text",
"from": {
"data": "dummyValue",
"transform": [
{"type": "formula", "field": "text", "expr": "if(isRange,fromYear + '-' + toYear, fromYear)"},
{"type": "formula", "field": "fontSize", "expr": "if(isRange,22,32)"}
]},
"properties": {
"enter": {
"x": {"signal": "width", "offset": 72},
"y": {"value": 20},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fill": {"value": "#08306b"}
},
"update": {
"fontSize": {"field": "fontSize"},
"text": {"field": "text"}
} } },{
"type": "line",
"from": { "data": "totals" },
"properties": {
"update": {
"x": {"scale": "xOverview", "field": "date"},
"y": {"scale": "yOverview", "field": "total"},
"stroke": {"value": "#08306b"},
"strokeWidth": {"value": 2}
} } },{
"type": "rect",
"from": {
"data": "dummyValue",
"transform": [
{"type": "formula", "field": "fromDate", "expr": "datetime(fromYear, -6, 1)"},
{"type": "formula", "field": "toDate", "expr": "datetime(toYear, 6, 1)"}
]},
"properties": {
"enter": {
"y": {"value": 0},
"height": {"signal": "overviewHeight"},
"fill": {"value": "#333"},
"fillOpacity": {"value": 0.2},
"stroke": {"value": "#f00"},
"strokeDash": {"value": [4]}
},
"update": {
"x": {"scale": "xOverview", "field": "fromDate"},
"x2": {"scale": "xOverview", "field": "toDate"}
} } }]},
{
"name": "tooltip",
"type": "group",
"from": {
"data": "dummyValue",
"transform": [
{"type": "filter", "test": "tooltip.datum && tooltip.datum.calc"},
{"type": "formula", "field": "offsetX", "expr": "5"},
{"type": "formula", "field": "offsetY", "expr": "30"},
{"type": "formula", "field": "tipWidth", "expr": "200"},
{"type": "formula", "field": "tipHeight", "expr": "51"},
{"type": "formula", "field": "alignLeft", "expr": "tooltip.x > width - datum.offsetX - datum.tipWidth"},
{"type": "formula", "field": "alignTop", "expr": "tooltip.y > height - datum.offsetY - datum.tipHeight"},
{"type": "formula", "field": "x", "expr": "max(0, tooltip.x + (datum.alignLeft ? -datum.offsetX-datum.tipWidth : datum.offsetX ))"},
{"type": "formula", "field": "y", "expr": "tooltip.y + (datum.alignTop ? -1 : 1) * datum.offsetY"},
{"type": "formula", "field": "lookupCountry", "expr": "tooltip.datum.country"},
{
"type": "lookup",
"on": "mapData",
"onKey": "my_id",
"keys": ["lookupCountry"],
"as": ["mapDataVal"],
"default": null
},
{"type": "formula", "field": "name", "expr": "datum.mapDataVal ? datum.mapDataVal.properties.name : '?xyz?'"},
{
"type": "lookup",
"on": "yearData",
"onKey": "country",
"keys": ["lookupCountry"],
"as": ["yearDataVal"],
"default": null
},
{"type": "formula", "field": "rank", "expr": "datum.yearDataVal ? datum.yearDataVal.rank : 1000"}
]},
"properties": {
"update": {
"x": {"field": "x" }, "y": {"field": "y" },
"width": {"field": "tipWidth" },
"height": {"field": "tipHeight" },
"fill": {"value": "#fff"},
"fillOpacity": {"value": 0.85},
"stroke": {"value": "#aaa"},
"strokeWidth": {"value": 0.5}
} },
"marks": [
{
"type": "text",
"properties": {
"update": {
"x": {"value": 6}, "y": {"value": 14},
"text": {"template": "\u007b{parent.name}\u007d"},
"fill": {"value": "black"},
"fontWeight": {"value": "bold"}
} } },
{
"type": "text",
"properties": {
"update": {
"x": {"value": 6}, "y": {"value": 29},
"text": [
{"test": "isRange", "template": "Growth:\t\u007b{tooltip.datum.calc|number:'.1%'}\u007d"},
{"template": "{{{columnName}}}:\t\u007b{tooltip.datum.calc|number:',.1f'}\u007d%"}
],
"fill": {"value": "black"}
} } },
{
"type": "text",
"properties": {
"update": {
"x": {"value": 6}, "y": {"value": 44},
"text": [
{"test": "isRange", "template": ""},
{"template": "Global position:\t#\u007b{parent.rank|number:'.0f'}\u007d"}
],
"fill": {"value": "black"}
} } },
]}
]
}
</graph>