Data-Visualization-Assignments/lab_2.js at master · Aloma/Data-Visualization-Assignments · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

var data = [];

//define row information
function row(d) {
  return {
    year: +d.year, // convert "Year" column to number
    gender: d.gender,
    winner_ace: +d.winner_ace,
    winner: d.winner,
    winner_country: d.winner_country,
  };
}
//define changeColorOnClick Function
var changeColorOnClick = (function(){
   var currentColor = "#ff0000";

    return function(){
        currentColor = currentColor == "#ff0000" ? "green" : "#ff0000";
        d3.select(this).style("fill", currentColor);
    }
})();

//load csv file
d3.csv("USOpenFinals_2016.csv", row, function(error, csv_data){
    csv_data.forEach(function (d) {
        data.push({ year: d.year, gender: d.gender, winner_ace: d.winner_ace, winner: d.winner, winner_country: d.winner_country });
    });


    var yscale = d3.scale.linear()
                    .domain([0, 15])
                    .range([350, 0]),
                yAxis = d3.svg.axis()
                    .orient('left')
                    .scale(yscale);
    var scale_year = d3.scale.linear()
                    .domain([2006, 2016])
                    .range([0, 600]);
                xAxis = d3.svg.axis()
                    .orient('bottom')
                    .scale(scale_year);

    var data_svg = d3.select("body")
    .append("svg")
        .attr("width", 1000)
        .attr("height", 1000);

    var data_g = data_svg.selectAll("circle")
        .data(data)
        .enter()
        .append("g")
        .filter(function(d) { return d.gender =="w"; });
    var data_circles = data_g.append("circle")
        .attr("cx", function(d) {
            return 50 + scale_year(d.year);
        })
        .attr("cy", function(d) {
            return yscale(d.winner_ace) ;
            //return yscale(d.winner_ace);
        })
        .attr("r", 20)
        .attr("fill", "#ff0000")
        .on("click",changeColorOnClick);

    var data_text = data_g.append("text")
        .text(function(d){return d.winner;})
        .attr("x", function(d) {
            return 50 + scale_year(d.year);
        })
        .attr("y", function(d) {
            return yscale(d.winner_ace) ;
            //return yscale(d.winner_ace);
        })
        .on("mouseover", function(d) {
            d3.select(this).text(function(d) { return d.winner_country;})
        })
        .on("mouseout", function(d){
            d3.select(this).text(function(d) { return d.winner;})
        })


    //draw the axes
    data_g.append('g')
          .attr('transform', 'translate(' + 30 + ',' + 0 + ')')
          .attr('class', 'y axis')
          .call(yAxis)
    data_g.append('g')
          .attr('transform', 'translate(' + 30 + ',' + 350 + ')')
          .attr('class', 'x axis')
          .call(xAxis)


});