advertisement

Big Data Introduction to D3

53 %
47 %
advertisement
Information about Big Data Introduction to D3
Technology

Published on March 9, 2014

Author: vishaltx

Source: slideshare.net

Description

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.
advertisement

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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Big Data Introduction to D3 - YouTube

Synopsis: D3.js is a Javascript library primarily used to create interactive data visualizations in the browser. Despite its growing popularity ...
Read more

An Introduction to D3 - Sam Selikoff

An Introduction to D3 by Sam Selikoff February 24, 2014. ... Some concluding thoughts on D3 and big data. There are, of course, many ...
Read more

Big Data Introduction to D3 [video] | D3eksha

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.
Read more

Big Data Introduction to D3 [video]

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.
Read more

Big Data Introduction to D3 | Ngoding

Synopsis: D3.js is a Javascript library primarily used to create interactive data visualizations in the browser. Despite its growing popularity and warm
Read more

D3 | Small World Big Data

Living on a small world inundated with big data. Search. Main menu. Skip to primary content. ... Check out this javascript library D3 for “Data Driven ...
Read more

Tutorials · mbostock/d3 Wiki · GitHub

Introduction to D3.js(Traditional Chinese) by infographics.tw; Learn D3.js from scratch(Italian) by Carlo; ... Shan Carter, Big Data Think Tank December 2012;
Read more

Introduction to visualizations using D3: Big Data ...

The term data vizualization can mean anything from charts and graphs to infographics to big data and everything in between. In this tutorial, we’ll look ...
Read more

BIG DATA D3

2 Overview Introduction Development Browsers Who uses d3? Four Ways to Slice Obama’s 2013 Budget Proposal
Read more