Introduction to data visualisations with d3.js — Data Driven Documents
•
18 likes•6,130 views
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/).
Recommended
More Related Content
What's hot
Similar to Introduction to data visualisations with d3.js — Data Driven Documents
Similar to Introduction to data visualisations with d3.js — Data Driven Documents (20)
Recently uploaded
Recently uploaded (20)
Introduction to data visualisations with d3.js — Data Driven Documents
- 1. Data Driven Documents Introduction to visualising data with D3.js Michał Oniszczuk" micon@icm.edu.pl" adalab.icm.edu.pl
- 2. Me & my team software dev adalab.icm.edu.pl text & data mining
- 3. Agenda what is D3 core ideas features D3 in ICM
- 4. more examples: d3js.org What is D3?
- 9. <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
- 12. Select
- 13. Select
- 14. Select <svg>...</svg> " <script> var circles = d3.selectAll("circle"); circles.attr("r", 30); </script>
- 15. Select <svg>...</svg> " <script> var circles = d3.selectAll("circle"); circles.attr("r", 30); </script> CSS3 selector
- 16. Select <svg>...</svg> " <script> var circles = d3.selectAll("circle"); circles.attr("r", 30); </script> CSS3 selector
- 17. 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 {
- 18. Select with jQuery <svg>...</svg> " <script> var circles = $("circle"); circles .attr("r", 30) .attr("stroke", "black") .attr("stroke-width", 1.5); </script>
- 19. Bind var sizes = [10, 25, 60];
- 20. 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>
- 21. Batteries included layouts transitions geography localisation json & csv scales date & time colour helpers svg helpers drag & drop
- 22. Libraries
- 23. c3js.org
- 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. <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
- 26. NVD3.js nvd3.org
- 28. D3 in ICM
- 29. Scholar Graph Explorer developed in adalab.icm.edu.pl
- 30. R graphs exporter developed by Monika Pawluczuk m.pawluczuk@icm.edu.pl & Michał Bojanowski m.bojanowski@uw.edu.pl
- 31. Charts
- 32. More charts
- 36. 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
- 37. Thanks! Please ask questions Michał Oniszczuk" micon@icm.edu.pl" adalab.icm.edu.pl