introduction to d3
play

Introduction to D3 Ma Maneesh Agrawala CS 448B: Visualization - PDF document

Jul 27, 2023 •112 likes •335 views

Introduction to D3 Ma Maneesh Agrawala CS 448B: Visualization Fall 2020 1 D3 Notebooks 2 1 Last Time: Interaction 3 Dynamic Queries 6 2 Query and results SELECT house FROM east bay WHERE price < 1,000,000 AND bedrooms > 2

  1. Introduction to D3 Ma Maneesh Agrawala CS 448B: Visualization Fall 2020 1 D3 Notebooks 2 1

  2. Last Time: Interaction 3 Dynamic Queries 6 2

  3. Query and results SELECT house FROM east bay WHERE price < 1,000,000 AND bedrooms > 2 ORDER BY price 7 HomeFinder [Ahlberg and Schneiderman 92] 9 3

  4. Zipdecode [from Fry 04] https://benfry.com/zipdecode/ 17 NameVoyager http://www.babynamewizard.com/voyager 18 4

  5. DimpVis [Kondo 14] 19 Parallel Coordinates [Inselberg] 20 5

  6. TimeSearcher [Hochheiser & Schneiderman 02] Based on Wattenberg ’ s [2001] idea for sketch-based queries of time-series data. 21 3D dynamic queries [Akers et al. 04] 22 6

  7. 3D dynamic queries [Akers et al. 04] 23 Pros and cons Pros I Controls useful for both novices and experts I Quick way to explore data Cons I Simple queries I Lots of controls I Amount of data shown limited by screen space 24 7

  8. Summary Most visualizations are interactive I Note that even passive media elicit interactions Good visualizations are task dependent I Pick the right interaction technique Fundamental interaction techniques I Selection, Brushing & Linking, Dynamic Queries 25 Announcements 26 8

  9. A2: Exploratory Data Analysis Use Tableau to formulate & answer questions First steps Step 1: Pick domain & data Step 2: Pose questions Step 3: Profile data Iterate as needed Create visualizations Interact with data Refine questions Author a report Screenshots of most insightful views (10+) Include titles and captions for each view Due before class on Oct 6, 2020 27 Assignment 3: Dynamic Queries Create a small interactive dynamic query application similar to TimeSearcher, but for top 100 personalities on Cable TV News. Implement timeboxes 1. interface Submit the application 2. and a short write-up on canvas Can work alone or in pairs Due before class on Oct 20, 2020 28 9

  10. 29 Introduction to D3 30 10

  11. What is D3? D3: “Data-Driven Documents” Data visualization built on top of HTML, CSS, JavaScript, and SVG Pros: Highly-customizable Developing and debugging tools Documentation, resources, community Integrates with the web! Cons: Very “low-level” 31 hello-world.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> Hello, world! </body> </html> 32 11

  12. hello-world.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> Hello, world! </body> </html> 33 hello-svg.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> /* CSS */ </style> </head> <body> <svg width="960" height="500"> <circle cx='120' cy='150' r='60' style='fill: gold;'> <animate attributeName='r' from='2' to='80' begin='0' dur='3' repeatCount='indefinite' /> </circle> </svg> </body> </html> 36 12

  13. hello-svg.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> /* CSS */ </style> </head> <body> <svg width="960" height="500"> <circle cx='120' cy='150' r='60' style='fill: gold;'> <animate attributeName='r' from='2' to='80' begin='0' dur='3' repeatCount='indefinite' /> </circle> </svg> </body> </html> 37 hello-javascript.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> /* CSS */ </style> </head> <body> Hello, world! <script> console.log(“Hello, world!”); function add2(x) { return x + 2; } console.log("2 + 2 is " + add2(2)); </script> </body> </html> 38 13

  14. hello-javascript.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> /* CSS */ </style> </head> <body> Hello, world! <script> ... console.log(“Hello, world!”); function add2(x) { return x + 2; } console.log("2 + 2 is " + add2(2)); </script> </body> </html> 39 hello-d3.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> /* CSS */ </style> </head> <body> <script src="https://d3js.org/d3.v6.min.js"></script> <script> // JavaScript code that handles the logic of adding SVG elements // that make up the visual building blocks of your data visualization </script> </body> </html> 40 14

  15. DOM: Document Object Model <html> <head> <title></title> </head> <body> <h1></h1> <div> <p></p> </div> </body> </html> [Adapted from Victoria Kirst’s cs193x slides. ] 41 DOM: Document Object Model <html> <head> html <title></title> </head> head body <body> <h1></h1> <div> title h1 div <p></p> </div> p </body> </html> [Adapted from Victoria Kirst’s cs193x slides. ] 42 15

  16. DOM: Document Object Model <html> <head> html <title></title> </head> head body <body> <h1></h1> <div> title h1 div <svg></svg> </div> svg </body> </html> [Adapted from Victoria Kirst’s cs193x slides. ] 43 D3: Selection <html> … <svg width="960" height="500"> <circle cx="10" cy="10" r="5"></circle> <circle cx="20" cy="15" r="5"></circle> </svg> 44 16

  17. D3: Selection <html> <script> … <svg width="960" height="500"> // select all SVG circle <circle cx="10" cy="10" r="5"></circle> elements <circle cx="20" cy="15" r="5"></circle> </svg> var circles = d3.selectAll("circle"); </script> 45 D3: Selection & Manipulation <html> <script> … <svg width="960" height="500"> // select all SVG circle <circle cx="10" cy="10" r="5"></circle> elements <circle cx="20" cy="15" r="5"></circle> </svg> var circles = d3.selectAll("circle"); // set attributes and styles circles.attr("cx", 40); circles.attr("cy", 50); circles.attr("r", 24); circles.style("fill", "red"); </script> 46 17

  18. D3: Selection & Manipulation <html> <script> … <svg width="960" height="500"> // select all SVG circle <circle cx="10" cy="10" r="5"></circle> elements <circle cx="20" cy="15" r="5"></circle> </svg> var circles = d3.selectAll("circle"); // set attributes and styles circles.attr("cx", 40); circles.attr("cy", 50); circles.attr("r", 24); circles.style("fill", "red"); </script> 47 D3: Selection & Manipulation <html> <script> … <svg width="960" height="500"> // select all SVG circle <circle cx="10" cy="10" r="5"></circle> elements <circle cx="20" cy="15" r="5"></circle> </svg> var circles = d3.select("circle"); // set attributes and styles circles.attr("cx", 40); circles.attr("cy", 50); circles.attr("r", 24); circles.style("fill", "red"); </script> 49 18

  19. D3: Selection & Manipulation <html> <script> … <svg width="960" height="500"> // all together!! <circle cx="10" cy="10" r="5"></circle> d3.select("circle") <circle cx="20" cy="15" r="5"></circle> .attr("cx", 40) </svg> .attr("cy", 50) .attr("r", 24) .style("fill", "red"); </script> 50 Binding Data & Joining DOM Elements 51 19

  20. Binding Data & Joining DOM Elements A join creates three sub-selections: Enter : selection containing placeholders for every data value that did • not have a corresponding DOM element in the original selection Update : selection containing existing DOM elements that match a • bound data value Exit : selection that also contains existing DOM elements, but for which • a matching data value was not found 53 Binding Data & Joining DOM Elements 54 20

  21. Let’s make a scatterplot 😹 🐷 https://observablehq.com/@stanfordvis/lets-make-a-scatterplot 55 21

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

Recommend

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

TRAINING COURSE ON SOCIAL PROTECTION &amp; FORMALIZATION TRINIDAD AND TOBAGO MARCH 15, 2017 INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION Design of the NIS Assistance from the

547 views • 23 slides
INTRODUCTION Introduction 2/42 INTRODUCTION Alternations I am giving bread to the

INTRODUCTION Introduction 2/42 INTRODUCTION Alternations I am giving bread to the

Patterns of variation in the expression of case and agreement Andrs Brny Leiden University Centre for Linguistics 9 November 2019, BaSIS Workshop a.barany@hum.leidenuniv.nl INTRODUCTION Introduction 2/42 INTRODUCTION

1.37k views • 42 slides
Introduction Introduction Introduction Introduction Outline Motivation Failures

Introduction Introduction Introduction Introduction Outline Motivation Failures

Introduction Introduction Introduction Introduction Outline Motivation Failures Definition and concepts Process and product properties Principles SE Approaches Motivation Software and the economy The economies of

1.03k views • 49 slides
Introduction Introduction Introduction Nationwide Cause for Concern 1

Introduction Introduction Introduction Nationwide Cause for Concern 1

Introduction Introduction Introduction Nationwide Cause for Concern 1 https://www.cdc.gov/std/stats17/infographic.htm Introduction Epidemiology in Western Colorado CPHE Surveillance Data Report, May 2018 Chlamydia Epidemiology in Western

977 views • 39 slides
DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every

DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every

DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every meeting (2) Some ideas of diagrams for section 7.1 (Introduction) of TP. Giles Barr 25 Jan 2018, Pembroke College On DUNE, the reality is there is a

474 views • 10 slides
INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT

INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT

ADVANCED COMPUTER SECURITY INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT IS SECURITY? A systems security policies describe What the system is supposed to do Store and provide access

479 views • 16 slides
Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL

Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL

Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL Writing a SMIL file Adding Media Objects Martin Halvey Clipping media files January 2008 Timing and Synchronising Layout World Wide

387 views • 14 slides
14 Introduction Introduction Bad guys can put malware into Example: hosts

14 Introduction Introduction Bad guys can put malware into Example: hosts

Introduction Introduction source Encapsulation ISO/OSI reference model message M application segment H t H t M transport network datagram H n H n H t M presentation: allow applications to frame link H l H n H t M interpret

583 views • 4 slides
Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL

Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL

Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL Writing a SMIL file Adding Media Objects Martin Halvey Clipping media files January 2008 Timing and Synchronising Layout

322 views • 8 slides
Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL

Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL

Introduction Zynq Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL Processing System Processor Peripherals Data Buses AXI Bus Conclusion BTE5380 - Embedded Systems Octobre 2014 Andreas Habegger

1.81k views • 30 slides
2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04

2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04

2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04 Project References S E 5 PART.1 SMILE5 Introduction M I L Introduction STORION-SMILE5 Residential Energy Storage System Inverter 5kW Output Input

1.06k views • 25 slides
Introduction to CICS Course introduction Course introduction What is CICS? What is an

Introduction to CICS Course introduction Course introduction What is CICS? What is an

Introduction to CICS Course introduction Course introduction What is CICS? What is an application server? Why use an application server? Course introduction Services provided by CICS How CICS applications are defined Scaling CICS to meet

1.84k views • 146 slides
Network Visualization Introduction Presented by Shahed Introduction Introduction Basic

Network Visualization Introduction Presented by Shahed Introduction Introduction Basic

Network Visualization Introduction Presented by Shahed Introduction Introduction Basic building blocks Node Links (relationship between nodes) Spatial information Network data

584 views • 9 slides
Introduction Introduction (1) Main argument of the paper: universities are not only

Introduction Introduction (1) Main argument of the paper: universities are not only

Le jugement des pairs comme outil de management des universits Peer-review as a management tool Christine Musselin (CSO, Sciences Po et CNRS) Avril 2013, Lirrsistible ascension du capitalisme acadmique Introduction Introduction (1)

590 views • 28 slides
Introduction Introduction to storage and to storage and filesystems filesystems Introduction

Introduction Introduction to storage and to storage and filesystems filesystems Introduction

Moreno Baricevic Gilberto Daz Axel Kohlmeyer Stefano Cozzini ULA ICTP CNR-IOM DEMOCRITOS Merida, VENEZUELA Trieste, ITALY Trieste, ITALY Introduction Introduction to storage and to storage and filesystems filesystems Introduction

1.19k views • 51 slides
JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of

JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of

JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of the brand new JA-100 alarm system Visions Basic architecture System components Setting Help us with final validations You are the FIRST ones

1.69k views • 111 slides
D3 Exercises Slides adapted from... Maneesh Agrawala Jessica Hullman Ludwig Schubert Peter

D3 Exercises Slides adapted from... Maneesh Agrawala Jessica Hullman Ludwig Schubert Peter

D3 Exercises Slides adapted from... Maneesh Agrawala Jessica Hullman Ludwig Schubert Peter Washington Alec Glassford and Zach Maurer Gracie Young and Vera Lin I. Run a local server Create a file named index.html with the text Hello,

363 views • 17 slides
Equations of Circles MPM2D: Principles of Mathematics Recap Determine the equation and length of

Equations of Circles MPM2D: Principles of Mathematics Recap Determine the equation and length of

a n a l y t i c g e o m e t r y a n a l y t i c g e o m e t r y Equations of Circles MPM2D: Principles of Mathematics Recap Determine the equation and length of the radius of a circle, centred at the origin, that passes through the point P (9 ,

42 views • 3 slides
Circles in the sand Lionel Levine (Cornell University) Wesley Pegden (Carnegie Mellon) Charles

Circles in the sand Lionel Levine (Cornell University) Wesley Pegden (Carnegie Mellon) Charles

Circles in the sand Lionel Levine (Cornell University) Wesley Pegden (Carnegie Mellon) Charles Smart (Cornell University) Harvard, April 15, 2015 The Abelian Sandpile (BTW 1987, Dhar 1990) Start with a pile of n chips at the origin in Z d .

990 views • 97 slides
Competency-Based Learning Next Steps in RUSDs Transition May 9-10, 2017 TODAYS PRESENTERS

Competency-Based Learning Next Steps in RUSDs Transition May 9-10, 2017 TODAYS PRESENTERS

Competency-Based Learning Next Steps in RUSDs Transition May 9-10, 2017 TODAYS PRESENTERS From Great Schools Partnership Jon Ingram, Senior Associate Andi Weisman Summers, Senior Associate Moises Nuez, Senior Associate Warm Up

901 views • 72 slides
On generalized Clifford configurations: geometry and integrability by W.K. Schief Technische

On generalized Clifford configurations: geometry and integrability by W.K. Schief Technische

On generalized Clifford configurations: geometry and integrability by W.K. Schief Technische Universit at Berlin ARC Centre of Excellence for Mathematics and Statistics of Complex Systems, Australia (with B.G. Konopelchenko, Proc. R. Soc

400 views • 27 slides
14: Clique Finding Machine Learning and Real-world Data (MLRD) Ryan Cotterell (based on slides

14: Clique Finding Machine Learning and Real-world Data (MLRD) Ryan Cotterell (based on slides

14: Clique Finding Machine Learning and Real-world Data (MLRD) Ryan Cotterell (based on slides created by Simone Teufel) Lent 2020 Last session: betweenness centrality You implemented betweenness centrality. This let you find gatekeeper

409 views • 14 slides
CS 4495 Computer Vision Finding 2D Shapes and the Hough Transform Aaron Bobick School of

CS 4495 Computer Vision Finding 2D Shapes and the Hough Transform Aaron Bobick School of

Hough Transform CS 4495 Computer Vision A. Bobick CS 4495 Computer Vision Finding 2D Shapes and the Hough Transform Aaron Bobick School of Interactive Computing Hough Transform CS 4495 Computer Vision A. Bobick Administrivia

736 views • 48 slides
Compositional Certification for MILS John Rushby Computer Science Laboratory SRI International

Compositional Certification for MILS John Rushby Computer Science Laboratory SRI International

Compositional Certification for MILS John Rushby Computer Science Laboratory SRI International Menlo Park CA USA John Rushby, SR I Compositional Cert for MILS: 1 Intuitive Security Architecture Almost all system designs are portrayed in

548 views • 28 slides

More recommend