Download presentation
Presentation is loading. Please wait.
1
Lab 04: Interactive Visualization W/ d3
February 27, 2017 SDS 235 Visual Analytics
2
Announcements A1 feedback will come out tonight (sorry for the delay)
A2 is out, due Wednesday Some minor schedule rearrangements coming up Congrats to the participants in
3
Lingering question “I’m not sure I quite understand the difference between HTML, CSS, and JavaScript…” non-visual mapping stuff that is going to stay the same (text on the page, libraries, etc.) visual mapping stuff that is going to stay the same (fonts, bg colors, etc.) stuff that is going to change (assigning variables, defining objects, etc.)
4
Mini-activity: what is it, where does it go?
A header tag Color all rect objects blue Set the value of a variable Instructions to load the d3.js library Select all rect objects on the page <h1>Jordan’s Example</h1> rect {fill: blue;} var x = 100; <script src="d3.v4.min.js"> </script> d3.selectAll(“rect”)
5
Outline Mini-activity: HTML vs CSS vs JavaScript
Recap – Building a Bar Chart with D3 Next step: make it interactive Discussion
6
Flashback What were the three approaches we used to make a bar chart in the last lab? Manual <div> Manual <svg> Build <svg> using JS can be driven using data
7
Let’s start with a dataset
var dataset = [{key: 0, value: 5}, {key: 1, value: 10}, {key: 2, value: 13}, {key: 3, value: 19}, {key: 4, value: 21}, {key: 5, value: 25}];
8
Set up the page (JSfiddle does this for us)
<!DOCTYPE HTML> <html> <head> <script src=" </head> <body> </body> </html> Going to use d3.v3 for this example
9
Set up the <svg> container
// Set width and height var w = 600; var h = 250; // Make SVG, set height and width attributes var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h);
10
Define the x scale // Making an ordered bar chart: // ordinal scale for thex axis var xScale = d3.scale.ordinal() .domain(d3.range(dataset.length)) .rangeRoundBands([0, w], 0.05); var dataset = [{key: 0, value: 5}, {key: 1, value: 10}, {key: 2, value: 13}, {key: 3, value: 19}, {key: 4, value: 21}, {key: 5, value: 25}];
11
Define the y scale var yScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d.value; })]) .range([0, h]); var dataset = [{key: 0, value: 5}, {key: 1, value: 10}, {key: 2, value: 13}, {key: 3, value: 19}, {key: 4, value: 21}, {key: 5, value: 25}];
![Define the y scale var yScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d.value; })]) .range([0, h]);](http://slideplayer.com./slide/14438016/90/images/11/Define+the+y+scale+var+yScale+%3D+d3.scale.linear%28%29+.domain%28%5B0%2C+d3.max%28dataset%2C+function%28d%29+%7B+return+d.value%3B+%7D%29%5D%29+.range%28%5B0%2C+h%5D%29%3B.jpg "var dataset = [{key: 0, value: 5}, {key: 1, value: 10}, {key: 2, value: 13}, {key: 3, value: 19}, {key: 4, value: 21}, {key: 5, value: 25}];")
12
Bind dataset to <rect>
svg.selectAll("rect") .data(dataset) var dataset = [{key: 0, value: 5}, {key: 1, value: 10}, {key: 2, value: 13}, {key: 3, value: 19}, {key: 4, value: 21}, {key: 5, value: 25}];
13
Create the <rect> objects
svg.selectAll("rect") .data(dataset) .enter() .append("rect") var dataset = [{key: 0, value: 5}, {key: 1, value: 10}, {key: 2, value: 13}, {key: 3, value: 19}, {key: 4, value: 21}, {key: 5, value: 25}];
14
Set x attribute for the <rect> objects
svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return xScale(i); }) var dataset = [{key: 0, value: 5}, {key: 1, value: 10}, {key: 2, value: 13}, {key: 3, value: 19}, {key: 4, value: 21}, {key: 5, value: 25}];
15
Set y attribute for the <rect> objects
svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return xScale(i); }) .attr(”y", function(d, i) { return h - yScale(d.value); var dataset = [{key: 0, value: 5}, {key: 1, value: 10}, {key: 2, value: 13}, {key: 3, value: 19}, {key: 4, value: 21}, {key: 5, value: 25}];
16
Set width attribute for the <rect> objects
svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return xScale(i); }) .attr(”y", function(d, i) { return h - yScale(d.value); .attr("width", xScale.rangeBand())
17
Set height attribute for the <rect> objects
svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return xScale(i); }) .attr(”y", function(d, i) { return h - yScale(d.value); .attr("width", xScale.rangeBand()) .attr("height", function(d) { return yScale(d.value);
18
Set height attribute for the <rect> objects
svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return xScale(i); }) .attr(”y", function(d, i) { return h - yScale(d.value); .attr("width", xScale.rangeBand()) .attr("height", function(d) { return yScale(d.value);
19
Turn all the <rect> objects blue
rect { fill: blue; }
20
Change color when we mouse over
svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return xScale(i); }) .attr(”y", function(d, i) { return h - yScale(d.value); .attr("width", xScale.rangeBand()) .attr("height", function(d) { return yScale(d.value); }) .on('mouseover', function() { d3.select(this) .style('fill', 'orange'); });
21
Change color back when we mouse out
.attr(”y", function(d, i) { return h - yScale(d.value); }) .attr("width", xScale.rangeBand()) .attr("height", function(d) { return yScale(d.value); }) .on('mouseover', function() { d3.select(this) .style('fill', 'orange'); .on('mouseout', function(d) { d3.select(this) .transition() .duration(250) .style("fill", "blue"); });
22
Lab 4: interactive charts
Go back and finish up Lab 3 Make your bar chart respond to mouse movement Find a new dataset, make a different visualization (can use this as your submission for Assignment 2)
23
Discussion What are some of D3’s strengths? Weaknesses?
How does it compare to Tableau?
Similar presentations
