Hadoop meetup 2014

396 views
252 views

Published on

Hadoop Users Group Pittsburgh discusses D3.js

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

  • Be the first to like this

No Downloads
Views
Total views
396
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hadoop meetup 2014

  1. 1. D3, VISUALIZATIONS, N’AT Patrick M. Dudas @pdudders
  2. 2. Who I am..
  3. 3. Data Visualization (Meetup) Art UI/UX Data Coding Github: https://github.com/dudaspm/Pittsburgh-Data-Visualization
  4. 4. Data Mining Process
  5. 5. Edward Tufte “With most visualizations and graphics, the main focus is to take multiple dimensions of information and project it on to a twodimension plot”
  6. 6. Infographic, Model, or Visualization Visualization Infographic Model http://fold.it/portal/info/about - University of Washington
  7. 7. When Graphics Go Bad 7  Challenger  January 28, 1986
  8. 8. Can Anyone Spot the Problem? 8
  9. 9. How About Now? 9
  10. 10. #1 Asked Question  I have “this data.”  What visualization should I use?  http://www.datavis.ca/gallery/evil-pies.php Data 12 34 43 10 35 23 22 9 Normalize Data 0.06383 0.180851 0.228723 0.053191 0.18617 0.12234 0.117021 0.047872 Visualization ?
  11. 11. Steamgraph, Sparklines, and Treemaps
  12. 12. Hive Plots, Star Plots, and Parallel Coordinates
  13. 13. Back to the #1 Asked Question  I have “this data.”  What  Ask visualization should I use? your users or experts
  14. 14. How to Get to D3 HTML Javascript/JQuery XML SVG D3
  15. 15. HTML <html> <head> <title>I am metadata</title> <script src="http://d3js.org/d3.v3.min.js"></script> </head> <body> the body of HTML </body> </html> http://boxnumbertwo.com/D3Simple/1.0/example1.html
  16. 16. DIV <html> <head> <title>I am metadata</title> <script src="../d3/d3.min.js"></script> </head> <body> <div id="visualization_here"></div> </body> </html>
  17. 17. Not Well Formatted HTML <html> <head> <title>I am a webpage</title> <script src="../d3/d3.min.js"></script> </header> <ody> <div id="visualization_here"></div> </body </html>
  18. 18. XML (Must Be Well Formatted) <?xml version="1.0"?> <note> <to>Dave</to> <from>Jamie</from> <heading>Reminder</heading> <message>Don't forget me this weekend!</message> </note>
  19. 19. SVG <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="400px"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke-width:1"/> </svg>
  20. 20. SVG vs. Canvas or Vector vs. Raster  Canvas = Pixels  Raster  SVG  Points  Lines  Polygons  Vector
  21. 21. D3 - http://d3js.org/  Data Driven Documents  Enter, Update, Exit  Interactions  Transitions  Big List of Examples (1900)  http://christopheviau.com/d3list/index.html
  22. 22. D3.js   SVG, CSS, and HTML update   update your data enter enter svg objects using that data (example6) OR   exit    mouse events (example8) transitions (example9)   remove svg using that data (example7) smoothly change data example10 – adding affordances and a little fun
  23. 23. Simple Exam of D3  var circleData = [4, 8, 15, 16, 23, 42]; http://boxnumbertwo.com/D3Simple/1.0/example6.html
  24. 24. Bertin’s Retinal/Visual Variable
  25. 25. Adding Some Aesthetics var color = d3.scale.category10(); newCircles.enter().append("circle") .attr("cx", function(d) { return d*10; }) .attr("cy", function(d) { return d*10; }) .attr("r", function(d) { return d; }) .style("fill", function(d) { return color(d); }); http://boxnumbertwo.com/D3Simple/1.0/example7.html https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-category10 http://boxnumbertwo.com/D3Simple/NetworkX/1.6/index.php?sizeOfGraph=60&Pro babilityOfEdge=.03
  26. 26. Enter, Update, Exit http://boxnumbertwo.com/D3Simple/1.0/example7.html
  27. 27. Change Blindness  Minimizing changes in a scene to make visual changes more noticeable.
  28. 28. Sometimes We Miss the Change     Change Blindness - phenomenon that occurs when a person viewing a visual scene apparently fails to detect large changes in the scene (Wikipedia) http://www.csc.ncsu.edu/faculty/healey/PP/mo vies/Dinner.gif http://www.csc.ncsu.edu/faculty/healey/PP/mo vies/Airplane.gif http://www.csc.ncsu.edu/faculty/healey/PP/mo vies/Chopper_Truck.gif
  29. 29. Smooooooth Transitions newerCircles.exit() .transition() .duration(3000) .attr("r", 0) .remove(); http://boxnumbertwo.com/D3Simple/1.0/example9.ht http://www.boxnumbertwo.com/PitterPatter/1.2/ml
  30. 30. Don Norman’s Design of Everyday Things 32   Builds on the notion of affordances Affordance – "refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used … Affordances provide strong clues to the operations of things" (Norman, 1988)  This can include objects or words/numbers! Norman, D. A. (1988). The design of everyday things. New York, Doubleday
  31. 31. Affordance
  32. 32. Affordance Scenario 1 34 http://www.baddesigns.com
  33. 33. Trapped between the doors! 35   She was walking from one building to the other with a co-worker. They pulled the handles that opened the doors and went down the walkway. Upon reaching the other end they again pulled the handles, but the doors wouldn't budge. Assuming the doors were locked, they returned to the doors they originally opened to enter the walkway. But when they tried to pull open these doors, they wouldn't open either. They were trapped in the walkway between the two buildings! My friend and her co-worker spent the next few minutes trying to signal to people though the windows in the buildings, but the people they signaled seemed strangely reluctant to come to the rescue. Finally, after trying the doors again, they discovered they needed to push the doors rather than pull them.
  34. 34. Let’s Add Some Affordances newCircles.enter().append("circle") .attr("cx", function(d) { return d*10; }) .attr("cy", function(d) { return d*10; }) .attr("r", function(d) { return d; }) .style("fill", function(d) { return color(d); }) .style("stroke-width", 0) .style("stroke", "black") .style("cursor", "pointer") // on mouse-over, change the border of the given circle to 2 .on("mouseover", function() {d3.select(this).style("strokewidth", 2)}) // on mouse-out, change the border back to the original (0) .on("mouseout", function() {d3.select(this).style("strokewidth", 0)}) http://boxnumbertwo.com/D3Simple/1.0/example10.html
  35. 35. Heatmap
  36. 36. Heat Map 38
  37. 37. Heat Map 39
  38. 38. Matrix + Layers + Color = Heatmap redM.push(0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0) redM.push(0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0) redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0) redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0) redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0) redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0) redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0) redM.push(0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0) redM.push(0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0) redM.push(0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0) redM.push(0,0,0,0,0,1,0,1,1,0,1,0,0,0,0,0) redM.push(0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0) redM.push(0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0) redM.push(0,0,0,0,1,1,1,0,0,1,1,1,0,0,0,0) redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0) redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0) redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0); http://boxnumbertwo.com/D3Simple/mario/standing.html
  39. 39. Chaining Transitions var t0 = vis.transition().ease('quadin').selectAll("rect"); t0.style("fill", function(d,i) { return marioColors[d[1][1]]; }); var t1 = t0.transition(); t1.style("fill", function(d,i) { return marioColors[d[2][1]]; }); http://boxnumbertwo.com/D3Simple/mario/marioMoving.html
  40. 40. Javascript Timers + D3 = Animation var cloud_scale_1 = .8, cloud_translate_1 = [700,100]; setInterval(function(){moveCloud_1();},25); var boo_2 = 0; var cloud_scale_2 = .6, cloud_translate_2 = [0,300]; setInterval(function(){moveCloud_2();},30); var boo_3 = 0; var cloud_scale_3 = .7, cloud_translate_3 = [300,0]; setInterval(function(){moveCloud_3();},40); var boo_4 = 0; var cloud_scale_4 = .9, cloud_translate_4 = [500,200]; setInterval(function(){moveCloud_4();},55); http://boxnumbertwo.com/D3Simple/6.1/
  41. 41. Dynamic Twitter Network Analysis 43
  42. 42. Overall Platform 44
  43. 43. Ubiquitous Platform 45    Built upon HTML5 standards Does not require any additional software to be downloaded All major browsers:  IE,  Firefox, Chrome, Safari, Opera, etc. Supports all UTF-8 and Unicode character types
  44. 44. Networks 46  James tweets: “Just saw @Dannie at the #Pittsburgh #Library. Checked out this book: http://bit.ly/U8AGsc”  Username -> Username:   Username -> Hashtag:   James -> Pittsburgh and James -> Library Hashtag -> Hashtag:   James -> Dannie Pittsburgh -> Library Username -> URL:  James -> http://bit.ly/U8AGsc
  45. 45. DTNA Layout 47
  46. 46. Saliency and Network 48   limited to 100 nodes clustering algorithm    differentiated by color coding bias to inner-cluster strength to inter-cluster strength edge directionality bias inner-cluster vs. inter-cluster  log-based degree centrality st  highlight 1 degree Blondel, V. D.,connections Guillaume, J. L., Lambiotte, R., & Lefebvre, E. (2008). Fast unfolding of communities in large networks. Journal of  Statistical Mechanics: Theory and Experiment, 2008(10), P10008.
  47. 47. Real-Time Network 49
  48. 48. Dynamic Query and Layout 50
  49. 49. Export Network 51  Export:  UCINET  Gephi  Palantir  Pajek
  50. 50. TweetViewer 52
  51. 51. TweetViewer Timeline 53
  52. 52. Sentiment Analysis 54 F. Å. Nielsen, "A new ANEW: Evaluation of a word list for sentiment analysis in microblogs," Arxiv preprint arXiv:1103.2903, 2011.
  53. 53. Sentiment Analysis 55 Negative Words: • Sad • Murder • Disgust • WTF • Kill •  http://www.youtube.com/watch?v=ao6V_5sK3-A Positive Words: • Praise • Love • Dear • kind • Hope • 
  54. 54. Thank you!  Contact:  dudaspm@gmail.com  Github:  https://github.com/dudaspm/Pittsburgh-Data- Visualization

×