1 / 20

Introduction to D3.js

Introduction to D3.js. CS 4390/5390 Data Visualization Shriley Moore, Instructor October 1 , 2014. Announcements. MATLAB Tutorial taught by Rogelio Long, rlong@miners.utep.edu, Thursday, Oct 2, 4:30-5:30pm, Bell Hall Computer Lab Room 130

odette-bird
Télécharger la présentation

Introduction to D3.js

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to D3.js CS 4390/5390 Data Visualization Shriley Moore, Instructor October 1, 2014

  2. Announcements • MATLAB Tutorial taught by Rogelio Long, rlong@miners.utep.edu, Thursday, Oct 2, 4:30-5:30pm, Bell Hall Computer Lab Room 130 • CS Seminar, Barry Rountree, LLNL, “Open Problems in Power-aware Supercomputing”, Friday, Oct 3, 10:30am, CCSB G.0208, followed by discussion with students about job opportunities at the national labs • CS Seminar, Zach Toups, NMSU, “Zero-Fidelity Simulation to Improve Team Coordination Learning”, Friday, Oct 3, 1:30pm, CCSB G.0208

  3. What is D3.js? • https://github.com/mbostock/d3/wiki • JavaScript library for manipulating documents based on data • Uses Web standards HTML, SVG, CSS • Has powerful visualization components • Reference: Interactive Data Visualization for the Web by Scott Murray, publ. O’Reilly

  4. Web Topics • Working with D3.js requires an understanding of the following web topics: • HTML • DOM • CSS • JavaScript • SVG • Web browser developer tool

  5. HTML • Hypertext Markup Language • Used to structure content for web browsers • Simple example webpage in HTML: <html> <head> <title>Page Title</title> </head> <body> <h1>Page Title</h1> <p>This is a really boring webpage.</p> </body> </html>

  6. DOM • Document Object Model • Models hierarchical structure of HTML • Each tag is an element. • Elements have relationships such as parent, child, sibling. • In the HTML example • body is the parent of h1 and p • h1 and p are siblings • All elements on the page are descendents of html.

  7. CSS • Cascading Style Sheets • Used to style the visual representation of HTML pages • Consists of selectors and rules • Can be included in head element within a style tag or saved in an external file and referenced using a link element • Simple CSS style sheet example: body { background-color: black; color: white; } • More examples at http://www.w3schools.com/css/css_howto.asp

  8. JavaScript • Dynamic scripting language that can instruct the browser to make changes to a page after it has already loaded • Include directly in an HTML page inside script element or reference external file • Examples at http://www.w3schools.com/js/default.asp

  9. SVG • Scalable Vector Graphics • Text-based image format • Specify how an SVG image should look by writing simple markup code • Example: <svg width=“50” height=“50” <circle cx=“25” cy=“25” r=“22” fill=“blue” stroke=“gray” stroke-width=“2”/> </svg>

  10. Web Browser Developer Tools • Web inspector shows you the current state of the DOM • Watch elements as they change • Use JavaScript console for debugging scripts

  11. To use D3.js • Download to your computer and reference local file <script src=“d3.v3.js”> </script> OR • Reference URL at d3js.org <script src=“http://d3js.org/d3.v3.min.js”> </script>

  12. Use D3 to create a new DOM element <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“utf-8”> <title>D3 Test</title> <script type=“text/javascript” src=“d3/d3.v3.js”></script> </head> <body> <script type=“text/javascript”> d3.select(“body”).append(“p”).text(“New paragraph!”); </script> <p>Original paragraph</p> </body> </html>

  13. Binding Data • With D3, you can bind data values to elements in the DOM. • Example: var dataset = [5, 10, 15, 20, 25]; d3.select(“body”).selectAll(“p”) .data(dataset) .enter() .append(“p”) .text(function(d) { return(d) });

  14. Map Data to SVG Circle Sizes • Assuming we have already created an svg element with width w and height h and saved it in variable svg: var circles = svg.selectAll(“circle”) .data(dataset) .enter() .append(“circle”); circles.attr(“cx”, function(d, i) { return(i*50+25);}) .attr(“cy”, h/2); .attr(“r”, function(d) { return(d) });

  15. Bar Chart Using SVG • Class Exercise 1: Change the circle code to draw a bar chart. Make your code flexible enough to work with a different data array with a different length.

  16. Scatterplot using SVG • Class Exercise 2: Now write a simple scatterplot visualization in D3.js to show the data below. (Hint: Plan the steps, then reuse parts of your circle and bar chart codes). var dataset = [ [ 5, 20 ], [ 480, 90 ] , [ 250, 50 ], [ 100, 33 ], [ 330, 95 ], [ 410, 12 ], [ 475, 44 ], [ 25, 67 ], [ 85, 21 ], [ 220, 88 ] ];

  17. D3 Scales • We want our visualizations to be flexible so as to handle different datasets • D3 scales are functions that map from an input domain to an output range. • Example: var scale = d3.scale.linear() .domain([100, 500]) .range([10, 350]); What does scale(300) return?

  18. Scatterplot 2 • Class Exercise 3: Now use D3 scales to generalize your scatterplot code to plot an arbitrary dataset.

  19. D3 Axes • See example code scatterplot-with-axes.html on course website

  20. Preparation for Next Class • Get basic SPLOM and parallel coordinates implementations in D3 working for Iris dataset • To read ahead: Munzner Chapter 9 Arrange Networks and Trees (Visualizing Graph Datasets)

More Related