Category:Graph Template Collection

This category contains graphs that are easy to use with the Commons Datasets. Add a graph template, point it to one of the tables on Commons, and you should see a simple graph like this:

{{Graph:Lines 
| table=bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab
| series="age_16_24", "age_25_34", "age_35_44", "age_45_54" 
| title=Gender pay gap in the United States 
| yZero=false | yMax=100 | yGrid=yes | legend=Age group 
}}

<graph lang="json"> {

 //
 // 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": 600,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "update": "width + padding.right", "value":"600" }],
 "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": {"scheme": "category10"}, 
     "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", "encode": { "update": { "labels": { "text": {"scale": "labels", "field": "data"} } } }

 }],
 "axes": [
   {
     "scale": "x", "orient": "bottom", "tickSize": 0,
     "tickCount": 7,
     
     
     
     "encode": { 
       "update": { "labels": { 
         
         
       } } 
      }
   },
   {
     "scale": "y", "orient": "left", "tickSize": 0,
     
     
     
     "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"}
       }
     }
   }
 ]

} </graph>

Design principles for graphs in this category

• Use Help:Tabular_Data
• Use Extension:Graph