Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to data visualisations with d3.js — Data Driven Documents

4,986 views

Published on

Introduction to data visualisations with d3.js and how we use it in ADA lab where we visualise large datasets (adalab.icm.edu.pl) and in the whole ICM (icm.edu.pl).

Presentation for the Data Science Warsaw meetup (http://www.meetup.com/Data-Science-Warsaw/).

Published in: Technology

Introduction to data visualisations with d3.js — Data Driven Documents

  1. 1. Data Driven Documents Introduction to visualising data with D3.js Michał Oniszczuk" micon@icm.edu.pl" adalab.icm.edu.pl
  2. 2. Me & my team software dev adalab.icm.edu.pl text & data mining
  3. 3. Agenda what is D3 core ideas features D3 in ICM
  4. 4. more examples: d3js.org What is D3?
  5. 5. Architecture UI Data
  6. 6. Data Architecture UI
  7. 7. Data Architecture Low–level Libraries UI
  8. 8. <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
  9. 9. Core D3 ideas select bind
  10. 10. Include . <html> <body> <script src=„d3.js”></script> ...
  11. 11. Select
  12. 12. Select
  13. 13. Select <svg>...</svg> " <script> var circles = d3.selectAll("circle"); circles.attr("r", 30); </script>
  14. 14. Select <svg>...</svg> " <script> var circles = d3.selectAll("circle"); circles.attr("r", 30); </script> CSS3 selector
  15. 15. Select <svg>...</svg> " <script> var circles = d3.selectAll("circle"); circles.attr("r", 30); </script> CSS3 selector
  16. 16. 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 {
  17. 17. Select with jQuery <svg>...</svg> " <script> var circles = $("circle"); circles .attr("r", 30) .attr("stroke", "black") .attr("stroke-width", 1.5); </script>
  18. 18. Bind var sizes = [10, 25, 60];
  19. 19. 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>
  20. 20. Batteries included layouts transitions geography localisation json & csv scales date & time colour helpers svg helpers drag & drop
  21. 21. Libraries
  22. 22. c3js.org
  23. 23. <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
  24. 24. <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
  25. 25. NVD3.js nvd3.org
  26. 26. ramnathv.github.io/rCharts
  27. 27. D3 in ICM
  28. 28. Scholar Graph Explorer developed in adalab.icm.edu.pl
  29. 29. R graphs exporter developed by Monika Pawluczuk m.pawluczuk@icm.edu.pl & Michał Bojanowski m.bojanowski@uw.edu.pl
  30. 30. Charts
  31. 31. More charts
  32. 32. Summary Data Low–level Libraries UI
  33. 33. Warning low–level steep learning curve
  34. 34. D3 is good flexible declarative community libs
  35. 35. Links d3js.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
  36. 36. Thanks! Please ask questions Michał Oniszczuk" micon@icm.edu.pl" adalab.icm.edu.pl

×