Template:Graph:Lines/testcases
Jump to navigation
Jump to search
With
Without
 | This is the template test cases page for the sandbox of Template:Graph:Lines. to update the examples. |
Testing sandbox version
<graph> {
// // 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": 2, "width": 400, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"400"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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","blue","red"],
"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)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
Log scaled
With |replaceZerosWith=1
<graph> {
// // 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": 2, "width": 500, "height": 200,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///COVID-19 cases in Tamil Nadu.tab",
"format": {"type": "json"
, "property": "data"
, "parse": {"date": "date"}
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datum.date"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["totalDeaths", "totalRecoveries", "activeCases", "totalConfirmedCases"]} , {"type": "formula", "field": "_yfield", "expr": "max(datum.value, 1)" } , {"type": "filter", "test": "datum._yfield != 0"}
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///COVID-19 cases in Tamil Nadu.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "field": "_xfield"},
"range": "width",
},
{
"name": "y",
"type": "log",
"range": "height",
"domain": {"data": "chart", "field": "_yfield"},
"domainMin": 1,
},
{
"name": "color",
"type": "ordinal",
"range": "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": "Legend", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Date",
"grid": true,
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Count",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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}
}
}
}
],
},
]
} </graph>
See or edit raw graph data.
Without |replaceZerosWith=
<graph> {
// // 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": 2, "width": 500, "height": 200,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///COVID-19 cases in Tamil Nadu.tab",
"format": {"type": "json"
, "property": "data"
, "parse": {"date": "date"}
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datum.date"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["totalDeaths", "totalRecoveries", "activeCases", "totalConfirmedCases"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" } , {"type": "filter", "test": "datum._yfield != 0"}
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///COVID-19 cases in Tamil Nadu.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "field": "_xfield"},
"range": "width",
},
{
"name": "y",
"type": "log",
"range": "height",
"domain": {"data": "chart", "field": "_yfield"},
"domainMin": 1,
},
{
"name": "color",
"type": "ordinal",
"range": "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": "Legend", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Date",
"grid": true,
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Count",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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}
}
}
}
],
},
]
} </graph>
See or edit raw graph data.
Testing main template
<graph> {
// // 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": 2, "width": 400, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"400"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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 (live)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
Testing for inverted y-axis
<graph> {
// // 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": 2, "width": 400, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"400"}],
"data": [{
"name": "chart",
"url": "tabular:///Men's World Rugby rankings.tab",
"format": {"type": "json"
, "property": "data"
, "parse": {"date": "date"}
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datum.date"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["New_Zealand", "Australia"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///Men's World Rugby rankings.tab",
"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,
"domainMin": 8,
"domainMax": -1,
},
{
"name": "color",
"type": "ordinal",
"range": "category10",
"domain": {"data": "chart", "field": "key"}
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "field": "name"},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"ticks": 4,
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },
"text": {"value": "Men's World Rugby rankings"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit raw graph data.
<graph> {
// // 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": 2, "width": 400, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"400"}],
"data": [{
"name": "chart",
"url": "tabular:///Men's World Rugby rankings.tab",
"format": {"type": "json"
, "property": "data"
, "parse": {"date": "date"}
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datum.date"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["New_Zealand", "Australia"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///Men's World Rugby rankings.tab",
"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"},
},
{
"name": "color",
"type": "ordinal",
"range": "category10",
"domain": {"data": "chart", "field": "key"}
},
{
"name": "labels",
"type": "ordinal",
"domain": {"data": "labels", "field": "name"},
"range": {"data": "labels", "field": "title"},
}
],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"ticks": 4,
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },
"text": {"value": "Men's World Rugby rankings"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit raw graph data.
Test dataset optional filtering (e.g. for limiting x-axis displayed range)
without filtering (default width)
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
filter = 1995 <= datum.year && datum.year <= 2002
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Optionally filter data with an template expression parameter
// e.g. `filter = datum.some_dataset_field > 1900 && datum.some_dataset_field < 2000` where `some_dataset_field` means some valid field of displayed dataset
{ "type": "filter", "test": "1995 <= datum.year && datum.year <= 2002" },
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
filter = datum.year <= 2002
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Optionally filter data with an template expression parameter
// e.g. `filter = datum.some_dataset_field > 1900 && datum.some_dataset_field < 2000` where `some_dataset_field` means some valid field of displayed dataset
{ "type": "filter", "test": "datum.year <= 2002" },
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
Test optional arbitrary ("raw") data transforms
dataTransforms = { "type": "filter", ... }, { "type": "filter", ... }
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// chart data custom transforms
{ "type": "filter", "test": "1995 <= datum.year" },
{ "type": "filter", "test": "datum.year <= 2002" },
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
Test chart sizing (enabling/disabling chart width grows)
without explicit `chartSizing` (default chart sizing model)
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
chartSizing=fit | chartSizing=padding-box
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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 (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
chartSizing=pad | chartSizing=content-box
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "auto",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "auto",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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 (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
Test chart title positioning
default chart title positioning | default chart sizing mode
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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 (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
default chart title positioning | chartSizing=pad | xMin=1982 | xMax=2002 | xAxisClamp=false
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "auto",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "field": "_xfield"},
"range": "width",
"domainMin": 378691200000,
"domainMax": 1009843200000,
"clamp": false,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "chart", "field": "_yfield"},
"zero": false,
"domainMax": 100,
},
{
"name": "color",
"type": "ordinal",
"range": "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 (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
titleXAlign=left
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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 (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"x": {"value": 0 },
"text": {"value": "Gender pay gap in the United States"},
"fontWeight": {"value": "bold"},
"align": {"value": "left"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit raw graph data.
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"x": {"value": 0 },
"text": {"value": "Gender pay gap in the United States"},
"fontWeight": {"value": "bold"},
"align": {"value": "left"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit raw graph data.
titleXAlign=right
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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 (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"x2": {"signal": "width", "mult": 1.0, "offset": 0 },
"text": {"value": "Gender pay gap in the United States"},
"fontWeight": {"value": "bold"},
"align": {"value": "right"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit raw graph data.
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"x2": {"signal": "width", "mult": 1.0, "offset": 0 },
"text": {"value": "Gender pay gap in the United States"},
"fontWeight": {"value": "bold"},
"align": {"value": "right"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit raw graph data.
titleXAlign=center
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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 (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"xc": {"signal": "width", "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>
See or edit raw graph data.
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"xc": {"signal": "width", "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>
See or edit raw graph data.
titleXAlign=center | titleXOffset=80
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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": "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 (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"xc": {"signal": "width", "mult": 0.5, "offset": 80 },
"text": {"value": "Gender pay gap in the United States"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
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
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "field": "_xfield"},
"range": "width",
"domainMin": 0,
"domainMax": 1420070400000,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "chart", "field": "_yfield"},
"zero": false,
"domainMin": 20,
"domainMax": 120,
},
{
"name": "color",
"type": "ordinal",
"range": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },
"text": {"value": "Gender pay gap in the United States (chartSizing=fit)"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit raw graph data.
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "auto",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "field": "_xfield"},
"range": "width",
"domainMin": 0,
"domainMax": 1420070400000,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "chart", "field": "_yfield"},
"zero": false,
"domainMin": 20,
"domainMax": 120,
},
{
"name": "color",
"type": "ordinal",
"range": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },
"text": {"value": "Gender pay gap in the United States (chartSizing=pad)"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit raw graph data.
xMin=1982 | xMax=2002 | yAxisMin=60 | yAxisMax=90| (without clamping)
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "field": "_xfield"},
"range": "width",
"domainMin": 378691200000,
"domainMax": 1009843200000,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "chart", "field": "_yfield"},
"zero": false,
"domainMin": 60,
"domainMax": 90,
},
{
"name": "color",
"type": "ordinal",
"range": ["rgba(31 119 180 / 30%)","rgba(255 127 14 / 30%)","rgba(44 160 44 / 30%)","rgba(214 39 40 / 30%)"],
"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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },
"text": {"value": "Gender pay gap in the United States (chartSizing=fit)"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit raw graph data.
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "auto",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "field": "_xfield"},
"range": "width",
"domainMin": 378691200000,
"domainMax": 1009843200000,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "chart", "field": "_yfield"},
"zero": false,
"domainMin": 60,
"domainMax": 90
-
Caption1 -
Caption2
,
},
{
"name": "color",
"type": "ordinal",
"range": ["rgba(31 119 180 / 30%)","rgba(255 127 14 / 30%)","rgba(44 160 44 / 30%)","rgba(214 39 40 / 30%)"],
"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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },
"text": {"value": "Gender pay gap in the United States (chartSizing=pad)"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit raw graph data.
xMin=1982 | xMax=2002 | yAxisMin=60 | yAxisMax=90| xAxisClamp=true | yAxisClamp=true
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "field": "_xfield"},
"range": "width",
"domainMin": 378691200000,
"domainMax": 1009843200000,
"clamp": true,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "chart", "field": "_yfield"},
"zero": false,
"domainMin": 60,
"domainMax": 90,
"clamp": true,
},
{
"name": "color",
"type": "ordinal",
"range": ["rgba(31 119 180 / 30%)","rgba(255 127 14 / 30%)","rgba(44 160 44 / 30%)","rgba(214 39 40 / 30%)"],
"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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },
"text": {"value": "Gender pay gap in the United States (chartSizing=fit)"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
See or edit raw graph data.
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "auto",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {"data": "chart", "field": "_xfield"},
"range": "width",
"domainMin": 378691200000,
"domainMax": 1009843200000,
"clamp": true,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "chart", "field": "_yfield"},
"zero": false,
"domainMin": 60,
"domainMax": 90,
"clamp": true,
},
{
"name": "color",
"type": "ordinal",
"range": ["rgba(31 119 180 / 30%)","rgba(255 127 14 / 30%)","rgba(44 160 44 / 30%)","rgba(214 39 40 / 30%)"],
"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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"enter": {
"y": {"value": -15},
"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },
"text": {"value": "Gender pay gap in the United States (chartSizing=pad)"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
} </graph>
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 = { ... }
<graph> {
// // 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": 2, "width": 500, "height": 300,
"padding": "auto",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Optionally filter data with an template expression parameter
// e.g. `filter = datum.some_dataset_field > 1900 && datum.some_dataset_field < 2000` where `some_dataset_field` means some valid field of displayed dataset
{ "type": "filter", "test": "datum.name != 'year'" },
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
// labels custom transforms
{"type": "formula", "field": "title", "expr": "datum.title + ' (' + datum.name + ')'"},
] },
],
"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": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
"align": {"value": "right"}, "angle": {"value": -25 },
"fontSize": {"value": 20 },
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
"align": {"value": "right"}, "angle": {"value": 25 },
"fontSize": {"value": 20 },
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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>
See or edit raw graph data.
Test annotations
type=year
hAnnotationsValues = {"text": "v 92.5", "y": 92.5} | vAnnotationsValues = {"text": "v 93", "x": 1983}
<graph> {
// // 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": 2, "width": 640, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"640"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
// Each vertical annotation is expected to be x-scale typed `x`, string `text`,
// and optional string `color` (e.g. "#4d2800")
{
"name": "vAnnotations",
"values": [{"text": "v 93", "x": 1983}],
"transform": [
// in case of `type=year` convert year number to UNIX timestamp
{"type": "formula", "field": "x", "expr": "datetime(datum.x, 0, 1)"},
// expected item format `{"text": "...", "color": "#000", x: _ }`
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
// Each horizontal annotation is expected to be numeric `y`, string `text`,
// and optional string `color` (e.g. "#4d2800")
{
"name": "hAnnotations",
"values": [{"text": "v 92.5", "y": 92.5}],
"transform": [
// expected item format `{"text": "...", "color": "#000", y: 0}`
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
],
"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": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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}
}
}
}
],
},
// vertical annotations dashed line
{
"type": "rule",
"properties": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"y2": {"field": {"group": "height"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "vAnnotations"}
},
// vertical annotations text
{
"type": "text",
"properties": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"align": {"value": "right"},
"dx": {"value": -3},
"dy": {"value": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": -90},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "vAnnotations"}
},
// horizontal annotations dashed line
{
"type": "rule",
"properties": {
"update": {
"y": {"scale": "y", "field": "y"},
"x": {"value": 0 },
"x2": {"field": {"group": "width"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "hAnnotations"}
},
// horizontal annotations text
{
"type": "text",
"properties": {
"update": {
"y": {"scale": "y", "field": "y", "offset": 3},
"x": {"value": 0, "offset": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": 0},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "hAnnotations"}
},
// Draw title at the top of the graph
{
"type": "text",
"properties": {
"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>
See or edit raw graph data.
hAnnotationsTable = ... | hAnnotationsTransforms = ... | vAnnotationsTable = ... | vAnnotationsTransforms = ...
<graph> {
// // 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": 2, "width": 640, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"640"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
// Each vertical annotation is expected to be x-scale typed `x`, string `text`,
// and optional string `color` (e.g. "#4d2800")
{
"name": "vAnnotations",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "data"},
"transform": [
{ "type": "filter", "test": "datum.year == 1982 || datum.year == 1987" },
{ "type": "formula", "field": "x", "expr": "datum.year" },
{ "type": "formula", "field": "text", "expr": "'v ' + datum.age_16_24+ ' ' + datum.year" },
// in case of `type=year` convert year number to UNIX timestamp
{"type": "formula", "field": "x", "expr": "datetime(datum.x, 0, 1)"},
// expected item format `{"text": "...", "color": "#000", x: _ }`
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
// Each horizontal annotation is expected to be numeric `y`, string `text`,
// and optional string `color` (e.g. "#4d2800")
{
"name": "hAnnotations",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "data"},
"transform": [
{ "type": "filter", "test": "datum.year == 1983 || datum.year == 1992" },
{ "type": "formula", "field": "y", "expr": "datum.age_16_24" },
{ "type": "formula", "field": "text", "expr": "'v ' + datum.age_16_24+ ' ' + datum.year" },
// expected item format `{"text": "...", "color": "#000", y: 0}`
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
],
"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": 110,
},
{
"name": "color",
"type": "ordinal",
"range": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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}
}
}
}
],
},
// vertical annotations dashed line
{
"type": "rule",
"properties": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"y2": {"field": {"group": "height"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "vAnnotations"}
},
// vertical annotations text
{
"type": "text",
"properties": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"align": {"value": "right"},
"dx": {"value": -3},
"dy": {"value": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": -90},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "vAnnotations"}
},
// horizontal annotations dashed line
{
"type": "rule",
"properties": {
"update": {
"y": {"scale": "y", "field": "y"},
"x": {"value": 0 },
"x2": {"field": {"group": "width"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "hAnnotations"}
},
// horizontal annotations text
{
"type": "text",
"properties": {
"update": {
"y": {"scale": "y", "field": "y", "offset": 3},
"x": {"value": 0, "offset": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": 0},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "hAnnotations"}
},
// Draw title at the top of the graph
{
"type": "text",
"properties": {
"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>
See or edit raw graph data.
type=linear
hAnnotationsValues = {"text": "v 92.5", "y": 92.5} | vAnnotationsValues = {"text": "v 93", "x": 1983}
<graph> {
// // 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": 2, "width": 640, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"640"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datum.year"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
// Each vertical annotation is expected to be x-scale typed `x`, string `text`,
// and optional string `color` (e.g. "#4d2800")
{
"name": "vAnnotations",
"values": [{"text": "v 93", "x": 1983}],
"transform": [
// expected item format `{"text": "...", "color": "#000", x: _ }`
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
// Each horizontal annotation is expected to be numeric `y`, string `text`,
// and optional string `color` (e.g. "#4d2800")
{
"name": "hAnnotations",
"values": [{"text": "v 92.5", "y": 92.5}],
"transform": [
// expected item format `{"text": "...", "color": "#000", y: 0}`
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "chart", "field": "_xfield"},
"range": "width",
"zero": false,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "chart", "field": "_yfield"},
"zero": false,
"domainMax": 100,
},
{
"name": "color",
"type": "ordinal",
"range": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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}
}
}
}
],
},
// vertical annotations dashed line
{
"type": "rule",
"properties": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"y2": {"field": {"group": "height"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "vAnnotations"}
},
// vertical annotations text
{
"type": "text",
"properties": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"align": {"value": "right"},
"dx": {"value": -3},
"dy": {"value": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": -90},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "vAnnotations"}
},
// horizontal annotations dashed line
{
"type": "rule",
"properties": {
"update": {
"y": {"scale": "y", "field": "y"},
"x": {"value": 0 },
"x2": {"field": {"group": "width"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "hAnnotations"}
},
// horizontal annotations text
{
"type": "text",
"properties": {
"update": {
"y": {"scale": "y", "field": "y", "offset": 3},
"x": {"value": 0, "offset": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": 0},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "hAnnotations"}
},
// Draw title at the top of the graph
{
"type": "text",
"properties": {
"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>
See or edit raw graph data.
hAnnotationsTable = ... | hAnnotationsTransforms = ... | vAnnotationsTable = ... | vAnnotationsTransforms = ...
<graph> {
// // 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": 2, "width": 640, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"640"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datum.year"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }
] },
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "fields"},
"transform": [
] },
// Each vertical annotation is expected to be x-scale typed `x`, string `text`,
// and optional string `color` (e.g. "#4d2800")
{
"name": "vAnnotations",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "data"},
"transform": [
{ "type": "filter", "test": "datum.year == 1982 || datum.year == 1987" },
{ "type": "formula", "field": "x", "expr": "datum.year" },
{ "type": "formula", "field": "text", "expr": "'v ' + datum.age_16_24+ ' ' + datum.year" },
// expected item format `{"text": "...", "color": "#000", x: _ }`
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
// Each horizontal annotation is expected to be numeric `y`, string `text`,
// and optional string `color` (e.g. "#4d2800")
{
"name": "hAnnotations",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json", "property": "data"},
"transform": [
{ "type": "filter", "test": "datum.year == 1983 || datum.year == 1992" },
{ "type": "formula", "field": "y", "expr": "datum.age_16_24" },
{ "type": "formula", "field": "text", "expr": "'v ' + datum.age_16_24+ ' ' + datum.year" },
// expected item format `{"text": "...", "color": "#000", y: 0}`
{ "type": "formula", "field": "text", "expr": "datum.text || " },
{ "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
]
},
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "chart", "field": "_xfield"},
"range": "width",
"zero": false,
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "chart", "field": "_yfield"},
"zero": false,
"domainMax": 110,
},
{
"name": "color",
"type": "ordinal",
"range": "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", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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}
}
}
}
],
},
// vertical annotations dashed line
{
"type": "rule",
"properties": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"y2": {"field": {"group": "height"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "vAnnotations"}
},
// vertical annotations text
{
"type": "text",
"properties": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"value": 0},
"align": {"value": "right"},
"dx": {"value": -3},
"dy": {"value": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": -90},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "vAnnotations"}
},
// horizontal annotations dashed line
{
"type": "rule",
"properties": {
"update": {
"y": {"scale": "y", "field": "y"},
"x": {"value": 0 },
"x2": {"field": {"group": "width"} },
"stroke": {"field": "color"},
"opacity": {"value": 0.75},
"strokeWidth": {"value": 1},
"strokeDash": {"value": [6,1]}
}
},
"from": {"data": "hAnnotations"}
},
// horizontal annotations text
{
"type": "text",
"properties": {
"update": {
"y": {"scale": "y", "field": "y", "offset": 3},
"x": {"value": 0, "offset": 3},
"baseline": {"value": "top"},
"text": {"field": "text"},
"angle": {"value": 0},
"opacity": {"value": 0.75},
"fill": {"field": "color"}
}
},
"from": {"data": "hAnnotations"}
},
// Draw title at the top of the graph
{
"type": "text",
"properties": {
"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>
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": 2,
"width": 400,
"height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"400"}],
"data": [{
"name": "chart",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"format": {"type": "json"
, "property": "data"
},
"transform": [
// Convert xField parameter into a field "_xfield"
{"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}
, {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]}
, {"type": "formula", "field": "_yfield", "expr": "datum.value" }
]
},
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
"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)",
"properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}],
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
"ticks": 7,
"title": "Year",
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"title": "Percentage",
"grid": true,
"properties": {
"labels": {
}
}
}
],
"marks": [
// Group data by the group parameter or "key", and draw lines, one line per group
{
"type": "group",
"from": {
"data": "chart",
"transform": [{"type": "facet", "groupby": ["key"]}]
},
"marks": [
{
"type": "line",
"properties": {
"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",
"properties": {
"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.
<templatedata>