Demo

This demos and documents Data Literate features live.

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

• Footnotes

• Frontmatter

• A Table of Contents

• A Table

  • Table from Raw CSV
  • Table from a URL

• Charts

  • Line Chart

  • Vega and Vega Lite

    • Line Chart from URL with Tooltip

• Display Excel Files

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

• 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¹

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 tables ...

<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 from a URL

<Table url='https://raw.githubusercontent.com/datopian/data-literate/main/public/_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]
    ]
  }
  />

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"
          }
      }
    }
  } />

Line Chart from URL with Tooltip

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

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' />

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' />