View
844
Download
1
Category
Preview:
Citation preview
Data Driven DocumentsIntroduction to visualising data with D3.js
Michał Oniszczuk"micon@icm.edu.pl"adalab.icm.edu.pl
Me & my team
software dev
adalab.icm.edu.pl
text & data mining
Agenda
what is D3
core ideas
features
D3 in ICM
Architecture
UI
Data
DataArchitecture
UI
DataArchitecture
Low–level
Libraries
UI
<html> <body> "<svg width="400" height="200"> <circle cx="100" cy="100" r="10"></circle> <circle cx="200" cy="100" r="30" fill="orange"></circle> <circle cx="300" cy="100" r="20" fill="olivedrab"></circle> </svg>
examples are inspired by the Three Little Circles tutorial by Mike Bostock
Core D3 ideas
select
bind
Include .
<html> <body> <script src=„d3.js”></script> ...
Select
Select
Select
<svg>...</svg> "<script> var circles = d3.selectAll("circle"); circles.attr("r", 30); </script>
Select
<svg>...</svg> "<script> var circles = d3.selectAll("circle"); circles.attr("r", 30); </script>
CSS3 selector
Select
<svg>...</svg> "<script> var circles = d3.selectAll("circle"); circles.attr("r", 30); </script>
CSS3 selector
Select
<svg>...</svg> "<script> var circles = d3.selectAll("circle"); circles .attr("r", 30) .attr("stroke", "black") .attr("stroke-width", 1.5); </script>
CSS3 selector
method chaining {
Select with jQuery
<svg>...</svg> "<script> var circles = $("circle"); circles .attr("r", 30) .attr("stroke", "black") .attr("stroke-width", 1.5); </script>
Bind
var sizes = [10, 25, 60];
Bind<svg>...</svg> "
<script> var circles = d3.selectAll("circle"); var sizes = [10, 25, 60]; circles .data(sizes) .attr("r", function(size) { return size / 2; }); </script>
Batteries includedlayouts
transitions
geography
localisation
json & csv
scales
date & time
colour helpers
svg helpers
drag & drop
Libraries
<link href="c3.css" rel="stylesheet" type="text/css"> <script src="d3.js"></script> <script src="c3.js"></script> "<div id="chart"></div> "<script> var chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] } }); </script> c3js.org
<link href="c3.css" rel="stylesheet" type="text/css"> <script src="d3.js"></script> <script src="c3.js"></script> "<div id="chart"></div> "<script> var chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] } }); </script> c3js.org
D3 in ICM
R graphs exporter
developed by Monika Pawluczuk m.pawluczuk@icm.edu.pl & Michał Bojanowski m.bojanowski@uw.edu.pl
Charts
More charts
SummaryData
Low–level
Libraries
UI
Warning
low–level
steep learning curve
D3 is good
flexible
declarative
community
libs
Linksd3js.org — great examples & tutorials
libraries & tools:!
nvd3.org, c3js.org, … — easier charts
ramnathv.github.io/rCharts — create D3 charts in R
app.raw.densitydesign.org — WYSIWYG, no coding
mikemcdearmon.com/portfolio/techposts/charting-libraries-using-d3 — many more libs
Thanks!Please ask questions
Michał Oniszczuk"micon@icm.edu.pl"adalab.icm.edu.pl
Recommended