Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How Quick Can We Be? Data Visualization Techniques for Engineers.

3,373 views

Published on

Published in: Technology
  • Be the first to comment

How Quick Can We Be? Data Visualization Techniques for Engineers.

  1. 1. How quick can we be?(data visualization techniques for engineers)
  2. 2. Who we are
  3. 3. Who we areAlice Bonhomme-Biais
  4. 4. Who we areAlice Bonhomme-Biais Avni Khatri
  5. 5. DATA
  6. 6. OUR PROCESS
  7. 7. Goals
  8. 8. Goals1. Plot the number of people at each location
  9. 9. Goals1. Plot the number of people at each location2. Plot the percentage of women at each location
  10. 10. Goals1. Plot the number of people at each location2. Plot the percentage of women at each location3. Plot two dimensions
  11. 11. Goals1. Plot the number of people at each location2. Plot the percentage of women at each location3. Plot two dimensions4. Clearly show the gender disparity
  12. 12. Goals1. Plot the number of people at each location2. Plot the percentage of women at each location3. Plot two dimensions4. Clearly show the gender disparity5. Use the tool to visualize data for future RHoKs
  13. 13. OPENHEATMAP
  14. 14. OpenHeatMap Demo
  15. 15. TOOLS
  16. 16. Non-programmatic tools
  17. 17. Non-programmatic tools• OpenHeatMap• Google Fusion Tables• Google Charts• Socrata• ChartsBin• Factual
  18. 18. Non-programmatic tools• OpenHeatMap• Google Fusion Tables• Google Charts• Socrata• ChartsBin• Factual
  19. 19. Non-programmatic tools• OpenHeatMap• Google Fusion Tables• Google Charts• Socrata• ChartsBin• Factual
  20. 20. Programatic tools
  21. 21. Programatic tools• Google Maps JS API• Yahoo! Maps Web Services• Bing Maps AJAX Control• Google Charts Tools
  22. 22. GOOGLE FUSION TABLES
  23. 23. Fusion Tables Demo
  24. 24. SOCRATA
  25. 25. GOOGLE MAPS API
  26. 26. function initialize() { var latlng = new google.maps.LatLng(41.850033, -87.6500523); var myOptions = { zoom: 3, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map( document.getElementById("map_canvas"), myOptions);}
  27. 27. function initialize() { var latlng = new google.maps.LatLng(41.850033, -87.6500523); var myOptions = { zoom: 3, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map( document.getElementById("map_canvas"), myOptions);}
  28. 28. function initialize() { var latlng = new google.maps.LatLng(41.850033, -87.6500523); var myOptions = { zoom: 3, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map( document.getElementById("map_canvas"), myOptions);}
  29. 29. var locations = [ ["Aarhus, Denmark",56.162939,10.203921,10,20], ["Bangalore, India",12.971599,77.594563,217,11.98], ["Chicago, Illinois",41.878114,-87.629798,107,31.78], ["Nairobi, Kenya",1.283333,36.816667,33,6.06].......];
  30. 30. var locations = [ ["Aarhus, Denmark",56.162939,10.203921,10,20], ["Bangalore, India",12.971599,77.594563,217,11.98], ["Chicago, Illinois",41.878114,-87.629798,107,31.78], ["Nairobi, Kenya",1.283333,36.816667,33,6.06].......];
  31. 31. function setMarkers(map, markers) { ... for (var i = 0; i < markers.length; i++) { markerLatLng = new google.maps.LatLng(markers[i][1],markers[i][2]); marker = new google.maps.Marker({ position: markerLatLng, map: map, title: markers[i][0], zIndex: 1 ); }}// add call to setMarkers in initializefunction initialize() { ... setMarkers (map, locations);}
  32. 32. function setMarkers(map, markers) { ... for (var i = 0; i < markers.length; i++) { markerLatLng = new google.maps.LatLng(markers[i][1],markers[i][2]); marker = new google.maps.Marker({ position: markerLatLng, map: map, title: markers[i][0], zIndex: 1 ); }}// add call to setMarkers in initializefunction initialize() { ... setMarkers (map, locations);}
  33. 33. function setMarkers(map, markers) { ... for (var i = 0; i < markers.length; i++) { markerLatLng = new google.maps.LatLng(markers[i][1],markers[i][2]); marker = new google.maps.Marker({ position: markerLatLng, map: map, title: markers[i][0], zIndex: 1 ); }}// add call to setMarkers in initializefunction initialize() { ... setMarkers (map, locations);}
  34. 34. function setMarkers(map, markers) { for (var i = 0; i < markers.length; i++) { ... iwContent = "<span class=”label”>" + markers[i][0] + "</span><br/>" + "Number of People: " + markers[i][3] + "<br/>" + "% of Women: " + markers[i][4]; marker = new google.maps.Marker({ ... html: iwContent }); google.maps.event.addListener(marker, "click", function() { infowindow.setContent(this.html); infowindow.open(map, this); }); }}function initialize() { ... infowindow = new google.maps.InfoWindow({ content: "loading..." });}
  35. 35. function setMarkers(map, markers) { for (var i = 0; i < markers.length; i++) { ... iwContent = "<span class=”label”>" + markers[i][0] + "</span><br/>" + "Number of People: " + markers[i][3] + "<br/>" + "% of Women: " + markers[i][4]; marker = new google.maps.Marker({ ... html: iwContent }); google.maps.event.addListener(marker, "click", function() { infowindow.setContent(this.html); infowindow.open(map, this); }); }}function initialize() { ... infowindow = new google.maps.InfoWindow({ content: "loading..." });}
  36. 36. function setMarkers(map, markers) { for (var i = 0; i < markers.length; i++) { ... iwContent = "<span class=”label”>" + markers[i][0] + "</span><br/>" + "Number of People: " + markers[i][3] + "<br/>" + "% of Women: " + markers[i][4]; marker = new google.maps.Marker({ ... html: iwContent }); google.maps.event.addListener(marker, "click", function() { infowindow.setContent(this.html); infowindow.open(map, this); }); }}function initialize() { ... infowindow = new google.maps.InfoWindow({ content: "loading..." });}
  37. 37. <script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/src/markerclusterer.js"></script>var data = {"count": 232,"participants": [ { "location": "Aarhus, Denmark", "gender": "Female", "latitude": "56.162939", "longitude": "10.203921" }, { "location": "Aarhus, Denmark", "gender": "Female", "latitude": "56.162939", "longitude": "10.203921" }......]};
  38. 38. <script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/src/markerclusterer.js"></script>var data = {"count": 232,"participants": [ { "location": "Aarhus, Denmark", "gender": "Female", "latitude": "56.162939", "longitude": "10.203921" }, { "location": "Aarhus, Denmark", "gender": "Female", "latitude": "56.162939", "longitude": "10.203921" }......]};
  39. 39. <script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/src/markerclusterer.js"></script>var data = {"count": 232,"participants": [ { "location": "Aarhus, Denmark", "gender": "Female", "latitude": "56.162939", "longitude": "10.203921" }, { "location": "Aarhus, Denmark", "gender": "Female", "latitude": "56.162939", "longitude": "10.203921" }......]};
  40. 40. var markers = [];for (var i = 0; i < data.participants.length; ++i) { var latlng = new GLatLng(data.participants[i].latitude, data.participants[i].longitude); var marker = new GMarker(latlng, {icon: icon}); markers.push(marker);}var markerCluster = new MarkerClusterer(map, markers);
  41. 41. var markers = [];for (var i = 0; i < data.participants.length; ++i) { var latlng = new GLatLng(data.participants[i].latitude, data.participants[i].longitude); var marker = new GMarker(latlng, {icon: icon}); markers.push(marker);}var markerCluster = new MarkerClusterer(map, markers);
  42. 42. var layer = new google.maps.FusionTablesLayer(747060, { heatmap: true });layer.setMap(map);
  43. 43. var layer = new google.maps.FusionTablesLayer(747060, { heatmap: true });layer.setMap(map);
  44. 44. function plotCircles(map, dataPoints) { ... for (var i = 0; i < dataPoints.length; i++) { pointLatLng = new google.maps.LatLng(dataPoints[i][1],dataPoints[i][2]); circleOptions = { strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: “#FF0000”, fillOpacity: 0.40, map: map, center: pointLatLng, radius: dataPoints[i][3]*3000 }; circle = new google.maps.Circle(circleOptions); }
  45. 45. function plotCircles(map, dataPoints) { ... for (var i = 0; i < dataPoints.length; i++) { pointLatLng = new google.maps.LatLng(dataPoints[i][1],dataPoints[i][2]); circleOptions = { strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: “#FF0000”, fillOpacity: 0.40, map: map, center: pointLatLng, radius: dataPoints[i][3]*3000 }; circle = new google.maps.Circle(circleOptions); }
  46. 46. ...percentage = dataPoints[i][4];if (percentage <= 10) { color = "#FF0000";} else if (percentage >=20) { color = "#339900";} else { color = "#FFCC00";}circleOptions = { strokeColor: color,....
  47. 47. ...percentage = dataPoints[i][4];if (percentage <= 10) { color = "#FF0000";} else if (percentage >=20) { color = "#339900";} else { color = "#FFCC00";}circleOptions = { strokeColor: color,....
  48. 48. ...setMarkers (map, locations);infowindow = new google.maps.InfoWindow({ content: "loading..." });....
  49. 49. ...setMarkers (map, locations);infowindow = new google.maps.InfoWindow({ content: "loading..." });....
  50. 50. YAHOO! MAPS WEB SERVICES
  51. 51. ....icon = new YImage();icon.src = "marker_34_red.png";icon.size = new YSize(20,34);icon.offsetSmartWindow = new YCoordPoint(9,0);....var marker = new YMarker(point, icon);....
  52. 52. ....icon = new YImage();icon.src = "marker_34_red.png";icon.size = new YSize(20,34);icon.offsetSmartWindow = new YCoordPoint(9,0);....var marker = new YMarker(point, icon);....
  53. 53. GOOGLE CHARTS TOOLS
  54. 54. Conclusions Visualize 2 No Coding Legend First Map Full Control sets of data OpenHeatMap Easy Google Fusion Easy Tables Google Charts Moderate Socrata Moderate Google Maps API Moderate Yahoo Maps Moderate Web Services Google Charts Moderate Tools
  55. 55. Conclusions
  56. 56. Conclusions• Very easy to plot flat numbers with most tools
  57. 57. Conclusions• Very easy to plot flat numbers with most tools• Plotting multiple sets of data without code is not trivial
  58. 58. Conclusions• Very easy to plot flat numbers with most tools• Plotting multiple sets of data without code is not trivial• Flash graphics still ahead of JS graphics with respect to data visualization
  59. 59. Conclusions• Very easy to plot flat numbers with most tools• Plotting multiple sets of data without code is not trivial• Flash graphics still ahead of JS graphics with respect to data visualization• Most map and charting tools need better overall legend support
  60. 60. Conclusions• Very easy to plot flat numbers with most tools• Plotting multiple sets of data without code is not trivial• Flash graphics still ahead of JS graphics with respect to data visualization• Most map and charting tools need better overall legend support• Maps API products very similar in structure
  61. 61. Conclusions• Very easy to plot flat numbers with most tools• Plotting multiple sets of data without code is not trivial• Flash graphics still ahead of JS graphics with respect to data visualization• Most map and charting tools need better overall legend support• Maps API products very similar in structure• Weve uncovered just the tip of the iceberg in terms of data visualization
  62. 62. Conclusions• Very easy to plot flat numbers with most tools• Plotting multiple sets of data without code is not trivial• Flash graphics still ahead of JS graphics with respect to data visualization• Most map and charting tools need better overall legend support• Maps API products very similar in structure• Weve uncovered just the tip of the iceberg in terms of data visualization• Our visualized data showed us that the more the people that attended the event, the more likely we were to meet the 20% challenge
  63. 63. Conclusions• Very easy to plot flat numbers with most tools• Plotting multiple sets of data without code is not trivial• Flash graphics still ahead of JS graphics with respect to data visualization• Most map and charting tools need better overall legend support• Maps API products very similar in structure• Weve uncovered just the tip of the iceberg in terms of data visualization• Our visualized data showed us that the more the people that attended the event, the more likely we were to meet the 20% challenge• We need to improve and automate our data collection process as much as possible
  64. 64. Conclusions• Very easy to plot flat numbers with most tools• Plotting multiple sets of data without code is not trivial• Flash graphics still ahead of JS graphics with respect to data visualization• Most map and charting tools need better overall legend support• Maps API products very similar in structure• Weve uncovered just the tip of the iceberg in terms of data visualization• Our visualized data showed us that the more the people that attended the event, the more likely we were to meet the 20% challenge• We need to improve and automate our data collection process as much as possible• We need more women hackers
  65. 65. Conclusions• Very easy to plot flat numbers with most tools• Plotting multiple sets of data without code is not trivial• Flash graphics still ahead of JS graphics with respect to data visualization• Most map and charting tools need better overall legend support• Maps API products very similar in structure• Weve uncovered just the tip of the iceberg in terms of data visualization• Our visualized data showed us that the more the people that attended the event, the more likely we were to meet the 20% challenge• We need to improve and automate our data collection process as much as possible• We need more women hackers• When women do participate, they win!
  66. 66. RHoK #3 on June 4th and 5th SIGN UP NOW!
  67. 67. Contact usaliceb@google.com avni@avni.net @avni321
  68. 68. Resources and further• http://msdn.microsoft.com/en-us/library/bb429619.aspx• http://code.google.com/apis/chart/• http://www.google.com/fusiontables/public/tour/index.html• http://code.google.com/apis/maps/documentation/javascript/• http://developer.yahoo.com/maps/• http://www.openheatmap.com/• http://googlegeodevelopers.blogspot.com/2009/04/markerclusterer-solution-to-too- many.html• http://opendata.socrata.com/
  69. 69. Photo Credits • http://www.flickr.com/photos/compassalba/5361528668/sizes/o/in/photostream/ • http://www.flickr.com/photos/rhok_chicago/5244434726/in/ set-72157625557470340 • http://www.flickr.com/photos/rhok_chicago/5233673064/in/ set-72157625529538216  • http://www.flickr.com/photos/10785432@N03/4123252604/ • http://www.flickr.com/photos/thehbunny/5055948378/ • http://www.flickr.com/photos/53941041@N00/4977883190/ • http://www.flickr.com/photos/rhok_chicago/5243866521/ • http://www.flickr.com/photos/rhok_chicago/5244461658/in/ set-72157625557470340 • http://www.flickr.com/photos/rhok_chicago/5233687260/in/ set-72157625529538216 • http://www.flickr.com/photos/ladypain/1950149100/in/photostream/ • http://www.flickr.com/photos/10687935@N04/3055314845/ • http://www.flickr.com/photos/42788859@N00/318947873/

×