D3 Flashcards
Creating a selection
You can create a selection with .selectAll() or a single-item selection with .select()
The .attr() and .style() methods allow you to customize the appearance of each element based on data.
The .on() method can bind an event listener on the elements in the selection.
What do data, enter and append do?
The .data(), .enter() and .append() methods all work in unison to create elements and associate their corresponding data with the existing DOM
data(somedata) - contains the data
enter() - calculates the amount of DOM elements that needs to be created in order to append data items
append(“element”) - creates and appends the DOM elements calculated by enter().
The d parameter inside functions used in a D3 context represents the datum associated with the element at hand. The i paramenter is an incremter or index variable for array data structures.
What are composition charts?
Composition charts
Focusing Question: What are the parts of some whole? What is the data made of?
Datasets that work well: Data pertaining to probabilities, proportions, and percentages can be visualized as with the graphs in this composition category. Charts in this category illustrate the different data components and their percentages as part of a whole.
What are Distribution Charts?
Datasets that work well: Data in large quantities and/or with an array of attributes works well for these types of charts. Visualizations in this category will allow you to see patterns, re-occurrences, and a clustering of data points.
Note: In statistics, a commonly seen distribution is a bell curve, also known as a normal distribution. A bell curve is a bell-shaped distribution where most of the values in the dataset crowd around the average (also known as the mean), therefore causing the curve to form. If you want to see how values in the data are “distributed” across variables, the best way to do that would be with the visualizations in this category.
What are Relationship Charts
Focusing Question: How do variables relate to each other?
Datasets that work well: Data with two or more variables can be displayed in these charts. These charts typically illustrate a correlation between two or more variables. You can communicate this relationship by mapping multiple variables in the same chart. Correlation measures the strength of a relationship between variables.
What are Comparison Charts?
Focusing Question: How do variables compare to each other?
Datasets that work well: Data must have multiple variables, and the visualizations in this category allow readers to compare those items against the others. For example, a line graph that has multiple lines, each belonging to a different variable. Multi-colored bar charts are also a great way to compare items in data.
what are the 4 main types of visualization charts?
Comparison, Composition, Distribution, and Relationship charts
What is data visualization?
Portraying abstract information in a visual form
What are the 3 main functions of data visualization?
- to find an unknown, or identify a problem -Exploring data
- to test a hypothesis - analyze data
- to tell a story -presenting data
What does D3 stand for?
Data Driven Documents
Linear scales
var y = d3.scaleLinear().domain([0,828]).range([0,400]);
y(100) //48.3
y.invert(48.3) //100
What are the most common scales used in D3
linear scale, time scale, ordinal scale, logarithm scale,
Tufte’s 4 principles of design
- Graphical integrity
- The lie factor
- Chart Junk
- Data-to-ink ration
Tufte’s 4 principles of design
- Graphical integrity
- The lie factor
- Chart Junk
- Data-to-ink ratio
When might Tufte’s principles not apply
When the goal is to grab the user’s attention and to encourage further exploration, by creating interesting visualizaitons
