Template:Graph:World Historical Highlights

From MediaWiki.org
Jump to navigation Jump to search
Documentation icon Template documentation[view] [edit] [history] [purge]

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
| table=Sandbox/Doc_James/Obesity_Males_CC-BY-SA.tab
| column=percent_overweight
| columnName=Rate of BMI>25
| year=2014
| note=[1]
}}

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
  },{
    "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
  },{
      "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>