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

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

ab
12
  • 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 reference1

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 },
  ]}
  />
ID
First name
Last name
Age
1JonSnow35
2CerseiLannister42
3JaimeLannister45
4AryaStark16
7FerraraClifford44
8RossiniFrances36
9HarveyRoxie65
Page
1 of 1

Table from Raw CSV

You can also pass raw CSV as the content …

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

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

Footnotes

  1. a very interesting footnote.