10 - Data visualization

Giving Data Meaning

Prezentácia

23MB

KPdata.pdf

PDF

Open

Autor: Marco Fíšan

Motivácia

Dať dátam ich význam a zobraziť ich tak, aby sme ich vedeli porovnať a spracovať.

Porovnaj:

Land-ocean temperature index, 1880 to present, with base period 1951-1980. The solid black line is the global annual mean and the solid red line is the five-year lowess smooth. The gray shading represents the total (LSAT and SST) annual uncertainty at a 95% confidence interval. Zdroj: GISS NASA

Zdroj: https://showyourstripes.info/

The Economics cover

Inšpirácia

Information is BeautifulInformation is Beautiful

Olivia Vane - Data visualisationwww.oliviavane.co.uk

HomeGapminder

VisualComplexity - VISUAL COMPLEXITYweb-books.com

Zadanie

Duncan Geere - Creating Data Art With p5.js

Použité príkazy

loadTable()

Reads the contents of a file or URL and creates a p5.Table object with its values.

https://p5js.org/reference/p5/loadTable/

get() (p5.Table)

Retrieves a value from the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title. https://p5js.org/reference/p5.Table/get

lerpColor()

Blends two colors to find a third color between them.

https://p5js.org/reference/p5/lerpColor/

Zdroje dát

Data.GISS: GISS Surface Temperature Analysis (GISTEMP v4)data.giss.nasa.gov

Grab the Zonal annual means CSV

NASA Open APIsapi.nasa.gov

Otvorené údaje Štatistického úradu SR - APIdata.statistics.sk

The World’s Weather Intelligence PlatformTomorrow.io

API pre počasie

let tempData = []; // Array to store upcoming temperature data
let apiKey = 'P2ePAXCKPdyu2bqEESAWgAMqhzIFvr53'; 
let city = 'Bratislava'; // City name

function preload() {
  let apiURL = `https://api.tomorrow.io/v4/timelines?location=${city}&fields=temperature&timesteps=1d&units=metric&apikey=${apiKey}`;
  loadJSON(apiURL, processWeatherData);
}

function processWeatherData(data) {
  // Extract daily temperatures
  tempData = data.data.timelines[0].intervals.map(interval => interval.values.temperature);
}