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
a | b |
---|---|
1 | 2 |
- 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 |
---|---|---|---|
1 | Jon | Snow | 35 |
2 | Cersei | Lannister | 42 |
3 | Jaime | Lannister | 45 |
4 | Arya | Stark | 16 |
7 | Ferrara | Clifford | 44 |
8 | Rossini | Frances | 36 |
9 | Harvey | Roxie | 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
`} />
Year | Temp Anomaly |
---|---|
1850 | -0.418 |
2020 | 0.923 |
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
-
a very interesting footnote. ↩