---
title: Demo
author: Rufus Pollock
description: This demos and documents Data Literate features live
---

<MetaData title={title} author={author} description={description} />


You can see the raw source of this page here: https://raw.githubusercontent.com/datopian/data-literate/main/content/demo.mdx

## Table of Contents

## GFM

We can have github-flavored markdown including markdown tables, auto-linked links and checklists:

```
https://github.com/datopian/portal.js

| a | b |
|---|---|
| 1 | 2 |

* [x] one thing to do
* [ ] a second thing to do
```

https://github.com/datopian/portal.js

| a | b |
|---|---|
| 1 | 2 |

* [x] one thing to do
* [ ] a second thing to do

## Footnotes

```
here is a footnote reference[^1]

[^1]: a very interesting footnote.
```

here is a footnote reference[^1]

[^1]: a very interesting footnote.


## Frontmatter

Posts can have frontmatter like:

```
---
title: Hello World
author: Rufus Pollock
---
```

The title and description are pulled from the MDX file and processed using `gray-matter`. Additionally, links are rendered using a custom component passed to `next-mdx-remote`.

## A Table of Contents

You can create a table of contents by having a markdown heading named `Table of Contents`. You can see an example at the start of this post.


## A Table

You can create a simple table ...

```
<Table cols={[
    { key: 'id', name: 'ID' },
    { key: 'firstName', name: 'First name' },
    { key: 'lastName', name: 'Last name' },
    { key: 'age', name: 'Age' }
  ]} data={[
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
  ]}
  />
```

<Table cols={[
    { key: 'id', name: 'ID' },
    { key: 'firstName', name: 'First name' },
    { key: 'lastName', name: 'Last name' },
    { key: 'age', name: 'Age' }
  ]} data={[
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
  ]}
  />

### Table from Raw CSV

You can also pass raw CSV as the content ...

```
<Table csv={`
Year,Temp Anomaly
1850,-0.418
2020,0.923
`} />
```

<Table csv={`
Year,Temp Anomaly,
1850,-0.418
2020,0.923
`} />

### Table from a URL

<Table url='/_files/HadCRUT.5.0.1.0.analysis.summary_series.global.annual.csv' />

```
<Table url='/_files/HadCRUT.5.0.1.0.analysis.summary_series.global.annual.csv' />
```
___

You can also create a Table Grid, with more advance features

```
<TableGrid cols={[
    { key: 'id', name: 'ID' },
    { key: 'firstName', name: 'First name' },
    { key: 'lastName', name: 'Last name' },
    { key: 'age', name: 'Age' }
  ]} data={[
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
  ]}
  />
```

<TableGrid cols={[
    { key: 'id', name: 'ID' },
    { key: 'firstName', name: 'First name' },
    { key: 'lastName', name: 'Last name' },
    { key: 'age', name: 'Age' }
  ]} data={[
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
  ]}
  />

### Table Grid from Raw CSV

You can also pass raw CSV as the content ...

```
<TableGrid csv={`
Year,Temp Anomaly
1850,-0.418
2020,0.923
`} />
```

<TableGrid csv={`
Year,Temp Anomaly,
1850,-0.418
2020,0.923
`} />

### Table Grid from a URL

```
<TableGrid url='/_files/HadCRUT.5.0.1.0.analysis.summary_series.global.annual.csv' />
```

<TableGrid url='/_files/HadCRUT.5.0.1.0.analysis.summary_series.global.annual.csv' />



## Charts

You can create charts using a simple syntax.

### Line Chart

<LineChart data={
    [
      ["1850",-0.41765878],
      ["1851",-0.2333498],
      ["1852",-0.22939907],
      ["1853",-0.27035445],
      ["1854",-0.29163003]
    ]
  }
  />

```
<LineChart data={
    [
      ["1850",-0.41765878],
      ["1851",-0.2333498],
      ["1852",-0.22939907],
      ["1853",-0.27035445],
      ["1854",-0.29163003]
    ]
  }
  />
```

NB: we have quoted years as otherwise not interpreted as dates but as integers ...


### Vega and Vega Lite

You can using vega or vega-lite. Here's an example using vega-lite:

<VegaLite data={ { "table": [
      {
        "y": -0.418,
        "x": 1850
      },
      {
        "y": 0.923,
        "x": 2020
      }
      ]
    }
  } spec={
    {
      "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
      "mark": "bar",
      "data": {
          "name": "table"
      },
      "encoding": {
          "x": {
              "field": "x",
              "type": "ordinal"
          },
          "y": {
              "field": "y",
              "type": "quantitative"
          }
      }
    }
  } />


```jsx
<VegaLite data={ { "table": [
      {
        "y": -0.418,
        "x": 1850
      },
      {
        "y": 0.923,
        "x": 2020
      }
      ]
    }
  } spec={
    {
      "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
      "mark": "bar",
      "data": {
          "name": "table"
      },
      "encoding": {
          "x": {
              "field": "x",
              "type": "ordinal"
          },
          "y": {
              "field": "y",
              "type": "quantitative"
          }
      }
    }
  } />

```

#### Line Chart from URL with Tooltip

https://vega.github.io/vega-lite/examples/interactive_multi_line_pivot_tooltip.html

<VegaLite spec={ 
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "/_files/HadCRUT.5.0.1.0.analysis.summary_series.global.annual.csv"},
  "width": 600,
  "height": 250,
  "mark": "line",
  "encoding": {
    "x": {"field": "Time", "type": "temporal"},
    "y": {"field": "Anomaly (deg C)", "type": "quantitative"},
    "tooltip": {"field": "Anomaly (deg C)", "type": "quantitative"}
  }
}
} />

## Display Excel Files

Local file ...

```
<Excel src='/_files/eight-centuries-of-global-real-interest-rates-r-g-and-the-suprasecular-decline-1311-2018-data.xlsx' />
```

<Excel src='/_files/eight-centuries-of-global-real-interest-rates-r-g-and-the-suprasecular-decline-1311-2018-data.xlsx' />

Remote files work too (even without CORS) thanks to proxying:

```
<Excel src='https://github.com/datasets/awesome-data/files/6604635/eight-centuries-of-global-real-interest-rates-r-g-and-the-suprasecular-decline-1311-2018-data.xlsx' />
```

<Excel src='https://github.com/datasets/awesome-data/files/6604635/eight-centuries-of-global-real-interest-rates-r-g-and-the-suprasecular-decline-1311-2018-data.xlsx' />