Data visualisation with D3
•Download as PPTX, PDF•
3 likes•830 views
This document provides an overview of data visualization and the D3 JavaScript library. It discusses the foundations of data visualization using historical examples. It then introduces D3, describing it as a JavaScript library for manipulating documents based on data. The document outlines a use case visualizing Twitter data from the Swiss parliament using D3, including the methodology, results, and step-by-step instructions for building the visualization in D3. Key aspects of D3 covered include loading and formatting data, defining scales to map data values to visual properties, and drawing SVG elements to represent the data visually using circles and axes.
More Related Content
Viewers also liked
Similar to Data visualisation with D3
Similar to Data visualisation with D3 (20)
Recently uploaded
Recently uploaded (20)
Data visualisation with D3
- 1. http://www.datastory.c h @datastory_ch Data visualisation with D3 Webmardi Catherine Pugin Fribourg, 05.05.2015 Florian Evéquoz
- 3. Datastory • Founded in 2014 • 4 partners with competencies in – Data modeling – Data mining – Data analysis – Data visualisation • Custom solutions in data analysis and visualisation 3
- 4. Outline • Data visualisation : foundations – Some historical examples • D3 – Introduction – Use case: Twitter and the Swiss parliament • Methodology • Results and comments • Step-by-step D3 4
- 10. • Visualization can be used to rapidly make sense of complex data • Example : – Which state has the highest income per capita ? – Is there a relationship between income and college degrees ?
- 12. «Information visualization is useful only for complex data» Are you sure ?
- 14. D3 DATA-DRIVEN DOCUMENTS Webmardi – Data visualisation and D3 14
- 15. Data-driven Documents – D3.js • JavaScript library for manipulating documents based on data • Relies on HTML5, SVG, and CSS • Based on data-driven DOM manipulation • Contains powerful low- level visualisation components • Requires recent and efficient browsers 15
- 16. Data-driven Documents – D3.js • What D3 is not – Not a graphical framework like Raphael – Not a chart library like Highcharts – Not an compatibility layer like JQuery • As a consequence, D3 does not include high-level visualisation primitives like pie(), plot(), bar(), line()… 16
- 22. Ready?... 22
- 23. Use Case: Twitter and the Swiss Parliament • Methodology 1. Find all parliamantarians accounts 100 / 246 2. Define the period Spring session (3 weeks) 3. Define metrics popularity : # RTs + # Favorites visibility : # followers + # RT followers 23
- 24. Tools • Twitter4j API Get all information about tweets published during the given period by the given group of users • KNIME Analysis of the data and production of the CSV file in the predefined format • D3 Visualisation 24
- 25. Results (1) • 74 parliamantarians published 1565 original tweets. 25
- 26. Results (2) - CSV 26 - "id","user","date","text", "retweetedstatus","retweets", "favorites", "hashtags", "followers","reach", "Nom Prénom", "Parti","Langue","Canton", "Conseil"
- 27. Results (3) – Viz 27
- 28. Our target for today 28https://github.com/evequozf/d3-tuto-twitter
- 29. viz.html – just a container 29
- 30. viz.js – svg and data variables 30
- 31. D3.csv • Loads a CSV file asynchronously… • … and converts it into a Javascript array 31
- 32. viz.js – load and clean data 32
- 33. D3.filter selection.filter(selector) Filters the selection, returning a new selection that contains only the elements for which the specified selector is true. 33
- 34. Now, bind tweet data to DOM elements • For each tweet in our data, we want to draw an SVG <circle> with cx = *time of tweet* cy = *visibility of tweet* r = *popularity of tweet* • It should by styled, too fill = *parti* stroke = *parti* 34
- 35. viz.js – draw circles for tweets? 35
- 36. What’s the problem? • d.date is between [Mon Mar 02 2015 00:09:20 GMT+0100 (CET), Fri Mar 20 2015 21:59:09 GMT+0100 (CET)] • cx must be a value within our svg width of 960 pixels • the same holds for other fields… 36
- 37. D3 scales • Scales in D3 are functions that encapsulate the mapping of values – from a specific domain (data) – to a specific range (visual encoding of data) – given a specific mapping function (linear, log, time, ordinal, …) 37 http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/
- 38. viz.js – define scales 38
- 39. viz.js – draw circles for tweets 39
- 40. Result in the DOM 40
- 42. D3 axes • D3 provides helper functions to draw axes of charts • Result is predefined SVG elements put in the DOM, that can by styled independently 42
- 43. viz.js - axes 43
- 44. Result in the DOM 44
- 45. style.css – axes styling 45
- 46. View our final result http://localhost:8888/viz.html Get the code used in this tutorial https://github.com/evequozf/d3-tuto-twitter 46
- 47. Published visualisation • Contains additionnal elements – Widgets to filter the data – Tooltip – Zoom on time range – Legend – Log scales – Better colors – Pigeons • http://www.datastory.ch/ef2015/viz.html 47
- 48. There’s (a lot) more to D3 • Layouts • Geographical projections • Color manipulation • Geometry utilities • … 48
- 49. And next… 49
- 50. Let’s keep in touch 50 {catherine,florian,datastory}@datastory.ch