-
Notifications
You must be signed in to change notification settings - Fork 1
/
barChartTutor.html
83 lines (81 loc) · 2.36 KB
/
barChartTutor.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.chart div {
font: 10px sans-serif;
background-color: springgreen;
text-align: middle;
padding: 3px;
margin: 1px;
color: rebeccapurple;
}
rect {
color: hotpink;
}
text{
color: black;
}
</style>
<script src="libraries/d3.js"></script>
<script src="libraries/arquero.js"></script>
</head>
<body>
<div class="chart"></div>
<svg width="300" height="500"></svg>
<script>
var dat = [86, 5, 75, 98, 52]
var s = d3.scaleLinear()
.range([0,300])
.domain([5,98])
// d3.select('.chart')
// .selectAll('div')
// .data(dat)
// .join('div')
// .style('width',d => s(d) + "px")
// .text(d => d)
//Bar that is correct, now let me add a button and call it to update the data randomly
var updtButton = d3.select('svg')
.append('rect')
.attr('id','update')
.attr('x', 150)
.attr('y', 150)
.attr('height',25)
.attr('width',50)
.attr('fill','green')
.text('update')
d3.select('svg')
.append('g')
.selectAll('rect')
.data(dat)
.join('rect')
.attr('width',10)
.attr("y",0)
.attr("x",(d,i) => i * 15)
.attr("height",d => 450 - d)
//Lets continue the play shall we?? learnt some neat tricks from Mori...
var updt = document.getElementById('update')
updt.addEventListener('click',updateDat) //Okay this works..
function updateDat(){
//console.log('getttingIN')
dat.push(Math.round(Math.random()*100))
//console.log(dat)
var bar = d3.select('svg')
.append('g')
.selectAll('rect')
.data(dat)
.join('rect')
.attr('width',10)
.attr("y",d => 500 - d)
.attr("x",(d,i) => i * 15)
.attr("height",500)
//text of the bar chart
bar.append('text')
.attr("y",d => d - 10)
.attr('x',(d,i) => i * 15)
.text(d => d)
}
</script>
</body>
</html>