Β 
Znote (recipes)
Β Β Get Znote Β 

πŸ“Š Online Data β†’ Bar Chart

How to integrate online Datasets with your note

Β 

πŸ“Š Online Data β†’ Bar Chart

Turn real-world data into a chart β€” directly inside your Markdown note. In this example, we’ll fetch a public CSV dataset, save it locally, and visualize it in seconds.

πŸ”Ή Step 1 β€” Load the Data

This snippet loads a public dataset (World GDP by country), converts it from CSV to JSON, and saves it as a local file for later use.

const url = 'https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv';
const csvText = await fetch(url).then(r => r.text());
const json = await csvJSON(csvText, ',');
//print(csvText);
//printJSON(json)
//showDatagrid({data: json, pagination: true});

_fs.writeFileSync(__dirname + "/world_gdp-dataset.json", JSON.stringify(json));
print("βœ… Dataset saved locally as 'world_gdp-dataset.json'");

πŸ”Ή Step 2 β€” Create a Bar Chart

Now, let’s load our local dataset and display the Top 10 countries by GDP as a bar chart.

const data = require("./world_gdp-dataset.json");

// Select top 10 countries by GDP
const top10 = data
  .sort((a, b) => parseFloat(b["GDP (BILLIONS)"]) - parseFloat(a["GDP (BILLIONS)"]))
  .slice(0, 10);

// Prepare chart data
const categories = top10.map(e => e.COUNTRY);
const series = toSeries({
    data: top10, 
    x: "COUNTRY", 
    y: "GDP (BILLIONS)"
});

// Render chart
barChart({
  title: "Top 10 Countries by GDP (2014)",
  horizontal: false,
  series: series,
  categories: categories
});

βœ… Instant insight from public data βœ… No external tools required β€” just Markdown + Znote βœ… 100% local execution β€” your data stays private

Related recipes