Upcoming SlideShare
Loading in...5

Big Data Introduction to D3



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.



Total Views
Views on SlideShare
Embed Views



13 Embeds 486

http://analyticsweek.com 228
http://visualoop.com 196
http://feedly.com 25
http://cognizeus.com 18
http://feeds.feedburner.com 6
http://boston.analyticsweek.com 4
http://www.inoreader.com 3
http://www.instapaper.com 1
http://analyticsweek.analyticscube.com 1
http://www.newsblur.com 1
http://newsblur.com 1
http://news.analyticsweek.com 1
http://digg.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Big Data Introduction to D3 Big Data Introduction to D3 Presentation Transcript

  • INTRO TO D3 with applications to big data Feb 2014 @samselikoff www.samselikoff.com
  • WHY DATA VIS? Communication Exploration
  • 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.
  • I get it, times are good!
  • WHAT'S D3? Data-Driven Documents
  • 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];});
  • D3 IS NOT: DOM query lib Compatibility layer Charting library Easy! Proprietary 3rd-party tech
  • HOW CAN D3 HELP US? Less convenient, but more powerful
  • THE PATH TO LEARN Examples Practice Reading Repeat Today, higher-level concepts
  • What we're building
  • 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];
  • 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');
  • .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')
  • 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
  • d3.selectAll wraps arrays of elements var paragraphs = d3.selectAll('p'); So what are selections? Understanding selections is key to writing d3 code.
  • Selections enable declarative programming Imperative paragraphs.forEach(function(p) { p.style('background-color', 'green'); }); Declarative paragraphs.style('background-color', 'green');
  • 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
  • Selections have two pieces The key to D3's power!
  • The data join var nums = [80, 53, 125, 200, 28, 97]; var bars = svg.selectAll('rect') .data(nums) Our representation is now explicit
  • 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');
  • Where does the data actually live? The DOM This enables selections to be transient d3.selectAll('rect').data()
  • Data-driven transformations Let's finish up the bar chart.
  • 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
  • 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...
  • THANKS! @samselikoff www.samselikoff.com