In CS 205 lecture on Thursday, we saw our first d3.js visualization that was developed with the diversity data set that we’ve been exploring for the past week and a half. At the end of class, I thought an interesting and simple visualization to try was a slope visualization graph. Originally, the goal was for you to finish the visualization. However, as I started playing around with the visualization that you were going to make, I found there were a few tricky things that may have been a real trick to figure out independently right now.
Instead, the work for Tuesday is going to change a little. Below, you will finish a very basic
version of a slope visualization using our diversity data. You can paste this code inside of the
visualize function inside of exp_diversity2\web\viz.js to get this code
working of your workbook.
Your assignment is to improve this visualization. How you choose to do this is entirely up to you. You can add labels, you can filter the data, color the data, or anything else. You must make at least one significant improvement to the visualization, but you should make at least a couple of improvements.
Before class on Tuesday (11:00am), you must add, commit, and push your changes to your git-lab. Find out the full instructions here on the CS 205 Guidebook. If you have any questions, want some guidance on an idea/improvement you have, you should reach out to us via our CS 205 Facebook group. I’ll make sure to check it at least daily (and probably more than once).
// == BOILERPLATE ==
var margin = { top: 50, right: 50, bottom: 50, left: 50 },
width = 970 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;
var svg = d3.select("#chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("width", width + margin.left + margin.right)
.style("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// == SCALES ==
var diversityScale = d3.scale.linear()
.domain( [0.5, 0] ) // 0.5 -> 100% [fe]male, 0.0 -> 50/50%
.range( [height, 0] ) // 0.5 maps to the bottom of the viz (`height`),
// 0.0 maps to the top of the viz (`0`)
;
var yearsScale = d3.scale.ordinal()
.domain( [2005, 2015] )
.range( [0, width] ); // FIX: Was [0, height], which was wrong.
// == VIZUALIZATION SHAPES ==
svg.selectAll("_2005")
.data(data)
.enter()
.append("circle")
.attr("cx", yearsScale(2005))
.attr("cy", function (d, i) { return diversityScale( d["Years"]["2005"]["Diversity"] ); } )
.attr("r", 3)
.attr("fill", "blue");
svg.selectAll("_2015")
.data(data)
.enter()
.append("circle")
.attr("cx", yearsScale(2015))
.attr("cy", function (d, i) { return diversityScale( d["Years"]["2015"]["Diversity"] ); } )
.attr("r", 3)
.attr("fill", "blue");
svg.selectAll("_2005_2015")
.data(data)
.enter()
.append("line")
.attr("x1", yearsScale(2005))
.attr("y1", function (d, i) { return diversityScale( d["Years"]["2005"]["Diversity"] ); } )
.attr("x2", yearsScale(2015))
.attr("y2", function (d, i) { return diversityScale( d["Years"]["2015"]["Diversity"] ); } )
.attr("stroke-width", "1")
.attr("stroke", "black");