A short introduction of D3js
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

A short introduction of D3js

on

  • 1,538 views

## Agenda ...

## Agenda

- Introduction
- Examples
- A guide of bar chart
- The analysis of source code
- The Wealth & Health of Nations
- An time series visual design of Adserver svn commit record
- Resources

Statistics

Views

Total Views
1,538
Views on SlideShare
1,538
Embed Views
0

Actions

Likes
2
Downloads
20
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

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

A short introduction of D3js Presentation Transcript

  • 1. D3JSDREAMPUF JAN. 2013
  • 2. AGENDAIntroductionExamplesA guide of bar chartThe analysis of source code The Wealth & Health of Nations An time series visual design of Adserver svn commit recordResources
  • 3. INTRODUCTION
  • 4. D3.JS: DATA-DRIVEN DOCUMENTSJavaScript LibraryOpen source (BSD license)developed by Michael Bostock and others at StanfordUniversityformer work on Protovis Library from Intro to d3
  • 5. D3.JS: DATA-DRIVEN DOCUMENTSnot a traditional visualization frameworkfocus on efficient manipulation of documents based ondatabind arbitrary data to the DOMapply data-driven transformations to the documentfunctional/declarative stylesupport for interaction and animationyou have to do the graphical representation yourself!but has helpers for SVG generation from Intro to d3
  • 6. FEATURE
  • 7. SELECTIONSd3.selectAll("p") .style("color", "white"); operate on arbitrary sets of nodes called selections W3C Selectors API or Sizzle fallback
  • 8. DYNAMIC PROPERTIES d3.selectAll("p") .data([4, 8, 15, 16, 23, 42]) .style("font-size", function(d, i) { return d + "px"; });bind data to a selectionapply functions to styles, attributes and otherpropertiesa lot of built-in reusable functions availablebound data available as first argumentyou can omit the data operator the second time!
  • 9. ENTER AND EXIT var p = d3.select("body").selectAll("p") // Update… .data([4, 8, 15, 16, 23, 42]) .text(String); p.enter().append("p") // Enter… .text(String); p.exit().remove(); // Exit…enter: selects all data elements without a DOMrepresentationexit: selects all DOM elements without datacommon patternperform only necessary modifications
  • 10. SUBSELECTIONS d3.selectAll("ul") .data(questions) // an array of questions .selectAll("li") // a nested array of responses .data(function(d) { return d.responses; }) // the text of the response .text(function(d) { return d.text; });generate a subselection by calling selectAll on anexisting selectionmaintains the hierarchical structure
  • 11. TRANSITIONS // fade background from white to black in 1s d3.select("body").transition() .duration(1000) .style("background-color", "black");with d3.js they are easy!various tweening functionsinterpolation of basic types, numbers and numbers instrings (e.g. "15px")
  • 12. EXAMPLES
  • 13. FISHER–YATES SHUFFLE
  • 14. 2008 OLYMPIC MEDALS
  • 15. OBAMAS 2013 BUDGET PROPOSAL
  • 16. economy (mpg) cylinders displacement (cc) power (hp) weight (lb) 0-60 mph (s) 8.0 450 45 220 5,000 24 7.5 200 40 400 22 4,500 7.0 180 35 350 20 6.5 160 4,000 30 6.0 300 140 18 25 3,500 120 5.5 250 16 20 100 5.0 3,000 80 14 200 15 4.5 60 2,500 12 10 150 4.0 40 2,000 10 5 3.5 100 20 0 3.0 0 8
  • 17. Agglo merativeCluster lity Co mmunityStructure L inkD e nne ssCe ntra O pe rato pe rato rL ist te r Stac ando m L ayo u t HierarchicalClus O pe rato rSw e ke r No d Span e stPaths t Tre e M Sho rt lo wMinCu Rad So rtO pe ratoh Ind Icicle cte d L ayyo ut t ke dA nce Visualization R B an Fo ndr ck le L o u ut e O Tre e MaxF istance e L in rSe que nc Me rge Edg e nt rce o g ing ay te ialTr Pie L ay o ut De Pa c R o Cir r que Ob mbixInte to r lato r r O pe ra atio Int te In te rp o lato re aL ayo ut Nu atr o la rpo ato apL a ed kTre L ayyo ut ning cle Bu Dir ra L a o u r e I la to r ee ct Inte te rpo to r gl o o la lato Be twe nSe e ctR ol nd Tre e L ay o ut e r nt to r L to Tre L ay o ut Dao lo rIn te rp ayo u e L a o ut Sta itc Reo int ctInrInte o la yo utt le d A la e La ou to r ctio Funsing er r Cir ge ay ck R r po rp Asp C rayIn y m M e rp te Ed xisL ou an rp rp e d ad Ea t Ar ial L a P je e Ar e a L a be o r le t Se cheuse le l lab L a be le G n be le r ra l u Fis izatio Pa ara e d IO p le r hD cluste r he itio nc r Vi tan pe Filtete r ns ue ule P ch r e graph sib c t is ye er en ra IS Tra q d r o ptim ilit e F Tre n o n nEv rte te t Pr Sha Siz y il lay op p eE eF iti io ve r o la S e r e E nc ilte ns sit on e o ut r Traran e n rs tC rt e rp tyE nc o Co n o de r T we rte Te x nv e r lo En co de r int Fis rEn co de r T v e te d Co rte o nlimi hML nv e rte r la he co de r b ye C e p o ve el Bif D de r D ra aC o n cs o c D isto r G at NC analyti alD isto rtio ID SO filt isto rtio n ld a op Le en J Fie he m e ge rtio n r co s ataaSc t e ra L e ndR n de rte r D at e ce g e an D ataS o ur nd ge r ve to r e L e g Ite m dis on D taS able at Visu en to c Da taT til im aliz d rtio a T tio n Da taU an n Da Se leo o ltip Ev e nt le g rite ctio Ev e n ySp Dat nEv t en d Dirt e Sprite aEv e nt L in e nt Tre e eve Build nts e ta lay Scale Tre er da disp Bindin gShape R e nde re fle x IRe nd r Edge Re nd e re r v is e re r re nde r Arro wType physics Node Sprite data EdgeSprite DataSprite fla re DataList Data ntro l To o ltipCo ntro l nCoSe le ctiomCo ntro l ls o ol roPanZo ICo ntr o l co nt ntr e rCo ntro l Ho v dCo n ro l Expa agCo ntlL ist Dr o ntro o l C tr qu Co n tro l is er kCo n ax y Clic
  • 18. Aitoff
  • 19. TUTORIALSA GUIDE OF BAR CHART
  • 20. BASE COMPONENT HTML CSS Javascript SVG
  • 21. SVG<svg width="50" height="50"></svg>
  • 22. SVG<svg width="50" height="50"> <circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/></svg>
  • 23. SIMPLE SHAPES
  • 24. SIMPLE SHAPES<rect x="0" y="0" width="500" height="50"/>
  • 25. SIMPLE SHAPES<circle cx="250" cy="25" r="25"/>
  • 26. SIMPLE SHAPES<ellipse cx="250" cy="25" rx="100" ry="25"/>
  • 27. SIMPLE SHAPES<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>
  • 28. SIMPLE SHAPES<text x="250" y="25">Easy-peasy</text> Easy-peasy
  • 29. SIMPLE SHAPES<text x="150" y="50" font-family="sans-serif" font-size="50" fill="gray">Easy-peasy</text> Easy-peasy
  • 30. SIMPLE SHAPES<circle cx="25" cy="25" r="100" fill="yellow" stroke="orange" stroke-width="5"/>
  • 31. SIMPLE SHAPES<circle cx="25" cy="25" r="22" class="pumpkin"/>.pumpkin { fill: red; stroke: orange; stroke-width: 5; }
  • 32. SIMPLE SHAPES<rect x="100" y="100" width="80" height="80" fill="purple"/><rect x="120" y="105" width="80" height="80" fill="blue"/><rect x="140" y="110" width="80" height="80" fill="green"/><rect x="160" y="115" width="80" height="80" fill="yellow"/><rect x="180" y="120" width="80" height="80" fill="red"/>
  • 33. SIMPLE SHAPES<circle cx="125" cy="80" r="60" fill="rgba(128, 0, 128, 1.0)"/><circle cx="150" cy="80" r="60" fill="rgba(0, 0, 805, 0.75)"/><circle cx="175" cy="80" r="60" fill="rgba(0, 805, 0, 0.5)"/><circle cx="200" cy="80" r="60" fill="rgba(805, 805, 0, 0.80)"/><circle cx="280" cy="80" r="60" fill="rgba(805, 0, 0, 0.1)"/>
  • 34. PAGE<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>D3 Test</title> <script type="text/javascript" src="d3/d3.v3.js">&lt;/script> </head> <body> <script type="text/javascript"> // Your beautiful D3 code will go here &lt;/script> </body></html>
  • 35. FIRSTd3.select("body").append("p").text("New paragraph!");
  • 36. WITH DATAvar dataset = [ 5, 10, 15, 20, 25 ];d3.select("body").selectAll("p");
  • 37. WITH DATAd3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text("New paragraph!");
  • 38. WITH DATAconsole.log(d3.selectAll("p"))
  • 39. WITH DATAconsole.log(d3.selectAll("p"))
  • 40. WITH DATAvar dataset = [ 5, 10, 15, 20, 25 ];d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text(function(d) { return d; });
  • 41. BEYOND TEXT.style("color", "red");.style("color", function(d) { if (d > 15) { //Threshold of 15 return "red"; } else { return "black"; }});
  • 42. PLAY WITH DATAvar dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10, 24, 18, 25, 9, 3 ];d3.select("body").selectAll("div") .data(dataset) // <-- The answer is here! .enter() .append("div") .attr("class", "bar") .style("height", function(d) { var barHeight = d * 5; return barHeight + "px"; });
  • 43. MAKING A BAR CHARTvar dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
  • 44. MAKING A BAR CHARTsvg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 20) .attr("height", 100);
  • 45. MAKING A BAR CHART.attr("x", function(d, i) { return i * 21; //Bar width of 20 plus 1 for padding})
  • 46. MAKING A BAR CHART.attr("height", function(d) { return d;});
  • 47. MAKING A BAR CHART.attr("y", function(d) { return h - d; //Height minus data value}).attr("height", function(d) { return d * 4; //Just the data value});
  • 48. MAKING A BAR CHART.attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")";});
  • 49. MAKING A BAR CHARTsvg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d) { return d; }) .attr("text-anchor", "middle") .attr("x", function(d, i) { return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2; }) .attr("y", function(d) { return h - (d * 4) + 14; }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white");
  • 50. THE ANALYSIS OF SOURCE CODE
  • 51. THE WEALTH & HEALTH OF NATIONS
  • 52. DATA[{ "name": "Angola", "region": "Sub-Saharan Africa", "income": [ [1800, 359.93], [1820, 359.93], [1913, 556.12], [1950, 3363.02], [1951, 3440.9], [1952, 3520.61], [1953, 3598.81], [1954, 3450.82], [1955, 3672.08], [1956, 3549.04],
  • 53. TRANSITION// Start a transition that interpolates the data based on year.svg.transition() .duration(duration) .ease("linear") .tween("year", tweenYear()) .each("end", enableInteraction);// Tweens the entire chart by first tweening the year, and then the data.// For the interpolated data, the dots and label are redrawn.function tweenYear(start, end) { start = start || 1800; end = end || 2009; return function() { var year = d3.interpolateNumber(start, end); return function(t) { displayYear(year(t)); }; }}
  • 54. INTERPOLATE DATA// Interpolates the dataset for the given (fractional) year.function interpolateData(year) { return nations.map(function(d) { return { name: d.name, income: interpolateValues(d.income, year), //... }; });}// Finds (and possibly interpolates) the value for the specified year.function interpolateValues(values, year) { var i = bisect.left(values, year, 0, values.length - 1), a = values[i]; if (i > 0) { var b = values[i - 1], t = (year - a[0]) / (b[0] - a[0]);
  • 55. ADSERVER SVN COMMIT RECORD
  • 56. DATA"total": [ [1303115788, 2], [1303182050, 6], [1303194454, 18], [1303210228, 28], [1303267612, 40], //...],"qwang": [ [1335869108, 0], [1335869108, 9], [1335869340, 2], [1335954367, 33], //...
  • 57. LAYOUTforce = d3.layout.force() .gravity(.5) .charge(function(d, i){ return i ? 0 : -20; }) .nodes(users) .size([width, height]);force.start();force.on("tick", function(e) { var q = d3.geom.quadtree(users), i = 0, n = users.length; while (++i < n) { q.visit(collide(users[i])); } dot.selectAll("g") .attr("transform", function(d) { return "translate(" + d.x + ", "
  • 58. COLLISIONfunction collide(node) { var rr = r(node), nx1 = node.x - rr, nx2 = node.x + rr, ny1 = node.y - rr, ny2 = node.y + rr; return function(quad, x1, y1, x2, y2) { if (quad.point && (quad.point !== node)) { var x = node.x - quad.point.x, y = node.y - quad.point.y, l = Math.sqrt(x * x + y * y), rr = r(node) + r(quad.point); if (l < rr) { l = (l - rr) / l * .5; node.x -= x *= l; node.y -= y *= l; quad.point.x += x; quad.point.y += y;
  • 59. RESUMEfunction displayDay(time_pos) { dots.data(interpolateData(time_pos)).call(position).sort(order); label.text(secondtoday(time_pos)); force.resume();}
  • 60. RESOURCES
  • 61. RESOURCESD3js WikiPaper:D3: Data-Driven DocumentsMike BostockVisual.lyDavid McCandless: The beauty of data visualizationGapMinder - for a fact-based world view
  • 62. Q&A
  • 63. THANK YOU