Parallel Coordinates and Scatter Plots

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; })]); .

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) }

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)

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

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?

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

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?

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