Template:Graph:Stacked

From Bonkipedia
Revision as of 18:05, 12 November 2022 by ManfredoDo (talk | contribs) (1 revision imported: Template documentation pages)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Template documentation


This graph's main version resides at Template:Graph:Stacked . Please make or suggest all the changes there, and copy it everywhere else (until the copying is automated) 

{{Graph:Stacked
| table=Bea.gov/GDP by state.tab
| type=year | xField=year | barwidth=14
| series="TX","NY","CA"
| title=Per state GDP
| chartSizing=fit
}}

{{Graph:Stacked
| table=Bea.gov/GDP by state.tab
| type=year | xField=year | legend=States
| series="TX","NY","CA"
| title=Per state GDP
| chartSizing=fit
}}
<graph>

{ 

 "version": 2,
 "width": 550,
 "height": 250,

"padding": "strict", 

 "data": [

{ 

     "name": "series_fields_names",
     "values": [ "TX","NY","CA" ],
     "transform": [
       {"type": "formula", "field": "orderSrc", "expr": "datum._id"},
     ]
   },
   {
     "name": "chart",

"url": "tabular:///Bea.gov/GDP by state.tab", 

     "format": {"type": "json"

, "property": "data" 

     },
   "transform": [



     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)" 

     },
     {"type": "sort", "by": ["_xfield"]},

{"type": "fold", "fields": ["TX","NY","CA"]}, 

     {"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
     {"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},

   ]
 },

{ 

   "name": "labels",
   "url": "tabular:///Bea.gov/GDP by state.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [



   ]
 },



   {
     "name": "stats",
     "source": "chart",
     "transform": [{
       "type": "aggregate",
       "groupby": ["_xfield"],
       "summarize": [{"field": "value", "ops": ["sum"]}]
     }]
   }
 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},

     "range": "width",
     



   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "stats", "field": "sum_value"},
     
     
     
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "domain": {"data": "chart", "field": "key"},
     "range":

"category10", 

   },

{ 

     "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,
     "offset": 8,
     
     
     
     "properties": { 
       "labels": { 
         
         
       } 
     },
   }
 ],

 "marks": [
   {

"type": "rect", 

     "from": {
       "data": "chart",
       "transform": [
         {"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}
       ]
     },
     "properties": {
       "hover": {
         "fill": { "value": "red" }
       },
       "update": {
         "fill": {"scale": "color", "field": "key"}
       },
       "enter": {
         "x": {"scale": "x", "field": "_xfield"

,"offset":-7 

         },

"width": {"value": 14 }, 

         "y": {"scale": "y", "field": "layout_start"},
         "y2": {"scale": "y", "field": "layout_end"},
         "fill": {"scale": "color", "field": "key"}
       }
     }
   },


{ 

     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "width", "mult": 0.5, "offset": 30 }, 

         "text": {"value": "Per state GDP"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit source data.
 <graph>

{ 

 "version": 2,
 "width": 550,
 "height": 250,

"padding": "strict", 

 "data": [

{ 

     "name": "series_fields_names",
     "values": [ "TX","NY","CA" ],
     "transform": [
       {"type": "formula", "field": "orderSrc", "expr": "datum._id"},
     ]
   },
   {
     "name": "chart",

"url": "tabular:///Bea.gov/GDP by state.tab", 

     "format": {"type": "json"

, "property": "data" 

     },
   "transform": [



     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)" 

     },
     {"type": "sort", "by": ["_xfield"]},

{"type": "fold", "fields": ["TX","NY","CA"]}, 

     {"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
     {"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},

{ 

       "type": "impute",
       "groupby": ["key"],
       "orderby": ["_xfield"],
       "field": "value",
       "method": "value",
       "value": 0
     },
   ]
 },

{ 

   "name": "labels",
   "url": "tabular:///Bea.gov/GDP by state.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [



   ]
 },



   {
     "name": "stats",
     "source": "chart",
     "transform": [{
       "type": "aggregate",
       "groupby": ["_xfield"],
       "summarize": [{"field": "value", "ops": ["sum"]}]
     }]
   }
 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},

     "range": "width",
     



   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "stats", "field": "sum_value"},
     
     
     
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "domain": {"data": "chart", "field": "key"},
     "range":

"category10", 

   },

{ 

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"}, 

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{ 

   "fill": "color",
   "stroke": "color",

"title": "States", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } } 

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     
     
     "properties": { 
       "labels": { 
         
         
       } 
     },
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     
     
     
     "properties": { 
       "labels": { 
         
         
       } 
     },
   }
 ],

 "marks": [
   {

"type": "group", 

     "from": {
       "data": "chart",
       "transform": [
         {"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
         {"type": "facet", "groupby": ["key"]}
       ]
     },
     "marks": [
       {
         "type": "area",
         "properties": {
           "hover": {
             "fill": {"value": "red"}
           },
           "update": {
             "fill": {"scale": "color", "field": "key"}
           },
           "enter": {
             "x": {"scale": "x", "field": "_xfield"},
             "y": {"scale": "y", "field": "layout_start"},
             "y2": {"scale": "y", "field": "layout_end"},
             "fill": {"scale": "color", "field": "key"},
             "interpolate": {"value": "monotone"}
           }
         }
       }
     ],
   },


{ 

     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "width", "mult": 0.5, "offset": 30 }, 

         "text": {"value": "Per state GDP"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit source data.
{{Graph:Stacked | tabletype=query | table=
SELECT ?decade (COUNT(?decade) AS ?count) WHERE {
 ?item wdt:P31 wd:Q3305213 .
 ?item wdt:P571 ?inception .
 BIND( year(?inception) as ?year ). 
 BIND( ROUND(?year/10)*10 as ?decade ) .
 FILTER( ?year > 1400)
} GROUP BY ?decade ORDER BY ?decade
| series="count" | type=year | xField=decade
| title=Paintings by decade
}}

{{Graph:Stacked | tabletype=query | table=
SELECT   ?year  (COUNT(?_genre) AS ?count ) (SAMPLE(?_genreLabel) AS ?label ) WHERE {
 ?item wdt:P31 wd:Q11424.
 ?item wdt:P577 ?_publication_date.
 ?item wdt:P136 ?_genre.
 ?_genre rdfs:label ?_genreLabel.
 BIND(str(YEAR(?_publication_date)) AS ?year)
 FILTER((LANG(?_genreLabel)) = "en")  
 FILTER (?_publication_date >= "2000-00-00T00:00:00Z"^^xsd:dateTime)
}
GROUP BY ?_genreLabel ?year
HAVING (?count > 30)
| type=year | xField=year | group=label | value=count | legend=- 
| title=Number of films by year and genre
| xGrid=y | yGrid=y | colors="category20" | height=460 | barwidth=16
}}
<graph>

{ 

 "version": 2,
 "width": 550,
 "height": 250,



 "data": [

{ 

     "name": "series_fields_names",
     "values": [ "count" ],
     "transform": [
       {"type": "formula", "field": "orderSrc", "expr": "datum._id"},
     ]
   },
   {
     "name": "chart",

"url": "wikidatasparql:///?query=SELECT%20%3Fdecade%20%28COUNT%28%3Fdecade%29%20AS%20%3Fcount%29%20WHERE%20%7B%0A%20%20%3Fitem%20wdt%3AP31%20wd%3AQ3305213%20.%0A%20%20%3Fitem%20wdt%3AP571%20%3Finception%20.%0A%20%20BIND%28%20year%28%3Finception%29%20as%20%3Fyear%20%29.%20%0A%20%20BIND%28%20ROUND%28%3Fyear%2F10%29%2A10%20as%20%3Fdecade%20%29%20.%0A%20%20FILTER%28%20%3Fyear%20%3E%201400%29%0A%7D%20GROUP%20BY%20%3Fdecade%20ORDER%20BY%20%3Fdecade", 

     "format": {"type": "json"



     },
   "transform": [



     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.decade, 0, 1)" 

     },
     {"type": "sort", "by": ["_xfield"]},

{"type": "fold", "fields": ["count"]}, 

     {"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
     {"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},

{ 

       "type": "impute",
       "groupby": ["key"],
       "orderby": ["_xfield"],
       "field": "value",
       "method": "value",
       "value": 0
     },
   ]
 },



   {
     "name": "stats",
     "source": "chart",
     "transform": [{
       "type": "aggregate",
       "groupby": ["_xfield"],
       "summarize": [{"field": "value", "ops": ["sum"]}]
     }]
   }
 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},

     "range": "width",
     



   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "stats", "field": "sum_value"},
     
     
     
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "domain": {"data": "chart", "field": "key"},
     "range":

"category10", 

   },

{ 

     "name": "labels",
     "type": "ordinal",

"domain": ["count"], 

     "range": ["count"],
   }
 ],

 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     
     
     "properties": { 
       "labels": { 
         
         
       } 
     },
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     
     
     
     "properties": { 
       "labels": { 
         
         
       } 
     },
   }
 ],

 "marks": [
   {

"type": "group", 

     "from": {
       "data": "chart",
       "transform": [
         {"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"},
         {"type": "facet", "groupby": ["key"]}
       ]
     },
     "marks": [
       {
         "type": "area",
         "properties": {
           "hover": {
             "fill": {"value": "red"}
           },
           "update": {
             "fill": {"scale": "color", "field": "key"}
           },
           "enter": {
             "x": {"scale": "x", "field": "_xfield"},
             "y": {"scale": "y", "field": "layout_start"},
             "y2": {"scale": "y", "field": "layout_end"},
             "fill": {"scale": "color", "field": "key"},
             "interpolate": {"value": "monotone"}
           }
         }
       }
     ],
   },


{ 

     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "width", "mult": 0.5, "offset": 30 }, 

         "text": {"value": "Paintings by decade"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

<graph>

{ 

 "version": 2,
 "width": 550,
 "height": 460,



 "data": [

   {
     "name": "chart",

"url": "wikidatasparql:///?query=SELECT%20%20%20%3Fyear%20%20%28COUNT%28%3F_genre%29%20AS%20%3Fcount%20%29%20%28SAMPLE%28%3F_genreLabel%29%20AS%20%3Flabel%20%29%20WHERE%20%7B%0A%20%20%3Fitem%20wdt%3AP31%20wd%3AQ11424.%0A%20%20%3Fitem%20wdt%3AP577%20%3F_publication_date.%0A%20%20%3Fitem%20wdt%3AP136%20%3F_genre.%0A%20%20%3F_genre%20rdfs%3Alabel%20%3F_genreLabel.%0A%20%20BIND%28str%28YEAR%28%3F_publication_date%29%29%20AS%20%3Fyear%29%0A%20%20FILTER%28%28LANG%28%3F_genreLabel%29%29%20%3D%20%22en%22%29%0A%20%20%0A%20FILTER%20%28%3F_publication_date%20%3E%3D%20%222000-00-00T00%3A00%3A00Z%22%5E%5Exsd%3AdateTime%29%0A%7D%0AGROUP%20BY%20%3F_genreLabel%20%3Fyear%0AHAVING%20%28%3Fcount%20%3E%2030%29", 

     "format": {"type": "json"



     },
   "transform": [



     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)" 

     },
     {"type": "sort", "by": ["_xfield"]},



   ]
 },



   {
     "name": "stats",
     "source": "chart",
     "transform": [{
       "type": "aggregate",
       "groupby": ["_xfield"],
       "summarize": [{"field": "count", "ops": ["sum"]}]
     }]
   }
 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},

     "range": "width",
     



   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "stats", "field": "sum_count"},
     
     
     
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "domain": {"data": "chart", "field": "label"},
     "range":

"category20", 

   },

 ],

"legends": [{ 

   "fill": "color",
   "stroke": "color",



 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
     },
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     "offset": 9,
     
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
     },
   }
 ],

 "marks": [
   {

"type": "rect", 

     "from": {
       "data": "chart",
       "transform": [
         {"type": "stack", "groupby": ["_xfield"], "sortby": ["label"], "field": "count"}
       ]
     },
     "properties": {
       "hover": {
         "fill": { "value": "red" }
       },
       "update": {
         "fill": {"scale": "color", "field": "label"}
       },
       "enter": {
         "x": {"scale": "x", "field": "_xfield"

,"offset":-8 

         },

"width": {"value": 16 }, 

         "y": {"scale": "y", "field": "layout_start"},
         "y2": {"scale": "y", "field": "layout_end"},
         "fill": {"scale": "color", "field": "label"}
       }
     }
   },


{ 

     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "width", "mult": 0.5, "offset": 30 }, 

         "text": {"value": "Number of films by year and genre"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

Other examples available at testcases page: Template:Graph:Stacked/testcases.

This graph draws one or more independent numeric data series as either bar or area slices, stacked one on top of the other. The data must be stored on Commons' Data namespace or come from Wikidata Query Service.

Template parameters

ParameterDescriptionTypeStatus
Table typetabletype

Specifies the type of the table data. "tab" (default) uses data namespace on commons, without the data: prefix. "query" sends request to wikidata query service.

Default
tab
Stringoptional
Tabletable

Data page name on Commons, without the Data: prefix. The table should contain xField column, like year or date, and one or more series columns to plot. If tabletype parameter is set to "query", this value is the query

Stringrequired
X axis typetype

Type of the x axis - time (e.g. "2015-10" or "2013-03-08), year (integer, but treated as a year), linear (numbers), ordinal (anything)

Default
year
Stringsuggested
X fieldxField

Id of the data column that contains values for the X axis. If type=year, xField is also "year" by default.

Stringrequired
Seriesseries

If each slice is represented by a separate column of data (or if there is only one column), list of the data columns to show as lines. Must be in quotes, and listed by field IDs if coming from a .tab page: "field1", "field2", "field3".

Stringoptional
Groupgroup

If slice color depends on just one column, specify that column's ID, instead of the series parameter.

Stringoptional
Valuevalue

If slice color depends on one column, this parameter should be set to the column which has the values

Stringoptional
Filterfilter

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

Stringoptional
Bar widthbarwidth

If set, show graph with bars instead of areas. If set, must be either an integer pixel width of the bars, or when type=ordinal, can also be set to 'auto'

Stringoptional
X axis starts at 0xZero, xAxisZero

Force to start or not to start X axis with zero. Can be either true or false

Stringoptional
Y axis zero starts at 0yZero, yAxisZero

Force to start or not to start Y axis with zero. Can be either true or false

Stringoptional
X axis scale clampxAxisClamp

no description

Booleanoptional
Y axis scale clampyAxisClamp

no description

Booleanoptional
X axis minimumxMin, xAxisMin

Force X axis to start from this value

Unknownoptional
X axis maximumxMax, xAxisMax

Force X axis to end with this value

Unknownoptional
Y axis minimumyMin, yAxisMin

Force Y axis to start from this value

Unknownoptional
Y axis maximumyMax, yAxisMin

Force Y axis to end with this value

Unknownoptional
Titletitle

Title of the whole graph

Stringoptional
Title horizontal alignmenttitleXAlign

Horizontal alignment of title, could be one of: left, center, right

Stringoptional
Title horizontal offsettitleXOffset

Horizontal offset of title position, could be negative, to shift title to the left, or positive to shift title to the right

Numberoptional
X axis titlexAxis, xAxisTitle

Title of the X axis

Stringoptional
Y axis titleyAxis, yAxisTitle

Title of the Y axis

Stringoptional
X axis labels anglexAxisAngle

Rotates the x axis labels by the specified angle. Recommended values are: -45, +45, -90, +90.

Numberoptional
Y axis labels angleyAxisAngle

Rotates the y axis labels by the specified angle.

Numberoptional
X axis labels font sizexAxisFontSize

no description

Numberoptional
Y axis labels font sizeyAxisFontSize

no description

Numberoptional
X axis gridxGrid

Show grid lines for X axis

Booleanoptional
Y axis gridyGrid

Show grid lines for Y axis

Booleanoptional
X axis ticksxTicks, xAxisTicks

How many ticks to show on X axis. 7 by default. '-' value makes it automatic.

Numberoptional
Y axis ticksyTicks, yAxisTicks

How many ticks to show on Y axis. Auto '-' by default.

Numberoptional
Raw vertical annotation valuesvAnnotationsValues

Supply all annotation values as a list of JSON objects: {"text": "Big event", "x": 1980}, ...

Stringoptional
Raw horizontal annotation valueshAnnotationsValues

Supply all horizontal annotation values as a list of JSON objects: {"text":"Big event", "y": 980}, ...

Stringoptional
Vertical annotation tablevAnnotationsTable

Data page name on Commons, without the Data: prefix. The table must contain "x" column, and optional "text" and "color" columns.

Stringoptional
Horizontal annotation tablehAnnotationsTable

Data page name on Commons, without the Data: prefix. The table must contain "y" column, and optional "text" and "color" columns.

Stringoptional
Vertical annotation data transformsvAnnotationsTransforms

no description

Stringoptional
Horizontal annotation data transformshAnnotationsTransforms

no description

Stringoptional
Legendlegend

Title of the legend

Stringoptional
Widthwidth

no description

Numberoptional
Heightheight

no description

Numberoptional
Chart sizing modechartSizing

Chart sizing mode, could be one of: fit, pad. Vega default mode is `pad`. Use `fit` to force resulting chart canvas sizes to be exactly equal to provided width and height values. Use `pad` (or omit this parameter at all) to define prefered plotting size with provided width and height values, and let Vega increase overall chart size to include legend and title (if any)

Stringoptional
Colorscolors

The colors of the areas or bars, specified as Vega defined rangeliteral. This can also be a list like colors = [ "red", "green" ] or simply colors = red, green

Default
"category10"
Stringoptional
debugdebug

if set, will show graph as raw JSON

Stringoptional
Edit parameter translations
The above documentation is transcluded from Template:Graph:Stacked/doc. (edit | history)
Editors can experiment in this template’s sandbox (create | mirror) and testcases (create) pages.
Please add categories to the /doc subpage. Subpages of this template.
<graph>

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

  "version": 2,
  "width": 550,
  "height": 250,
  // Parameter to controls how width/height should be interpreted.
  // See Vega 2.x "padding" https://vega.github.io/vega/docs/porting-guide/#layout
  // and Vega x.x "autosize" https://vega.github.io/vega-lite/docs/size.html#autosize
  // and CSS attribute "box-sizing" https://developer.mozilla.org/docs/Web/CSS/box-sizing
  // for references


  "data": [

    {
      "name": "chart",

"url": "tabular:///{{{table}}}",
      "format": {"type": "json"
, "property": "data"

      },
    "transform": [



      // Convert xField parameter into a field "_xfield"
      {"type": "formula", "field": "_xfield", "expr":
"datum.{{{xField}}}"
      },
      {"type": "sort", "by": ["_xfield"]},

      // For non-bar graph, ensure that all missing values still present as zeros to avoid area breaks
      // We might need to allow other, non-0 values to be imputed.
{
        "type": "impute",
        "groupby": ["key"],
        "orderby": ["_xfield"],
        "field": "value",
        "method": "value",
        "value": 0
      },
    ]
  },



    {
      "name": "stats",
      "source": "chart",
      "transform": [{
        "type": "aggregate",
        "groupby": ["_xfield"],
        "summarize": [{"field": "value", "ops": ["sum"]}]
      }]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "{{{type}}}",
      "domain": {"data": "chart", "field": "_xfield"},

      "range": "width",
      

      
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "domain": {"data": "stats", "field": "sum_value"},
      
      
      
      
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "chart", "field": "key"},
      "range": 
"category10", 

    },

  ],

  "axes": [
    {
      "scale": "x", "type": "x", "tickSizeEnd": 0,
      "ticks": 7,
      
      
      "properties": { 
        "labels": { 
          
          
        } 
      },
    },
    {
      "scale": "y", "type": "y", "tickSizeEnd": 0,
      // When drawing "type=year" (or "type=ordinal") bars with the given width, shift y axis left by half the width
      
      
      
      
      "properties": { 
        "labels": { 
          
          
        } 
      },
    }
  ],

  "marks": [
    // Group data by the "key", and draw lines, one line per key
    {
"type": "group",
      "from": {
        "data": "chart",
        "transform": [
          {"type": "stack", "groupby": ["_xfield"], "sortby": ["key"], "field": "value"},
          {"type": "facet", "groupby": ["key"]}
        ]
      },
      "marks": [
        {
          "type": "area",
          "properties": {
            "hover": {
              "fill": {"value": "red"}
            },
            "update": {
              "fill": {"scale": "color", "field": "key"}
            },
            "enter": {
              "x": {"scale": "x", "field": "_xfield"},
              "y": {"scale": "y", "field": "layout_start"},
              "y2": {"scale": "y", "field": "layout_end"},
              "fill": {"scale": "color", "field": "key"},
              "interpolate": {"value": "monotone"}
            }
          }
        }
      ],
    },



  ]
}

</graph>
Retrieved from "http://www.bonkipedia.org/index.php?title=Template:Graph:Stacked&oldid=3990"