1. Parallel Coordinates and Scatter Plots

2. Programming Assignment 2
Redraw bars after sorting data
function mouseDown() {
…. //sorting bardata based on mouse clicking behaviors
d3.selectAll(".bar").remove()
d3.select(".xaxis").remove()
redraw() }
function draw(){
x.domain(bardata.map(function(d) { return d.name; }));
y.domain([0, d3.max(bardata, function(d) { return d.value; })]); .

3. Another Approach More efficient, but less intuitive
function mouseDown() {
…. //sorting bardata based on mouse clicking behaviors
var x0 = x.domain(bardata.map(function(d) { return d.name; }));
d3.selectAll(".bar").attr("x", function(d) { return x0(d.name); });
d3.select(".xaxis").call(xAxis) }

4. Exercise 1 Work on your codes on Programming Assignment 2
Test the result of the more efficient approach
Make sure you get the class names for bars and axis correct.
Adding the following codes after the statement to select all bars and see what will happen
.transition().duration(2000)

5. Circles in D3 Circle is a basic shape Required attributes
cx: the x coordinate of the center
cy: the y coordinate of the center
r: radius
.attr("cx", x)
.attr("cy", y)
.attr("r", r)
Styles:
stroke, stroke-width, fill

6. Exercise 2: Convert the previous bar chart into circles Adding styles
x  cx, y cy
height  r
Adding styles
.style("stroke", "green")
.style("stroke-width", 5)
.style("fill", "red")
Does your sorting function work?
If not, how to fix it?

7. Parallel Coordinates Very useful, but a little bit complicated Steps
Each dimension is an axis (vertical)
Values in each dimension should be appropriately mapped.
Steps
Read data
Prepare for individual dimensions
Their horizontal locations
Their domains (min and max values)
Draw individual polylines
Go through each record
Go through each dimension
Find its value
Get x (based on dimension) and y (based on value) coordinates
Draw an SVG line (a path shape)
Draw dimension lines and labels

8. Exercise 3
Copy the pc.html, pc.js, cars.csv files into your web space from \\up.ist.local\Courses\Spring2017\IST402\InClassExerci sesResources\Week5_ParallelCoordinates
Load the page from my.up.ist.psu.edu
Modify the codes to remove the weight dimension.
How about more dimensions?
Modify the codes to make the graph based on alphabetically ordered dimensions.
Which graph do you like better?

9. Programming Assignment 3
The files to draw a scatter plot can also be found in this folder:
\\up.ist.local\Courses\Spring2017\IST402\InClassExercisesRes ources\Week5_ParallelCoordinates
You need to combine them together
Layout of two graphs in the web page page
Left: parallel coordinates;
Right: for x-y plot
Hint:
Two coordinate systems: each x-axis is scaled to different region
Use the same data set for two graphs
Mouse behaviors
mouseover and mouseout