Big Data Introduction to D3

5,123 views
4,755 views

Published on

Synopsis:

D3.js is a Javascript library primarily used to create interactive data visualizations in the browser. Despite its growing popularity and warm community, getting started with D3 can be tricky. This talk covers the basics of D3 and sheds light on some of its main conceptual hurdles. It concludes by discussing some applications of D3 to big data.

About the speaker:

Sam Selikoff [ http://www.samselikoff.com/ | @samselikoff ] is a self-taught full-stack web developer. Formerly a graduate student of economics and finance, he unexpectedly discovered a passion for programming while doing data work for a consulting firm. He is currently focusing on client-side MVC and data visualization.

Thanks to our Sponsors
Microsoft [ http://microsoftnewengland.com ] for providing awesome venue for the event.

Rovi [ http://rovi.com ] for providing the food/drinks.

cognizeus [ http://cognizeus.com ] for hosting the event and providing books to give away as raffle.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,123
On SlideShare
0
From Embeds
0
Number of Embeds
1,096
Actions
Shares
0
Downloads
66
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Big Data Introduction to D3

  1. 1. INTRO TO D3 with applications to big data Feb 2014 @samselikoff www.samselikoff.com
  2. 2. WHY DATA VIS? Communication Exploration
  3. 3. Apple today announced financial results for its fiscal 2014 first quarter ended December 28, 2013. The Company posted record quarterly revenue of $57.6 billion and quarterly net profit of $13.1 billion, or $14.50 per diluted share. These results compare to revenue of $54.5 billion and net profit of $13.1 billion, or $13.81 per diluted share, in the year-ago quarter. Gross margin was 37.9 percent compared to 38.6 percent in the year-ago quarter. International sales accounted for 63 percent of the quarter’s revenue.
  4. 4. I get it, times are good!
  5. 5. WHAT'S D3? Data-Driven Documents
  6. 6. Hypothetical bars in a document. Lets set their heights: With JS var data = [80, 53, 125, 200, 28, 97]; var bars = document.getElementsByTagName("rect"); for (var i = 0; i < bars.length; i++) { var bar = bars.item(i); bar.style.setProperty("height", data[i], null); } With D3 d3.selectAll('rect') .attr('height', function(d, i) {return data[i];});
  7. 7. D3 IS NOT: DOM query lib Compatibility layer Charting library Easy! Proprietary 3rd-party tech
  8. 8. HOW CAN D3 HELP US? Less convenient, but more powerful
  9. 9. THE PATH TO LEARN Examples Practice Reading Repeat Today, higher-level concepts
  10. 10. What we're building
  11. 11. Initial document <html> <body> <script src="d3.v3.min.js" charset="utf-8"></script> <script> // Our code </script> </body> </html> Some data var data = [80, 53, 125, 200, 28, 97];
  12. 12. First, need a parent <svg> d3.select('body').append('svg'); d3 is global object - think $ from jquery Lets us select elements - similar to jquery Can perform operations on these selections like `append`, or `style` d3.select('body').style('background-color', 'blue');
  13. 13. .append actually returns a new selection var svg = d3.select('body').append('svg'); Work with local var svg just as if we had done d3.select('svg')
  14. 14. Let's make the bars. We could just... // Recall, var data = [80, 53, 125, 200, 28, 97]; svg.append('rect'); svg.append('rect'); svg.append('rect'); svg.append('rect'); svg.append('rect'); svg.append('rect'); But this falls short
  15. 15. d3.selectAll wraps arrays of elements var paragraphs = d3.selectAll('p'); So what are selections? Understanding selections is key to writing d3 code.
  16. 16. Selections enable declarative programming Imperative paragraphs.forEach(function(p) { p.style('background-color', 'green'); }); Declarative paragraphs.style('background-color', 'green');
  17. 17. We can also select no elements <svg> </svg> var bars = d3.selectAll('rect'); Again, selections are higher level In this case, `bars` doesn't refer to anything in the DOM But it does represent an array of <rect> elements
  18. 18. Selections have two pieces The key to D3's power!
  19. 19. The data join var nums = [80, 53, 125, 200, 28, 97]; var bars = svg.selectAll('rect') .data(nums) Our representation is now explicit
  20. 20. var data = [80, 53, 125, 200, 28, 97]; var bars = svg.selectAll('rect') .data(data); But our DOM is empty This means there are six <rect> in our enter selection bars.enter() .append('rect');
  21. 21. Where does the data actually live? The DOM This enables selections to be transient d3.selectAll('rect').data()
  22. 22. Data-driven transformations Let's finish up the bar chart.
  23. 23. What next? Scales, axes, events, transitions... https://github.com/mbostock/d3/wiki/Gallery https://github.com/mbostock/d3/wiki/Tutorials StackOverflow d3 mailing list (google group) + IRC Practice, inspect, examples
  24. 24. Can something so low-level be useful for big data? Crossfilter: filter 250,000 data points Cubism: hundreds of metrics updating in real-time Netflix analytics Square analytics Addepar financial tools Open-source tools binding D3 to R, Python Much, much more...
  25. 25. THANKS! @samselikoff www.samselikoff.com

×