Public
Edited
Jul 17, 2024
Insert cell
Insert cell
d3.csvParse
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mdTableRendered = md`${mdTable}`
Insert cell
Insert cell
Insert cell
md`${mdTable}`
Insert cell
penguins
Insert cell
md`## Usage in Observable

~~~js
import {dataToMarkdown} from "@john-guerra/csv-to-markdown-table""
~~~
and then
~~~js
mdTable = dataToMarkdown(yourData)
~~~
`
Insert cell
data.slice(0,1)
Insert cell
{
const columns = Object.keys(data[0]);


const lengths = columns.map(c => d3.max(data.map(d => d[c].toString().length).concat(c.length)));

return lengths
}
Insert cell
mdTable
Insert cell
async function dataToMarkdown(data) {
if (!Array.isArray(data) || data.length < 0)
throw "Please provide an array with elements";

let markup;
const columns = Object.keys(data[0]);

const lengths = columns.map((c) =>
d3.max(
data.map((d) => (d[c] ? d[c].toString().length : 4)).concat(c.length)
)
);

markup = `| ${columns
.map((c, i) => c.padEnd(lengths[i], " "))
.join(" | ")} | `;
markup = markup.concat(
`\n| ${columns.map((c, i) => "-".repeat(lengths[i])).join(" | ")} | `
);
data.forEach(
(d) =>
(markup = markup.concat(
`\n| ${columns
.map((c, i) => (d[c] ? d[c].toString() : "null").padEnd(lengths[i]))
.join(" | ")} | `
))
);

return markup;
}
Insert cell
import {dataInput} from "@john-guerra/file-input-with-default-value"

Insert cell
data
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more