introduction to d3

22

Thinking in D3 Joe Golike @golike

Upload: visually

Post on 28-Nov-2014

5.680 views

Category:

Technology

0 download

Report

Download

Embed Size (px):

DESCRIPTION

Presentation by Joe Golike, designer at Trulia, for Visual.ly's meetup, The Introductory D3 Workshop for Beginners.

TRANSCRIPT

Page 1: Introduction to D3

Thinking in D3Joe Golike@golike

Page 2: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

What is D3?

Page 3: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.

Page 4: Introduction to D3

[[ 11975, 5871, 8916, 2868 ], [ 1951, 10048, 2060, 6171 ], [ 8010, 16145, 8090, 8045 ], [ 1013, 990, 940, 6907 ]]

Thinking in D3 Joe Golike @golike 16 Feb 2012

Page 5: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

Page 6: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

What’s good about it?

Page 7: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

Web standards technology

Page 8: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

Web standards technologyWorks in all modern™ browsers

Page 9: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

Web standards technologyWorks in all modern™ browsersPerforms well, even on mobile

Page 10: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

What it’s good at?

Page 11: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

Nearly unlimited power and control

Page 12: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

Nearly unlimited power and controlDoes complicated math for you

Page 13: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

Nearly unlimited power and controlDoes complicated math for youSVG + CSS

Page 14: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

What to watch out for?

Page 15: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

Steepish learning curve

Page 16: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

Steepish learning curveBrowser support

Page 17: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

Steepish learning curveBrowser support Internet Explorer 9+

Page 18: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

Steepish learning curveBrowser support Internet Explorer 9+Spotty documentation

Page 19: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

Where do we go from here?

Page 20: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

alignedleft.com/tutorials/d3groups.google.com/group/d3-jsmbostock.github.com/d3colorbrewer.orginsights.truliablog.com

Page 21: Introduction to D3

Thinking in D3 Joe Golike @golike 16 Feb 2012

What have you done with D3?

Page 22: Introduction to D3

Thanks.Joe Golike@golike

Data visualisation with HighChart or D3 · Agenda •Introduction •Why to visualise with HighCharts or D3? •What do you need to have? •What do you need to know? •One of many

Building apps with D3 - n.exts.chn.exts.ch/.../Building+apps+with+D3.pdf · Spoilers • Why D3.js? • Tips and tricks • What to expect when building web apps with D3.js

VELVET SI DR 26 .. 77 1 / 16...VELVET SI DR 26 .. 77 front D3 B1 T1 T6 B1 M1 M1 M1 D3 D3 D3 D3 D3 D3 D3 D3 T6 T6 fi8x28 x8 B1 x2 T1 x12 M1 x18 T6 x3 x6 F7 S4 3x16mm T1 T6 T6 T6 B1

D3-2015-332243-introduction (2)

D3 meetup (Backbone and D3)

1,25-Dihydroxyvitamin D3 Production and Vitamin D3 ... · 1,25-Dihydroxyvitamin D3 Production and Vitamin D3 Receptor Expression Are Developmentally Regulated During Differentiation

Nikon D3 Guide to Sports Photography

D3 on AngularJS1.droppdf.com/files/wm9N7/lean-publishing-d3-on-angularjs-create... · Introduction Abouttheauthors AriLernerisadeveloperwithmorethan20yearsofexperience,andco-founderofFullstack.io.He

RULE D3 - Payments Canada · RULE D3 –INDIRECT CLEARER REQUIREMENTS 3 Introduction 1. This Rule outlines the requirements and obligations applicable to Indirect Clearers. General

A Quick Introduction to d3.js & Reusable Charts Adam Pere Olin College, November 11 th 2014

D3 Introduction - UC Berkeleyvis.berkeley.edu/courses/cs294-10-fa14/wiki/images/... · 1 D3 Introduction Maneesh Agrawala Jessica Hullman CS 294-10: Visualization Fall 2014 From Interaction

Module 101, Introduction to Quality Management, Part 1documents.odpconsulting.net/alfresco/d/d/workspace/SpacesStore/d3... · Module 101, Introduction to Quality Management, Part

This Is Not An Introduction to d3 - GitHub Pagesjpiscionere.github.io/d3.pdf · This Is An Introduction to Seeing Something That Looks Cool on the Internet and Ripping it Off

D3 on AngularJS - DropPDF2.droppdf.com/files/sFRo3/d3-on-angularjs-create... · Introduction Abouttheauthors AriLernerisadeveloperwithmorethan20yearsofexperience,andco-founderofFullstack.io.He

Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg

3 0bearing parts d3 0l9 8 d3 0l11 8 d3 0l13 8 d3 0l15 8 d3 0l17 8 d3 0l19 8 d3 0l21 8 d3 0l23 8 d3 0

The D3-D7 Model of AdS/CFT with Flavour (with Special Feature)quark.itp.tuwien.ac.at/~grumil/pdf/D3D7AdSCFTFlavour.pdf · Introduction to AdS/CFT D3-Branes in IIB Supergravity Have

Big Data Introduction to D3

Having fun with graphs, a short introduction to D3.js

EXERCISE: Introduction to the D3 JavaScript Library for ......EXERCISE: Introduction to the D3 JavaScript Library for Interactive Graphics and Maps Barend Köbben Version2.1 July2,2015

Dreamforce 2014 - Introduction to d3.js

RIDGELAND URBAN AREAe5 gale d3 b4,c3,c4,d3,e2,e3 d3 cope d5 c3 c2 d2 d3 creek d2,d3 crested c6 d3 miranda c6 darby d2,d3 c2 great e4 great c6 myrtle c2 c3 h d3 captain johngraham ln

Introduction to D3.js

D3.js Data-Driven Documentslcs.ios.ac.cn/~shil/wiki/images/2/2c/D3_tutorial.pdf · Introduction – what is D3 • d3.js – JavaScript library for creating data visualizations. •

Introduction of Basic Components and D3.js Setupweb.cse.ohio-state.edu/~shen.94/5544/Slides/D3-0.pdf · • JavaScript to program the behavior of web pages • JavaScript is the programming

Crestron D3 Pro v2.8.29 Release Notes: I. Introduction to ... · Crestron’s D3 Pro offers design, development, and documentation for home automation. The initial release of D3 Pro

“D3” Differential Pressure and Level Transmitter · “D3” Differential Pressure and Level Transmitter. PAGE 3 Table of Contents Section 1 - Introduction 5 1.1 Specifications

D3 on AngularJS - DropPDF1.droppdf.com/files/0sSmI/d3-on-angularjs-create-dynamic... · 2015-05-31 · Introduction Abouttheauthors AriLernerisadeveloperwithmorethan20yearsofexperience,andco-founderofFullstack.io.He

Introduction to the D3 library - Amazon S3 · ›D3 acts on selectionsof objects d3.select(”#title”) selects the DOM element named #title ›Once we have selected an object, we

D3 - To Dust GDD

PUMPED INDIRECT DOMESTIC HOT WATER SYSTEM …...D3-30I, D3-50I & D3-80I PUMPED INDIRECT DOMESTIC HOT WATER SYSTEM D3-30P, D3-30PE, D3-50P, &D3-50PE INDIRECT DOMESTIC HOT WATER SYSTEM

3 5rollering units d3 5l11 8 d3 5l13 8 d3 5l15 8 d3 5l17 8 d3 5l19 8 d3 5l21 8 d3 5l23 8 d3 5l25 8 d

Catalog HY14-2502/US Directional Control Valves Series D3 ...D3,D3W... · Introduction Series D3 D3C Cam Operated. Catalog HY14-2502/US Directional Control Valves 2502-A2.p65, dd

Introduction to d3saldohuk/IVProject/files/Introduction to d3.pdfD3.js is good at •Providing a way to map data to documents. •Being a general purpose visualization library •Handling