cmsc498o_d3_pt1_02_14_2019.pdf - CMSC498O\u2028 D3.js \u2013 Part 1 Lecturer Prof Leilani Battle CMSC498O https\/umd.instructure.com\/courses

cmsc498o_d3_pt1_02_14_2019.pdf - CMSC498Ou2028 D3.js...

This preview shows page 1 - 14 out of 60 pages.

CMSC498O: 1257233/assignments/syllabus CMSC498O D3.js – Part 1 Lecturer: Prof. Leilani Battle 2/14/19 1
Image of page 1
CMSC498O: 1257233/assignments/syllabus Announcements A2 is out A2: Implementing Visualizations in D3.js I would not wait until the last minute to start working on it! 2/14/19 2
Image of page 2
CMSC498O: 1257233/assignments/syllabus Recap D3.js Visualization marks encoding channels Data attribute types Most common visualization types Basic usage 2/14/19 3
Image of page 3
CMSC498O: 1257233/assignments/syllabus Today D3.js Visualization marks encoding channels Data attribute types Most common visualization types Basic usage Constructing basic visualizations Bar chart, scatterplot 2/14/19 4
Image of page 4
CMSC498O: 1257233/assignments/syllabus Learning goals With Tuesday and Thursday lecture, we should be able to create key visualization types in D3.js We are learning the “how” of visualization Later we will learn “why” 2/14/19 5
Image of page 5
CMSC498O: 1257233/assignments/syllabus 2/14/19 6
Image of page 6
CMSC498O: 1257233/assignments/syllabus “Installing” D3 You just need to load D3 into your HTML page as an external script: To work offline, you can also download d3 and load a local copy: 2/14/19 7 Load these into your html file instead
Image of page 7
CMSC498O: 1257233/assignments/syllabus How D3.js works At a high level: We bind each tuple to an element in the DOM. 2/14/19 8
Image of page 8
CMSC498O: 1257233/assignments/syllabus D3 select example What does this code do? 2/14/19 9
Image of page 9
CMSC498O: 1257233/assignments/syllabus D3 select example D3 makes searching for specific HTML elements easier: 2/14/19 10 Select all p elements Make the text white using the D3 style function
Image of page 10
CMSC498O: 1257233/assignments/syllabus D3 conventions D3 selector strings are the same as CSS selectors Keeps things simple D3 method (function) calls typically return the last elements operated on/requested. Makes D3 methods easy to chain together 2/14/19 11
Image of page 11
CMSC498O: 1257233/assignments/syllabus Appending new elements within the DOM To append a div element as a child to each p element in the DOM: Selecting the first match in the DOM for the given selector string: Select the first match for body elements Append a table to the selected element 2/14/19 12
Image of page 12
CMSC498O: 1257233/assignments/syllabus Exercise: what is this code doing?
Image of page 13
Image of page 14

You've reached the end of your free preview.

Want to read all 60 pages?

  • Spring '19
  • D3

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture