1 of 15

Interactive Data Visualization

MOS 5.5 - S9 - 2017/2018- Cours #4 - Web dev and D3 Modules

http://romain.vuillemot.net/

@romsson

2 of 15

Local & Modern Web Development

3 of 15

Live Coding with http://blockbuilder.org/

* Where are the data stored?�* Can you create a large project with it?�* Pros and cons when team work?

4 of 15

Local repository

* Clone your GitHub repository�* Get a page template (html/CSS/JS) from http://blockbuilder.org/�* python3 -m http.server

OR ��* Init a NPM repository npm init --yes�* Install d3 module npm install d3 --save�* Get a page template (html/CSS/JS) from http://blockbuilder.org/�* Edit your index.html and replace� <script src="https://d3js.org/d3.v4.min.js"></script>�..With � <script src="node_modules/d3/build/d3.js"></script>�* http://127.0.0.1:8081/chart.html�

5 of 15

GitHub Pages!

http://www.github.com/ildec/my-project/

http://ildec.github.io/my-project/

6 of 15

JS Modules

* NPM : Package manager for the JavaScript programming language.

7 of 15

D3 MODULES

* Shows the file size in bytes of D3 4.4.0’s source code

https://bl.ocks.org/mbostock/8fe6fa6ed1fa976e5dd76cfa4d816fec

8 of 15

D3 MODULES

* D3 modules dependency time graphs

https://mindrones.github.io/timely-dependency-graph/#npm/d3

9 of 15

D3 MODULES

(Flare example

https://bl.ocks.org/mbostock/7607999

10 of 15

D3 Custom Bundle

<!DOCTYPE html>�<meta charset="utf-8">�<body>�<script src="d3.min.js"></script>�<script>��d3.select("body").append("h1")� .text("Hello, world!")� .style("text-align", "center")� .style("line-height", "320px")� .style("font-size", "100px")� .style("transform", "rotate(-180deg) scale(0.001, 0.001)")� .transition()� .duration(1500)� .style("transform", null);��</script>�

{� "name": "d3-custom-example",� "version": "0.0.1",� "scripts": {� "prepublish": "rollup -c -f umd -n d3 -o d3.js -- index.js && uglifyjs d3.js -c -m -o d3.min.js"� },� "devDependencies": {� "d3-selection": "1",� "d3-transition": "1",� "rollup": "0.41",� "rollup-plugin-node-resolve": "2",� "uglify-js": "2"� }�}

export {� event,� selection,� select,� selectAll�} from "d3-selection";��import "d3-transition";

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3=t.d3||{})}(this,function(t){"use strict";function n(t){return function(){var n=this.ownerDocument,e=this.namespaceURI;return e===Sn&&n.documentElement.namespaceURI===Sn?n.createEleme

index.html

package.json

index.js

d3.min.js