-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (130 loc) · 6.55 KB
/
index.html
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<h1>Greenidge Power Plant Noise </h1>
<h3><i>INFO 4260, Prof Steven Jackson</i></h3>
<h3>Carleigh Roche, Estelle Hooper, Hal Reed, Sarah Langleben</h3>
<div id="bitcoin activity">
<p width="600">Measure of Bitcoin Activity (2018-2022)</p>
<svg width="600", height="600"></svg>
<script>
// request data
const requestData = async () => {
let bitcoinActivity = await d3.csv("btc-daily.csv");
console.log(bitcoinActivity);
// set up svg area
let svg = d3.select("svg");
let width = svg.attr("width");
let height = svg.attr("height");
// x scale (date)
const dates = [];
bitcoinActivity.forEach( d => {
var date = new Date(d['date']);
dates.push(date);
});
const xExtent = d3.extent(bitcoinActivity, d=> new Date(d.date));
console.log(xExtent);
let xScale = d3.scaleTime()
.domain(xExtent) //from data
.range([0, width-10])
// y scale (volume of tokens exchanged)
const yExtent = d3.extent(bitcoinActivity, d => d['volume-btc']);
console.log(yExtent) // y extent not working...figure this out
let yScale = d3.scaleLinear()
.domain([0, 50000])
.range([10, height-50]);
// create axes
let leftAxis = d3.axisLeft(yScale).tickFormat(d3.format(.0));
let leftGridlines = d3.axisLeft(yScale)
.tickSize(-width - 10)
.tickFormat('');
let bottomAxis = d3.axisBottom(xScale);
// line generator (to be used in path)
var lineGen = d3.line()
.x(d => xScale(new Date(d['date'])))
.y(d => yScale(d['volume-btc']))
.curve(d3.curveNatural);
svg.append('g').call(bottomAxis).attr("class", "xaxis")
.attr("transform",`translate(0, 580)`);
svg.append('path')
.datum(bitcoinActivity)
.attr('class', 'line')
.attr('fill', 'none')
.attr('stroke', '#47c765')
.attr('stroke-width', 1)
.attr('d', lineGen);
// add data points
svg.selectAll('circle').data(bitcoinActivity).join('circle')
.attr("cx", d=> xScale(Date.parse(d['date'])))
.attr("cy", d => yScale(d['volume-btc']))
.attr('r', 1)
.style('fill', '#47c765');
// adding mouseover functionality -- IN PROGRESS
let mouseGroup = svg.append('g');
let xMarker = mouseGroup.append('line')
.attr('id', 'xMarker')
.attr('fill', 'none')
.attr('stroke', 'gray')
.attr('stroke-width', 2)
.attr('y1', 0)
.attr('y2', height)
.attr('visibility', 'hidden');
let valueMarker = mouseGroup.append('circle')
.attr('id', 'valueMarker')
.attr('fill', 'gray')
.attr('stroke-width', 1)
.attr('r', 1)
.attr('visibility', 'hidden');
let label = mouseGroup.append('text')
.attr('id', 'label')
.attr('visibility', 'hidden');
let activeRegion = mouseGroup.append('rect')
.attr('id', 'activeRegion')
.attr('width', width)
.attr('height', height)
.attr('fill', 'none')
.attr('pointer-events', 'all');
activeRegion.on('mouseover', function() {
xMarker.attr('visibility', 'visible');
valueMarker.attr('visibility', 'visible');
label.attr('visibility', 'visible');
});
activeRegion.on('mouseout', function() {
xMarker.attr('visibility', 'hidden');
valueMarker.attr('visibility', 'hidden');
label.attr('visibility', 'hidden');
});
// get value Marker to point to point on the graph
let findDate = d3.bisector( d => d.date ).right; // THIS IS THE PROBLEM WITH MOUSEOVER
// index returns 0 every
activeRegion.on('mousemove', function(evt){
let location = d3.pointer(evt);
let x = location[0];
let xDate = new Date(xScale.invert(x));
//console.log(xDate);
let index = findDate(bitcoinActivity, xDate);
console.log(index);
let d = bitcoinActivity[index];
//console.log(d);
let xPos = xScale(new Date(d['date']));
let yPos = yScale(d['volume-btc']);
//console.log(d);
valueMarker.attr('cx', xPos).attr('cy', yPos);
xMarker.attr('x1', xPos).attr('x2', xPos);
let txt = d['volume-usd'];
label.text(txt)
.attr('x', width-30)
.attr('y', height - 30);
});
};
requestData();
</script>
</div>
<div id="bubble graph">
</div>
</body>
</html>