D3JSDREAMPUF JAN. 2013
AGENDAIntroductionExamplesA guide of bar chartThe analysis of source code   The Wealth & Health of Nations   An time serie...
INTRODUCTION
D3.JS: DATA-DRIVEN DOCUMENTSJavaScript LibraryOpen source (BSD license)developed by Michael Bostock and others at Stanford...
D3.JS: DATA-DRIVEN DOCUMENTSnot a traditional visualization frameworkfocus on efficient manipulation of documents based on...
FEATURE
SELECTIONSd3.selectAll("p")  .style("color", "white");  operate on arbitrary sets of nodes called selections  W3C Selector...
DYNAMIC PROPERTIES d3.selectAll("p")   .data([4, 8, 15, 16, 23, 42])   .style("font-size", function(d, i) { return d + "px...
ENTER AND EXIT var p = d3.select("body").selectAll("p")   // Update…     .data([4, 8, 15, 16, 23, 42])     .text(String); ...
SUBSELECTIONS d3.selectAll("ul")     .data(questions) // an array of questions   .selectAll("li")     // a nested array of...
TRANSITIONS // fade background from white to black in 1s d3.select("body").transition()     .duration(1000)     .style("ba...
EXAMPLES
FISHER–YATES SHUFFLE
2008 OLYMPIC MEDALS
OBAMAS 2013 BUDGET    PROPOSAL
economy (mpg)    cylinders   displacement (cc)   power (hp)    weight (lb)   0-60 mph (s)                8.0              ...
Agglo merativeCluster                                                                                                     ...
Aitoff
TUTORIALSA GUIDE OF BAR CHART
BASE COMPONENT     HTML     CSS     Javascript     SVG
SVG<svg width="50" height="50"></svg>
SVG<svg width="50" height="50">    <circle cx="25" cy="25" r="22"     fill="blue" stroke="gray" stroke-width="2"/></svg>
SIMPLE SHAPES
SIMPLE SHAPES<rect x="0" y="0" width="500" height="50"/>
SIMPLE SHAPES<circle cx="250" cy="25" r="25"/>
SIMPLE SHAPES<ellipse cx="250" cy="25" rx="100" ry="25"/>
SIMPLE SHAPES<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>
SIMPLE SHAPES<text x="250" y="25">Easy-peasy</text>                                  Easy-peasy
SIMPLE SHAPES<text x="150" y="50" font-family="sans-serif"      font-size="50" fill="gray">Easy-peasy</text>              ...
SIMPLE SHAPES<circle cx="25" cy="25" r="100"  fill="yellow" stroke="orange" stroke-width="5"/>
SIMPLE SHAPES<circle cx="25" cy="25" r="22" class="pumpkin"/>.pumpkin {    fill: red;    stroke: orange;    stroke-width: ...
SIMPLE SHAPES<rect   x="100"   y="100"   width="80"   height="80"   fill="purple"/><rect   x="120"   y="105"   width="80" ...
SIMPLE SHAPES<circle   cx="125"   cy="80"   r="60"   fill="rgba(128, 0, 128, 1.0)"/><circle   cx="150"   cy="80"   r="60" ...
PAGE<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>D3 Test</title>        <script type="text/...
FIRSTd3.select("body").append("p").text("New paragraph!");
WITH DATAvar dataset = [ 5, 10, 15, 20, 25 ];d3.select("body").selectAll("p");
WITH DATAd3.select("body").selectAll("p")    .data(dataset)    .enter()    .append("p")    .text("New paragraph!");
WITH DATAconsole.log(d3.selectAll("p"))
WITH DATAconsole.log(d3.selectAll("p"))
WITH DATAvar dataset = [ 5, 10, 15, 20, 25 ];d3.select("body").selectAll("p")    .data(dataset)    .enter()    .append("p"...
BEYOND TEXT.style("color", "red");.style("color", function(d) {    if (d > 15) { //Threshold of 15        return "red";   ...
PLAY WITH DATAvar dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,                14, 11, 22, 29, 11, 13, 12, 17, 18, 10, ...
MAKING A BAR CHARTvar dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,                11, 12, 15, 20, 18, 17, 16, 18, 23...
MAKING A BAR CHARTsvg.selectAll("rect")   .data(dataset)   .enter()   .append("rect")   .attr("x", 0)   .attr("y", 0)   .a...
MAKING A BAR CHART.attr("x", function(d, i) {    return i * 21; //Bar width of 20 plus 1 for padding})
MAKING A BAR CHART.attr("height", function(d) {    return d;});
MAKING A BAR CHART.attr("y", function(d) {    return h - d; //Height minus data value}).attr("height", function(d) {    re...
MAKING A BAR CHART.attr("fill", function(d) {    return "rgb(0, 0, " + (d * 10) + ")";});
MAKING A BAR CHARTsvg.selectAll("text")   .data(dataset)   .enter()   .append("text")   .text(function(d) {       return d...
THE ANALYSIS OF SOURCE CODE
THE WEALTH & HEALTH OF NATIONS
DATA[{     "name": "Angola",     "region": "Sub-Saharan Africa",     "income": [       [1800, 359.93],       [1820, 359.93...
TRANSITION// Start a transition that interpolates the data based on year.svg.transition()    .duration(duration)    .ease(...
INTERPOLATE DATA// Interpolates the dataset for the given (fractional) year.function interpolateData(year) {  return natio...
ADSERVER SVN COMMIT RECORD
DATA"total": [   [1303115788,   2],   [1303182050,   6],   [1303194454,   18],   [1303210228,   28],   [1303267612,   40],...
LAYOUTforce = d3.layout.force()          .gravity(.5)          .charge(function(d, i){ return i ? 0 : -20; })          .no...
COLLISIONfunction collide(node) {  var rr = r(node),      nx1 = node.x - rr,      nx2 = node.x + rr,      ny1 = node.y - r...
RESUMEfunction displayDay(time_pos) {  dots.data(interpolateData(time_pos)).call(position).sort(order);  label.text(second...
RESOURCES
RESOURCESD3js WikiPaper:D3: Data-Driven DocumentsMike BostockVisual.lyDavid McCandless: The beauty of data visualizationGa...
Q&A
THANK YOU
A short introduction of D3js
A short introduction of D3js
A short introduction of D3js
A short introduction of D3js
A short introduction of D3js
A short introduction of D3js
Upcoming SlideShare
Loading in …5
×

A short introduction of D3js

1,991 views

Published on

## 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

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

No Downloads
Views
Total views
1,991
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
32
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

A short introduction of D3js

  1. 1. D3JSDREAMPUF JAN. 2013
  2. 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. 3. INTRODUCTION
  4. 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. 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. 6. FEATURE
  7. 7. SELECTIONSd3.selectAll("p") .style("color", "white"); operate on arbitrary sets of nodes called selections W3C Selectors API or Sizzle fallback
  8. 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. 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. 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. 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. 12. EXAMPLES
  13. 13. FISHER–YATES SHUFFLE
  14. 14. 2008 OLYMPIC MEDALS
  15. 15. OBAMAS 2013 BUDGET PROPOSAL
  16. 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. 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. 18. Aitoff
  19. 19. TUTORIALSA GUIDE OF BAR CHART
  20. 20. BASE COMPONENT HTML CSS Javascript SVG
  21. 21. SVG<svg width="50" height="50"></svg>
  22. 22. SVG<svg width="50" height="50"> <circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/></svg>
  23. 23. SIMPLE SHAPES
  24. 24. SIMPLE SHAPES<rect x="0" y="0" width="500" height="50"/>
  25. 25. SIMPLE SHAPES<circle cx="250" cy="25" r="25"/>
  26. 26. SIMPLE SHAPES<ellipse cx="250" cy="25" rx="100" ry="25"/>
  27. 27. SIMPLE SHAPES<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>
  28. 28. SIMPLE SHAPES<text x="250" y="25">Easy-peasy</text> Easy-peasy
  29. 29. SIMPLE SHAPES<text x="150" y="50" font-family="sans-serif" font-size="50" fill="gray">Easy-peasy</text> Easy-peasy
  30. 30. SIMPLE SHAPES<circle cx="25" cy="25" r="100" fill="yellow" stroke="orange" stroke-width="5"/>
  31. 31. SIMPLE SHAPES<circle cx="25" cy="25" r="22" class="pumpkin"/>.pumpkin { fill: red; stroke: orange; stroke-width: 5; }
  32. 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. 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. 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. 35. FIRSTd3.select("body").append("p").text("New paragraph!");
  36. 36. WITH DATAvar dataset = [ 5, 10, 15, 20, 25 ];d3.select("body").selectAll("p");
  37. 37. WITH DATAd3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text("New paragraph!");
  38. 38. WITH DATAconsole.log(d3.selectAll("p"))
  39. 39. WITH DATAconsole.log(d3.selectAll("p"))
  40. 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. 41. BEYOND TEXT.style("color", "red");.style("color", function(d) { if (d > 15) { //Threshold of 15 return "red"; } else { return "black"; }});
  42. 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. 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. 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. 45. MAKING A BAR CHART.attr("x", function(d, i) { return i * 21; //Bar width of 20 plus 1 for padding})
  46. 46. MAKING A BAR CHART.attr("height", function(d) { return d;});
  47. 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. 48. MAKING A BAR CHART.attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")";});
  49. 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. 50. THE ANALYSIS OF SOURCE CODE
  51. 51. THE WEALTH & HEALTH OF NATIONS
  52. 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. 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. 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. 55. ADSERVER SVN COMMIT RECORD
  56. 56. DATA"total": [ [1303115788, 2], [1303182050, 6], [1303194454, 18], [1303210228, 28], [1303267612, 40], //...],"qwang": [ [1335869108, 0], [1335869108, 9], [1335869340, 2], [1335954367, 33], //...
  57. 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. 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. 59. RESUMEfunction displayDay(time_pos) { dots.data(interpolateData(time_pos)).call(position).sort(order); label.text(secondtoday(time_pos)); force.resume();}
  60. 60. RESOURCES
  61. 61. RESOURCESD3js WikiPaper:D3: Data-Driven DocumentsMike BostockVisual.lyDavid McCandless: The beauty of data visualizationGapMinder - for a fact-based world view
  62. 62. Q&A
  63. 63. THANK YOU

×