-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
93 lines (84 loc) · 3.07 KB
/
index.js
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
//tab change page function
function openPage(evt, pageNum){
var i, chart, tablinks;
chart = document.getElementsByClassName("chart");
for (i = 0; i < chart.length; i++){
chart[i].style.display ="none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0;i < tablinks.length; i++){
tablinks[i].className = tablinks[i].className.replace(" active","");
}
document.getElementById(pageNum).style.display = "block";
evt.currentTarget.className += " active";
}
// YearChart
//defind the chart size;
var margin = { top: 50, right: 50, bottom: 50, left: 50 },
width = window.innerWidth - margin.left - margin.right,
height = window.innerWidth - margin.bottom - margin.top,
radius = 5;
//upload data and draw line chart
d3.csv("data.csv",function(d){
return {year:d.year, pos: d.position, sfrom: d.AvgSalaryFrom, sto: d.AvgSalaryTo};
}).then(function(data){
//console.log(data);
//STEP 1. ADD SVG to the page
var svg = d3.select("#yearChart")
.append('svg')
.attr("class","line-chart")
.attr("height",height + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right)
.append("g")
.attr("transform","translate(50,50)");
//STEP 2. CALL x & y AXIS
var xScale = d3.scaleLinear()
.domain([d3.min(data,function(d){return d.year}),d3.max(data,function(d){return d.year})])
.range([0,width]);
var yScale = d3.scaleLinear()
.domain([0,6000])
.range([height,0]);
svg.append("g")
.attr("class","x axis")
.attr("transform","translate(0,"+height+")")
.call(d3.axisBottom(xScale));
svg.append("g")
.attr("class","y axis")
.call(d3.axisLeft(yScale));
//STEP 3: CALL LINE
var line = d3.line()
.x(function(d){return xScale(d.year);})
.y(function(d){return yScale(d.pos);})
.curve(d3.curveMonotoneX);
svg.append("circle").attr("cx",xScale(2018)).attr("cy",yScale(1778)).attr("r",10).attr("fill","red");
svg.append("path")
.datum(data)
.transition().duration(500)
.attr("class","line")
.attr("d",line);
//STEP 4: CIRCLE OUT POINT
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("cx",function(d){return xScale(d.year)})
.attr("cy",function(d){return yScale(d.pos)})
.attr("r",5)
.on("mouseenter",function(d){
var text = ["Year: "+ d.year, " Positions :"+d.pos];
d3.select(this).attr('class','point').attr('r',radius *2)
.transition().duration(1000)
svg.append('text')
.text(text)
.attr("id",text)
.transition().duration(500)
.attr("x",xScale(d.year) - 30)
.attr('y',yScale(d.pos) - 30)
.attr('text-anchor',"middle")
})
.on("mouseout",function(d){
d3.select(this).select("text")
.remove();
});
//STEP 5: MOUSE
}).catch(function(error){console.log(error)});