Template:Graph:Lines/testcases
![]() | 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>
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>
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>
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>
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>
<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>
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>
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>
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>
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>
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>
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>
<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>
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>
<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>
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>
<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>
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>
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>
<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>
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>
<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>
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>
<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>
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>
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>
<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>
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>
<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>
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>
<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>
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>
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>
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>
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>
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>
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"}
}
}
}
]
}
<templatedata>