8 hours (1 full day)
- HTML
- CSS
- UI/UX
- JavaScript
- jQuery (especially on method chaining)
- Functional Programming
Data visualization's benefits are numerous. It can provide new insights by simplifying complex data, revealing new patterns, and generally making data easier and more interesting for the everyday user. Charts and graphs are powerfully enriching analytic tools for business.
Just as there are many different ways to visualize a single set of data, there are also a number of great open-source libraries to leverage. D3.js is covered more extensively in the slides and presentation; a few other ones to explore are chart.js, processing.js, pygal (python), and ember-charts (built with Ember.js and d3.js). For JavaScript libraries choices, D3 is the most known and popular choice due to its power and flexibility; and we will use it to create data visualization (charts, graphs) in the guided activity and independent practice here.
Companies like Fidelity and Strava use charts and graphs to monitor financial, medical, and geographical data for the user. The products of Datadog, Carto, and Plot.ly revolve around data visualizations for site dashboards.
Participants will be able to::
- Become more familiar with publically available data sets
- Gain some experience determining how to select data to visualize
- Learn about several common tools and open-source libraries for visualization
- Utilize one (or several) tools to display data in a compelling and meaningful way
- Use D3 methods in JavaScript to create DOM elements
- Learn about SVG and its elements
- How to search for, select, and use a publically available data set
- Different ways to visualize data and their best/typical use cases
- How to link to D3 from a CDN within your HTML?
- How does the D3 library work to manipulate DOM?
- What are SVG (Scalable Vector Graphics) elements?
- Read through lesson slides Data Visualization
- Familiarize with D3 methods in updating DOM using method chaining
- Check out Let's Make a Bar Chart. It uses familiar HTML elements like
divto create a bar chart. We will go over the code in Guided Practice.
- Link D3 library JavaScript file in your HTML
<script src="https://d3js.org/d3.v4.min.js"></script> - We are using version 4 which has some changes in common D3 method implementations, e.g. d3.scale.linear -> d3.scaleLinear.
- Check out v4 implementation for more details.
- The same set of data can convey very different meanings depending on how it's displayed (w/r/t granularity, dimensionality, type, detail).
- Create a div with 'chart' class,
<div class="chart"></div>, in the body of the webpage - Now we will append other divs inside the "chart" div using D3
- Add D3 in
<script>tag, along with some dummy data (Note: Don't forget to link D3 library prior to your<script>tag):
const data = [4, 8, 15, 16, 23, 42];
// define colors for each bar
const colors = ["violet", "lightblue", "limegreen", "yellow", "orange", "red"];
// max dimensions for each bar
const width = 500,
height = 16;
// D3's linear scaling method to convert data into chart width proportion
const x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, width]);
// D3 creating div elements using selection
// We feed in the data, dimensions and style using D3's methods
d3.select(".chart")
.selectAll("div")
// data() method takes a data set and passes 'd' when chaining methods together
.data(data)
// enter() method matches the data being handed with the DOM elements by creating new elements
.enter().append("div")
.style("width", function(d) { return x(d) + "px"; })
.style("height", height + "px")
.style("background-color", function(d) { return colors[data.indexOf(d)]; })
.text(function(d) { return d; });- Open up your HTML file in a web browser and see what happens!
- The script above should render a horizontal bar chart that represents the values in
data = [4, 8, 15, 16, 23, 42] - This works but div elements are limited in their shape and positioning in the DOM
Now that we have done this once in a div, we're going to look at doing it another way. We will use another element called SVG (Scalable Vector Graphics) introduced in HTML5 which is created for drawing paths, boxes, circles, text, and graphic images. Today, we won't be learning the ins and outs of vector graphics--all we need is to learn what SVG stands for and learn enough d3 methods that manipulate SVGs to make a graph appear on your webpage.
- Create an SVG tag
<svg></svg>in the body of the webpage - Add D3 in your
<script>tag (same as before) - Replace all of the JavaScript with this code block below. It contains the same dummy data as the code block from above, but uses
d3.select("svg")and builds up the chart usingsvgmethods this time.
// From above
const data = [4, 8, 15, 16, 23, 42];
const colors = ["violet", "lightblue", "limegreen", "yellow", "orange", "red"];
const width = 500,
height = 16;
const x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, width]);
// Create SVG element
// We will group each rect and corresponding text in a group (g)
const g = d3.select("svg")
.attr("width", width)
.attr("height", height * data.length)
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * height + ")"; });
// Create each bar using rect and text elements
g.append("rect")
.attr("fill", function(d) { return colors[data.indexOf(d)]; })
.attr("width", x)
.attr("height", height);
g.append("text")
.attr("x", 0)
.attr("y", height / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });- Check it out in your browser again.
- You should see an identical chart but this time we used SVG elements (
<g>, <rect>, <text>) - Why should we use SVG instead of div? Because SVG elements are made for drawing graphics and easier to manipulate on a grid
Let's make some minor changes to the SVG chart:
- For e.g. in order to change our bar chart from horizontal to a vertical layout, we only need to tweak a few attributes using SVG (flip width and height). Change the bottom part of the code block to:
const g = d3.select("svg")
.attr("height", width)
.attr("width", height * data.length)
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(" + i * height + ", " + (width - x(d)) + ")"; });
g.append("rect")
.attr("fill", function(d) { return colors[data.indexOf(d)]; })
.attr("height", x)
.attr("width", height);
g.append("text")
.attr("x", 0)
.attr("y", height / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });More Practice with SVG & D3.js
- The text label for each bar in the vertical chart appears on top. Try to place them at the bottom of each bar by manipulating 'y' attribute in text element
.attr("y", ...). - Create a pie chart using pie SVG element using our dataset. You can use this example to understand how D3's arc() method works.
An Activity Aimed at Revealing Meaning through Data
- Select a data set that interests you!
- There are a few suggested publically available sets linked in the
Materialssection above, but feel free to select others beyond those. - Questions to consider: Why did you select that set? (looks interesting? seems generally complete? has many dimensions? etc.)
-
Review the dataset you selected. Consider questions you might want to answer through it, and determine what columns/subsets of the set you would need to use in order to gain insights into those questions.
-
Determine what visualization(s) would be most meaningful to answer your question using your data.
- The
Materialssection has some resources that might be useful for this.
- Select an open-source tool to create one or two meaningful charts/graphs. Embed your visualization(s) on a webpage.
- Focus both on learning the tools and thinking through what you want to present and show through the data. If the chart/graph type you selected does not work, it's totally ok to go back to step 3 (or any of the above steps).
- D3.js was covered in the lecture and may be a good choice for this.
- Chart.js is another very accessible option.
- Present to the cohort or a peer and discuss the process you went through to create meaning and stories through data!
- Discuss how one would go about updating the DOM and utilizing D3.js. What are the general steps to set up a new D3.js visualization?
- What factors do you consider when selecting a data set?
- What do you consider when determining how to display data in a compelling way?