External Data for infographics

Hi, i‘m looking for a solution to animate simple bar charts with hype. Is it possible to import external datas for that (fe. csv) to keep them automaticaly uptodate? Any thoughts or examples? Thx!

Here's a basic example that involves importing data in a .txt file and loading it:

There are many examples of JSON, CSV and TXT importing for usage in Hype. In terms of generating charts, this would require reading that data, and then animating some property of a shape by feeding that data into a function:

A single line like this would set a 'bar' element in Hype to a new height over three seconds, if you set the variable 'NewPosition' to be the property read from a live CSV feed:

hypeDocument.setElementProperty(barchart, 'top', NewPosition, 3.0, 'easeout')

More properties you can set using this format are here: Tumult Hype Documentation


To add to Daniel, I also can recommend having a look at using CSS variables if that is something you can and want to explore. It is a very fascinating topic and drastically underexplored in this forum. CSS-Dynamische-Daten-Variabeln-Scope.hype.zip (38,3 KB)

Another approach is using fetch and JSON files and combining it with regular Hype function calls and Hype Data Magic: fetch_hype_data_magic_advanced.hype.zip (46,1 KB)

The basics of ingesting data using Hype are covered in the fetch command:


Another approach is to use JSONP… it is JSON wrapped in a JS file, as these have less cross-origin restriction. If this is something you have to consider, have a look at:


Thanks for your hints! Quite complicate for me :wink: But i found a cool tool... https://flourish.studio/
Maybe also interesting :wink:



two more :slight_smile:


Yes, there are some good paid specialized SaaS out there… although they really take it from the living once you need it white labeled I must say!

just posted those in addition to the flourish one ... :slight_smile:

This is a quick adaption from the swatch project i built and the csv parsing I use now instead of jsonp

The csv is a Numbers.app sheet export and in the example is internal to the project but can be fetched from any where including a public google sheet.

in the init function you set the csv url path.

The run() is where you design your chart.

The csv rows ->

var labels = thisStuff[0]  //-- for bar text label Group ID  -- row 1
var textKeys = thisStuff[1] //-- for bar text label  -- row 2
var values_  = thisStuff[2] //-- for bar height   -- row 3
var barCol = thisStuff[3]  //-- for bar colour -- row 4

csvdata.zip (89.4 KB)


Same example but bars are now symbols, which means adding new bars is as easy as copying placing the symbol ,giving the bar a class name (i.e ABar,BBar etc.) and updating the csv.

csvtest.hypetemplate.zip (38.2 KB)

1 Like