8 hours (1 full day)
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::
div to create a bar chart. We will go over the code in Guided Practice.<script src="https://d3js.org/d3.v5.min.js"></script>.<script> tag, along with our chart data in an array (Note: Don’t forget to link D3 library prior to your <script> tag):const data = [4, 8, 15, 16, 23, 42];
const width = 500;
// 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';
})
.text(function (d) {
return d;
});data = [4, 8, 15, 16, 23, 42]style it using D3. .style("background-color", "steelblue")
.style("color", "white")
.style("padding", "3px")
.style("margin", "1px")
.style("font", "10px sans-serif")
.style("text-align", "right")background-color style to pass a function instead of a constant value. The function’s first parameter is the data item, and the second is the index.The above all works fine, 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.
<svg></svg> in the body of the webpage (remove the chart div).<script> tag (same as before).d3.select("svg") and builds up the chart using svg methods 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,
margin = 3;
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 + margin) * data.length)
.selectAll('g')
.data(data)
.enter()
.append('g')
.attr('transform', function (d, i) {
return 'translate(0,' + i * (height + margin) + ')';
});
// Create each bar using rect and text elements
g.append('rect')
.attr('fill', function (d, i) {
return colors[i];
})
.attr('width', x)
.attr('height', height);
g.append('text')
.attr('x', 1)
.attr('y', height / 2)
.attr('dy', '.35em')
.style('font', '10px sans-serif')
.attr('fill', 'white')
.text(function (d) {
return d;
});<g>, <rect>, <text>).Let’s flip our SVG chart:
const g = d3
.select('svg')
.attr('height', width)
.attr('width', (height + margin) * data.length)
.selectAll('g')
.data(data)
.enter()
.append('g')
.attr('transform', function (d, i) {
return 'translate(' + i * (height + margin) + ',' + (width - x(d)) + ')';
});
// Create each bar using rect and text elements
g.append('rect')
.attr('fill', function (d, i) {
return colors[i];
})
.attr('height', x)
.attr('width', height);
g.append('text')
.attr('x', 1)
.attr('y', height / 2)
.attr('dy', '.35em')
.style('font', '10px sans-serif')
.attr('fill', 'white')
.text(function (d) {
return d;
});More Practice with SVG & D3.js
.attr("y", ...).An Activity Aimed at Revealing Meaning through Data
Materials section above, but feel free to select others beyond those.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.
Materials section has some resources that might be useful for this.