Charts & Maps

Chart Creation

Create a chart by adding this to an article markdown file:

```chart
mark: line
title: Chart Title
width: 33%
encoding:
  x:
    type: nominal
    field: year
  y:
    type: quantitative
    field: Val
fixed:
  commodity: bana
dropdown:
  field: region
  values: fsu-armenia, ssa-burundi
series:
  field: _type
  values: ssp2_gfdl, ssp2_hgem
format: percentage
```

The only require fields are mark and encoding. Note that instead of the word scenario, the database is using _type for indexing purposes but it can be translated when shown in the webtool. The available options can make this seem intimating but try things out using the interactive previewer and you'll have the hang of it in no time!

Options:

• mark: type of chart. Can be one of line, bar, stripe, grouped-bar, or horizontalBar
• title: title of the chart. A string
• width: width of the chart. Either a percentage (50%) or number of pixels (100px) representing the width of the chart. Percentages will work better for responsive/mobile styling.
• height: height of the chart. A number of pixels representing the height of the chart. This parameter is optional.
• encoding: Defines the axes for the chart. requires two properties x and y
  • x/y: requires two properties type and field
    • type: can be one of quantitative, nominal, categorical, or ordinal representing different types of scales.
    • field: one of the column headers from the uploaded data (e.g. commodity, region, year, or Val)
• fixed: applies a filter to all the information brought down from the database to populate the chart. The property is the field name (e.g. commodity, region, year), the value is the desired value for the given field (e.g. bana, usa, 2030). The value can also be a comma-separated list of desired values (e.g. 2030, 2035, 2040)
• dropdown: adds a dropdown for filtering the chart. Requires two properties field and values. This property can also be named anything beginning with the word dropdown (e.g. dropdownRegion). This is useful when creating multiple dropdowns for one chart.
  • field: one of the column headers from the uploaded data (e.g. commodity, region, year)
  • values: a comma-separated list of desired values for dropdown options (e.g. 2030, 2035, 2040)
• change: instead of displaying a sum of values, displays the change between two aggregated values. Requires two properties field and values.
  • field: one of the column headers from the uploaded data (e.g. commodity, region, year)
  • values: a comma-separated list of two values to compare between (e.g. 2015, 2050 or ssp2_gfdl, ssp2_hgem)
  • type: (optional) any of percentage, percent, %, or p will display percent rather than absolute change.
• series: adds multiple series to a line chart. Requires two properties field and values.
  • field: one of the column headers from the uploaded data (e.g. commodity, region, year)
  • values: a comma-separated list of desired values for dropdown options (e.g. ssp2_gfdl, ssp2_hgem)
  • shown: (optional) a comma-separated list of the above values to display on stripe charts
• format: forces the formatting of values. Any of percentage, percent, %, or p will display values as percentages. Values will automatically be shown as a percentage if the change key has type equal to percentage, percent, %, or p.
• decimals: forces the formatter to display this number of decimals for all numbers in this graph.
• yAxisTitle: displays a title on the Y Axis

Map Creation

Create a map by adding this to the markdown file:

```map
title: Map Title
dropdown:
  field: impactparameter
  values: qdxagg, qnxagg, yldxagg, areaxagg, pwxagg, qsupxagg
change:
  field: year
  values: 2015, 2050
  type: percentage
fixed:
  commodity: bana
```

Maps support the above options except mark, encoding, format, yAxisTitle, and series