Template:Graph:World Historical Highlights
Jump to navigation
Jump to search
This documentation is transcluded from Template:Graph:World Historical Highlights/doc.
This graph's main version resides at Template:Graph:World Historical Highlights. Please make or suggest all the changes there, and copy it everywhere else (until the copying is automated)
| {{Graph:World Historical Highlights | title=Global Rates of Obesity and Overweight |
|---|
|
See or edit source data. [2] |
<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": 265,
"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>