Template:Graph:Lines/testcases

< Template:Graph:Lines

This is the template test cases page for the sandbox of Template:Graph:Lines.
Purge this page to update the examples.

More information and options

If there are many examples of a complicated template on this page, those toward the end of the page may malfunction due to MediaWiki limits. If this occurs, see the "NewPP limit report" comment added to the rendered page.
You can also use Special:ExpandTemplates to examine the results of template use.

View this page in the skin:

Testing sandbox version

See or edit raw graph data.

Log scaled

With `|replaceZerosWith=1`

See or edit raw graph data.

Without `|replaceZerosWith=`

See or edit raw graph data.

Testing main template

See or edit raw graph data.

Testing for inverted y-axis

See or edit raw graph data.

See or edit raw graph data.

Test dataset optional filtering (e.g. for limiting x-axis displayed range)

without filtering (default width)

See or edit raw graph data.

filter = 1995 <= datum.year && datum.year <= 2002

See or edit raw graph data.

filter = datum.year <= 2002

See or edit raw graph data.

Test optional arbitrary ("raw") data transforms

dataTransforms = { "type": "filter", ... }, { "type": "filter", ... }

See or edit raw graph data.

Test chart sizing (enabling/disabling chart width grows)

without explicit `chartSizing` (default chart sizing model)

See or edit raw graph data.

chartSizing=fit | chartSizing=padding-box

See or edit raw graph data.

See or edit raw graph data.

chartSizing=pad | chartSizing=content-box

See or edit raw graph data.

See or edit raw graph data.

Test chart title positioning

default chart title positioning | default chart sizing mode

See or edit raw graph data.

See or edit raw graph data.

default chart title positioning | chartSizing=pad | xMin=1982 | xMax=2002 | xAxisClamp=false

See or edit raw graph data.

titleXAlign=left

See or edit raw graph data.

See or edit raw graph data.

titleXAlign=right

See or edit raw graph data.

See or edit raw graph data.

titleXAlign=center

See or edit raw graph data.

See or edit raw graph data.

titleXAlign=center | titleXOffset=80

See or edit raw graph data.

Test axis domain min/max values values + clamping

It is possible to extend axis scales. And it is possible to shrink axis scale by manually providing scale domain min/max values, however without having "clamp":true it will not crop data plotting itself, but only affect axis positioning on graph, while adding "clamp":true actually applies data plotting cropping.

type=year

xAxisMin=1994 | xAxisMax=2020 | yAxisMax=120 | yAxisMin=20 | yZero=false

See or edit raw graph data.

See or edit raw graph data.

xMin=1982 | xMax=2002 | yAxisMin=60 | yAxisMax=90| (without clamping)

See or edit raw graph data.

See or edit raw graph data.

xMin=1982 | xMax=2002 | yAxisMin=60 | yAxisMax=90| xAxisClamp=true | yAxisClamp=true

See or edit raw graph data.

See or edit raw graph data.

Test axis marks font size, angle + test legend labels transform

xAxisAngle = -25 | xAxisFontSize = 20 | yAxisAngle = 25 | yAxisFontSize = 20 | labelsTransforms = { ... }

See or edit raw graph data.

Test annotations

type=year

hAnnotationsValues = {"text": "v 92.5", "y": 92.5} | vAnnotationsValues = {"text": "v 93", "x": 1983}

See or edit raw graph data.

hAnnotationsTable = ... | hAnnotationsTransforms = ... | vAnnotationsTable = ... | vAnnotationsTransforms = ...

See or edit raw graph data.

type=linear

hAnnotationsValues = {"text": "v 92.5", "y": 92.5} | vAnnotationsValues = {"text": "v 93", "x": 1983}

See or edit raw graph data.

hAnnotationsTable = ... | hAnnotationsTransforms = ... | vAnnotationsTable = ... | vAnnotationsTransforms = ...

See or edit raw graph data.

Checking the JSON output

{
  //
  // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
  //            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:Lines
  //
  // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
  //

  "version": 5,
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 300,
"padding": "strict",
  "signals": [{"name": "rightwidth", "update": "width + padding.right", "value":"400" }],
  "data": [{
    "name": "chart",
    "url": "https://commons.wikimedia.org/w/api.php?action=jsondata&formatversion=2&title=bls.gov%2FUS+Women%27s+weekly+earnings+as+a+percent+of+men%27s+by+age%2C+annual+averages.tab&format=json&origin=*",
    "format": {"type": "json"
      , "property": "data"
      
    },
    "transform": [


      // Convert xField parameter into a field "_xfield"
      {"type": "formula", "as": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
      },
      {"type": "collect", "sort": {"field": ["_xfield"]} }
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]}
, {"type": "formula", "as": "_yfield", "expr": "datum.value" }

    ]
  },
// source of labels for `tabletype=tab`
  {
    "name": "labels",
    "url": "https://commons.wikimedia.org/w/api.php?action=jsondata&formatversion=2&title=bls.gov%2FUS+Women%27s+weekly+earnings+as+a+percent+of+men%27s+by+age%2C+annual+averages.tab&format=json&origin=*",
    "format": {"type": "json", "property": "fields"},
    "transform": [


    ]
  },



  ],
  "scales": [
    {
      "name": "x",
      "type": "time",
      "domain": {"data": "chart", "field": "_xfield"},
      "range": "width",
      

      
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "domain": {"data": "chart", "field": "_yfield"},
      "zero": false,
      
      "domainMax": 100,
      
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": ["#0000aa","#ff8000"], 
      "domain": {"data": "chart", "field": "key"}
    },
{
      "name": "labels",
      "type": "ordinal",
"domain": {"data": "labels", "field": "name"},
      "range": {"data": "labels", "field": "title"},
    }
  ],
"legends": [{
    "fill": "color",
    "stroke": "color",
"title": "Age group (sandbox)",
"encode": { "update": { "labels": { "text": {"scale": "labels", "field": "data"} } } }
  }],
  "axes": [
    {
      "scale": "x", "orient": "bottom", "tickSize": 0,
      "tickCount": 7,
      "title": "Year",
      
      
      "encode": { 
        "update": { "labels": { 
          
          
        } } 
       }
    },
    {
      "scale": "y", "orient": "left", "tickSize": 0,
      
      "title": "Percentage",
      
      "grid": true,
      "encode": { 
        "labels": { 
          
          
        } 
       }
    }
  ],

  "marks": [
    // Group data by the group parameter or "key", and draw lines, one line per group
    {
      "type": "group",
      "from": {
        "facet": {
          "name": ["key"],
          "data": "chart",
          "groupby": ["key"]
        }
      },
      "marks": [
        {
          "type": "line",
          "from": {"data": ["key"]},
          "encode": {
            "hover": {
              "stroke": {"value": "red"}
            },
            "update": {
              "stroke": {"scale": "color", "field": "key"}
            },
            "enter": {
              "y": {"scale": "y", "field": "_yfield"},
              "x": {"scale": "x", "field": "_xfield"},
              "stroke": {"scale": "color", "field": "key"},
              "interpolate": {"value": "linear"},
              "strokeWidth": {"value": 2.5}
            }
          }
        }
        
      ],
    },




// Draw title at the top of the graph
    {
      "type": "text",
      "encode": {
        "enter": {
          "y": {"value": -15},
"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },
          "text": {"value": "Gender pay gap in the United States_"},
          "fontWeight": {"value": "bold"},
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#000"}
        }
      }
    }
  ]
}

See or edit raw graph data.

Retrieved from "https://www.mediawiki.org/w/index.php?title=Template:Graph:Lines/testcases&oldid=6415198"