Data Driven Documents základní principy

Podobné dokumenty
Vektorový formát SVG

(X)HTML, CSS a jquery

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Kaskádové styly (CSS)

Funkce grafiky na webu. Primární grafická informace Fotografie Schémata Diagramy Loga Bannery

+ knihovna funkcí usnadňujících práci v javascriptu

Mgr. Vlastislav Kučera Struktura stránky, hlavička,

Část 1 Moderní JavaScript

M M S. Značkovací jazyky

Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Vývoj Internetových Aplikací

V této příloze je podrobně popsána struktura XML dokumentu s mapou (viz kapitolu 5.3), příklad tohoto XML dokumentu je na přiloženém CD v souboru

Vývoj Internetových Aplikací

Inovace výuky prostřednictvím šablon pro SŠ

HTML - Úvod. Zpracoval: Petr Lasák

Vývoj Internetových Aplikací

CSS Stylování stránek. Zpracoval: Petr Lasák

CSS Kaskádové styly. formátování webových stránek

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

TNPW1 Cvičení aneta.bartuskova@uhk.cz

Úvod do počítačové grafiky

Mgr. Vlastislav Kučera lekce č. 2

13. Vytváření webových stránek

GIS Geografické informační systémy

Úvod do Groovy pro Java experty

NSWI096 - INTERNET JavaScript

MBI - technologická realizace modelu

GIS Geografické informační systémy

Kartografická webová aplikace. Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar Čerba Západočeská univerzita

Parsování HTML. Pro účely testování jsem vytvořil stránku parsovani.html. Zdrojový kód:

Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové technologie

Základy CSS (3. přednáška)

Úvod do jazyka HTML (Hypertext Markup Language)

CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace

Tvorba WWW stránek. Mojmír Volf

HTML Hypertext Markup Language

Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Katedra informatiky Akademický rok:

Úvod do tvorby internetových aplikací

Moderní webové technologie. Jakub ŽÁK

Platforma Java. Petr Krajča. Katedra informatiky Univerzita Palackého v Olomouci. Petr Krajča (UP) KMI/PJA: Seminář V. 27. říjen, / 15

TVORBA WEBOVÝCH STRÁNEK

Dnešní téma. Oblasti standardizace v ICT. Oblasti standardizace v ICT. Oblasti standardizace v ICT

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování

KIV/PIA 2012 Ing. Jan Tichava

Mgr. Vlastislav Kučera přednáška č. 2

Informatika pro moderní fyziky (10) složitější interaktivní dokument, získávání informací z webu

Moderní techniky vývoje webových aplikací

Maturitní témata z předmětu PROGRAMOVÉ VYBAVENÍ pro šk. rok 2012/2013

Úvod do aplikací internetu a přehled možností při tvorbě webu

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD

TRANSFORMACE OBJEKTOVÉ PETRIHO SÍTĚ Z JAZYKA OPNML DO GRAFU TRANSFORMATION OF OBJECT-ORIENTED PETRI NET FROM OPNML LANGUAGE TO GRAPH

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

NSWI142 Webové aplikace Zkouškový test

DATOVÉ FORMÁTY GRAFIKY, JEJICH SPECIFIKA A MOŽNOSTI VYUŽITÍ

Počítačová Podpora Studia. Přednáška 5 Úvod do html a některých souvisejících IT. Web jako platforma pro vývoj aplikací.

Tvorba webových stránek

APLIKACE XML PRO INTERNET

ZNAČKOVACÍ JAZYKY A JEJICH VYUŽÍVÁNÍ MARKUP LANGUAGE AND THEIR USE. Zdeněk Havlíček

Grafika na webu. Lukáš Bařinka

Programování v jazyce JavaScript

NSWI096 - INTERNET. Úvod do HTML

Formuláře. Internetové publikování. Formuláře - příklad

22. Tvorba webových stránek

PRG036 Technologie XML

Pokročilé techniky tvorby sestav v Caché. ZENové Reporty

GIS Geografické informační systémy

Obsah. Předmluva 13. O autorovi 15. Poděkování 16. O odborných korektorech 17. Úvod 19

Předmluva k druhému vydání 13. Úvod 17. ČÁST 2 Vytváření dokumentů XML 65

KAPITOLA 11. Kreslení v prohlížeči. Jazyk SVG

Jazyk XSL XPath XPath XML. Jazyk XSL - rychlá transformace dokumentů. PhDr. Milan Novák, Ph.D. KIN PF JU České Budějovice. 9.

2 PŘÍKLAD IMPORTU ZATÍŽENÍ Z XML

CSS styly. Cascading Style Sheets kaskádové styly

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

Mgr. Vlastislav Kučera přednáška č. 1

Oracle XML DB. Tomáš Nykodým

První kapitola úvod do problematiky

Tvorba webových stránek

1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)

. Grafika a plovoucí prostředí. Zpracování textů na počítači. Ing. Pavel Haluza, Ph.D. ústav informatiky PEF MENDELU v Brně haluza@mendelu.

Nové přístupy tvorby web site. Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001

Začínáme s vývojem her a DOM

!!Via!AUREA,!s.r.o.!

Tvorba stránek v HTML ve Wordu

Kreslíme do webu. Canvas

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

jquery - úvod Zdroj: Jiří Zralý:

O CSS podrobněji. Box model Document flow Layout

Hierarchický model Josef Pelikán CGG MFF UK Praha. 1 / 16

Kaskádové styly. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

Výukový materiál vytvořen v rámci projektu EU peníze školám. "Inovace výuky" registrační číslo CZ.1.07/1.5.00/

Formuláře. Internetové publikování

Inovace výuky prostřednictvím šablon pro SŠ

12. Základy HTML a formuláře v HTML

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,

Obsah. SEZNÁMENÍ S HRAMI V HTML Nové funkce HTML Nové funkce CSS

Child selektory. Adjacent sibling selektory. Pseudoelementy. Atributové selektory. Tabulky. Obtékané elementy. »!!!

Obsah. Stručná historie World Wide Webu 7

Metamorfóza obrázků Josef Pelikán CGG MFF UK Praha

IV122 Matematika a programování Úvod kurzu. Radek Pelánek

Transkript:

Data Driven Documents základní principy 2015 Josef Pelikán, CGG MFF UK Praha http://cgg.mff.cuni.cz/~pepca/ pepca@cgg.mff.cuni.cz D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 1 / 44

DDD, D3 Data-driven documents moderní přístup k zobrazování dat na WWW data nejsou jen zobrazována (renderována) WWW stránkou, ale jsou přímo integrována do HTML objektů W3C DOM Document Object Model (w3c.org) HTML, XHTML, XML jsou hierarchické formáty HTML5 prohlížeče umožňují elegantně k jednotlivým uzlům přistupovat (např. přes JavaScript) D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 2 / 44

Zobrazování grafiky v HTML5 SVG Scalable Vector Graphics také pod patronátem W3C grafické objekty (primitiva) rect, circle, line,.. Snadno přístupné parametry formou XML atributů <circle cx="250" cy="25" r="25"/> možnost použití CSS pro definici vzhledu (stylu) <circle cx="25" cy="25" r="22" class="pumpkin"/> D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 3 / 44

Knihovna D3 (JavaScript) velmi populární JS knihovna transformace, ne nové reprezentace! dobře dokumentovaná a udržovaná (d3js.org) přístupy (standardy!) W3C DOM (Document Object Model) SVG grafika, CSS Data binding, Data joins W3C Selectors API estetika, interaktivita animace ( transitions ) D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 4 / 44

Principy mapování dat na DOM elementy každý prvek visualizace odpovídá nějakámu DOM elementu dynamické úpravy WWW stránky dynamické visualizace (simulace, realtime) nebo interakce uživatele je třeba upravovat DOM též přidávat a ubírat elementy! Data-Driven Documents proto jméno D3 D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 5 / 44

Standardy - HTML5 HTML5 mnoho zdrojů pro studium minimální platný HTML5 dokument <!DOCTYPE html><title/>x stručný HTML dokument <!DOCTYPE html> <html> <head> <meta charset= utf-8 > <title>simple valid HTML5 page</title> </head> <body> <p>paragraph..</p> </body> </html> D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 6 / 44

Standardy - SVG Scalable Vector Graphics W3C standard http://www.w3.org/graphics/svg/ stručná HTML5 stránka se SVG grafikou <!DOCTYPE html> <meta charset= utf-8 > <title>svg hello</title> <svg width= 800 height= 400 > <text y= 12 > Hello, world! </text> </svg> D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 7 / 44

Standardy - CSS Cascading Style Sheets W3C standard (CSS 2.2) http://dev.w3.org/csswg/css2/ nepřidává obsah, pouze definuje styly zobrazení stručná HTML5 stránka s CSS stylem <!DOCTYPE html> <meta charset= utf-8 > <title>css hello</title> <style> body { background: steelblue; } </style> <body> Hello, world! </body> D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 8 / 44

Standardy CSS selectors koncept hojně používaný v CSS W3C doporučení http://www.w3.org/tr/selectors/ zobrazení [výraz, element] boolean příklady.shrek { color: green; } div#menubar { font-weight: bold; } a:visited { color: #F28000; } html:lang(de) {.. } tr:nth-child(odd) { /* every odd row of a table */ } body > p { /* p is immediate child of body */ } h1.opener + h2 { /* adjacent siblings */ } h1 ~ pre { /* general siblings */ } D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 9 / 44

JavaScript skriptování na straně WWW prohlížeče ECMAScript je standardem http://www.ecmascript.org/ příklad <!DOCTYPE html> <meta charset= utf-8 > <title>javascript hello</title> <body> <script> console.log( Hello, world! ); </script> </body> D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 10 / 44

D3.js knihovna jádro knihovny v jediném.js souboru je potřeba stránku opatřit vlastním scriptem šablona stránky používající d3.js <!DOCTYPE html> <meta charset= utf-8 > <title>d3.js template</title> <style> /* my CSS */ </style> <body> <script src= http://d3js.org/d3.v2.js ></script> <script> /* my JavaScript */ </script> </body> D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 11 / 44

D3.js zdroje http://d3js.org/ D3 API reference https://github.com/mbostock/d3/wiki/api-reference D3 WiKi https://github.com/mbostock/d3/wiki D3 Google group https://groups.google.com/group/d3-js D3 Stack Overflow http://stackoverflow.com/questions/tagged/d3.js D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 12 / 44

Selectors API výběr ( selection ) viz jquery, CSS pole HTML uzlů bohatě vybavené funkce vybírající podle typu uzlu, atributů, id, name, class příklady: #foo foo.foo [foo=bar] foo bar foo.bar foo#bar // <any id="foo"> // <foo> // <any class="foo"> // <any foo="bar"> // <foo><bar></foo> // <foo class="bar"> // <foo id="bar"> D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 13 / 44

Selectors API selektor podle W3C standardu: document.queryselectorall( #foo ) nejsou tam selekce, musí se iterovat přes výsledek d3.select( #foo ) vybírá jeden uzel (první, který splňuje dané podmínky) zachová globální selekci (selectall()) d3.selectall( #foo ) vybere všechny uzly podle dané podmínky D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 14 / 44

Práce se selekcí selekce je pole snadno se mění hromadně vlastnosti všech prvků selekce // select all <circle> elements var circle = d3.selectall("circle"); // set some attributes and styles circle.attr("cy", 12); circle.attr("r", 24); circle.style("fill", "red"); D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 15 / 44

Řetězení metod elegantnější a úspornější zápis // select all <circle> elements // and set some attributes and styles d3.selectall("circle").attr("cy", 12);.attr("r", 24);.style("fill", "red"); D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 16 / 44

selection.append přidávání obsahu za vybrané elementy opět možnost hromadné operace // select the <body> element var body = d3.select("body"); // add an <h1> element var h1 = body.append("h1"); h1.text("hello!"); D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 17 / 44

Hromadné příklady stejně jednoduchý zápis: // select all <section> elements var section = d3.selectall("section"); // add an <h1> element to each var h1 = section.append("h1"); h1.text("hello!"); komplikovanější příklad: var h1 = d3.selectall("section").style("background", "steelblue").append("h1").text("hello!"); D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 18 / 44

Data Co když potřebuji přidávat mnoho elementů? lepší je na to jít přes data.. data jsou také pole stejně jako selekce // A bar chart, perhaps? var data1 = [1, 1, 2, 3, 5, 8]; // A scatterplot, perhaps? var data2 = [ {x: 10.0, y: 9.14}, {x: 8.0, y: 8.14}, {x: 13.0, y: 8.74}, {x: 9.0, y: 8.77}, {x: 11.0, y: 9.26} ]; D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 19 / 44

Data binding datové pole: libovolné pole hodnot (čísel, JS objektů, dalších polí,...) přímo se dá v kódu psát v JSON formátu umí načítat velké množství formátů (JSON, CSV,..) plán: jeden prvek datového pole se přiřadí jednomu uzlu selekce elegantně ošetřen nedostatek nebo přebytek uzlů integrace dat do HTML ( data ) D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 20 / 44

Data joins enter přidává nové elementy, když je jich málo (méně než prvků pole) exit ošetření opačné situace nejčastěji se přebytečné HTML elementy prostě odstraní.. update existující elementy se upraví podle nových přiřazených dat D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 21 / 44

Příklad bodový graf datové položky obsahují souřadnice [x, y]: Var circles = svg.selectall("circle").data(data2); circles.enter().append("circle").attr("cx", x).attr("cy", y).attr("r", 2.5); Circles.attr("cx", x).attr("cy", y).attr("r", 5); // new data elements // updated (existing) elements D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 22 / 44

Zkratka: enter + update append přidává existující položky k těm novým pokud se mají všechny (staré i nové) nastavit stejně, kód se zjednoduší svg.selectall("circle").data(data2).enter() // new data elements.append("circle") // existing+new elements.attr("cx", x).attr("cy", y).attr("r", 2.5); D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 23 / 44

Data join pomocí klíče implicitně se operace join dělá přes index ve zvláštních případech (dynamická data) potřebujeme jiný klíč var data3 = [ { name: "Alice", x: 10.0, y: 9.14 }, { name: "Bob", x: 8.0, y: 8.14 }, { name: "Carol", x: 13.0, y: 8.74 }, { name: "Dave", x: 9.0, y: 8.77 }, { name: "Edith", x: 11.0, y: 9.26 } ]; D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 24 / 44

Klíčová funkce rozšířená vatianta operace data(d,k) function key(d) { return d.name; } var circle = svg.selectall("circle").data(data, key).attr("cx", x).attr("cy", y).attr("r", 2.5); D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 25 / 44

Datové soubory externí data: CSV, TSV, JSON,.. pohodlné načítání mnoha formátů často se musí konvertovat datum, někdy i čísla.. příklad s CSV formátem (stocks.csv): symbol,date,price S&P 500,Jan 2000,1394.46 S&P 500,Feb 2000,1366.42 S&P 500,Mar 2000,1498.58 S&P 500,Apr 2000,1452.43 S&P 500,May 2000,1420.6 S&P 500,Jun 2000,1454.6 S&P 500,Jul 2000,1430.83 D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 26 / 44

Připojování CSV dat je třeba převést řetězce na čísla a převést datumy var format = d3.time.format("%b %Y"); d3.csv("stocks.csv", function(stocks) { stocks.foreach(function(d) { d.price = +d.price; // coercion from string d.date = format.parse(d.date); // we need JS date here }); }); D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 27 / 44

Připojování JSON dat pořád je potřeba převádět datumy var format = d3.time.format("%b %Y"); d3.json("stocks.json", function(stocks) { stocks.foreach(function(d) { d.date = format.parse(d.date); // we need JS date here }); }); D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 28 / 44

Další operace s daty samotný JavaScript obsahuje mnoho užitečných metod pro práci s poli array.filter(), array.map(), array.sort(),.. další transformace dat v knihovně d3 d3.nest(), d3.keys(), d3.values(),.. D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 29 / 44

Měřítka (Scales) převod souřadných systémů číslo číslo lineární měřítko, logaritmické, apod. mapování dat na atributy visualizace barva, tloušťka čáry,.... Scales D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 30 / 44

Domain Range zobrazení z prostoru vstupních dat do prostoru visualizace lze napsat vlastní funkci: function x(d) { return d *42 + px ; } kvantitativní měřítka, např. lineární: var x = d3.scale.linear().domain([12, 24]).range([0, 720]); // x(16) == 240 D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 31 / 44

Další kvantitativní měřítka d3.scale.log() d3.scale.sqrt() interpolátory např. interpolace barvy var x = d3.scale.linear().domain([12, 24]).range(["steelblue", "brown"]); alternativní interpolátory (HSL barva..).interpolate(d3.interpolatehsl); D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 32 / 44

Po částech lineární převod definiční obor a obor hodnot mohou mít více uzlových bodů: var x = d3.scale.linear().domain([-10, 0, 100]).range(["red", "white", "green"]); x(-5); // #ff8080 x(50); // #80c080 D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 33 / 44

Diskrétní měřítka je to vlastně pouhé diskrétní zobrazení: var x = d3.scale.ordinal().domain(["a", "B", "C", "D"]).range([0, 10, 20, 30]); x("b"); // 10 barevné palety: var x = d3.scale.category20().domain(["a", "B", "C", "D"]); x("b"); // #aec7e8 D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 34 / 44

Barevné škály další pěkné sady barev: ColorBrewer http://colorbrewer2.org/ D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 35 / 44

Osy grafů pohodlné vykreslování os označování: čárky, popisky var yaxis = d3.svg.axis().scale(y).orient( left ); vykreslení v rámci selekce <g> svg.append( g ).attr( class, y axis ).call(yaxis); D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 36 / 44

Čárky na osách (Ticks) kvantitativní měřítka obsahují mechanismy pro umisťování čárek můžeme požádat o množství čárek v rámci celé škály je to jen doporučení var x = d3.scale.linear().domain([12, 24]).range([0, 720]); x.ticks(5); // [12, 14, 16, 18, 20, 22, 24] D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 37 / 44

Příklad rozvržení prostoru grafu souřadný systém: vlevo nahoře je počátek okraje (margins) se obvykle použijí pro dekorace (osy) var svg = d3.select("body").append("svg").attr("width", outerwidth).attr("height", outerheight); var g = svg.append("g").attr("transform", "translate(" + marginleft + "," + margintop + ")"); D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 38 / 44

SVG tvary rect circle line text path! komplikovanější popis tvaru vlastní jazyk lomené čáry, splines,.. D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 39 / 44

Generátory cest (Paths) d3.svg.line (lomená čára) var x = d3.scale.linear(), y = d3.scale.linear(); var line = d3.svg.line().x(function(d) { return x(d.x); }).y(function(d) { return y(d.y); }); připojení bez pomoci data-join: svg.append("path").datum(objects).attr("class", "line").attr("d", line); D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 40 / 44

d3.svg.area např. pro plošné grafy funkcí (x, y 0,y 1 ) var x = d3.scale.linear(), y = d3.scale.linear(); var area = d3.svg.area().x(function(d) { return x(d.x); }).y0(height).y1(function(d) { return y(d.y); }); D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 41 / 44

Interpolace čar lineární oblasti s teplejší barvou (žlutá, červená) schody před hodnotou za hodnotou spline basis cardinal monotone (nepřekmitává) D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 42 / 44

d3.svg.arc pro koláčové grafy var samplearc = { "innerradius": 0, "outerradius": 360, "startangle": 0, "endangle": 1.2 }; // 12 o'clock // radians var arc = d3.svg.arc().innerradius(0).outerradius(360); var pie = d3.layout.pie(); // default pie layout var myarcs = pie(numbers); // data for d3.svg.arc D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 43 / 44

Literatura http://d3js.org/ d3.js homepage Scott Murray: Interactive Data Visualization for the Web, O'Reilly, free online (2015) M. Bostock's blog: http://bl.ocks.org/mbostock/ D3intro 2015 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 44 / 44