Skip to content

Instantly share code, notes, and snippets.

@HamishWoodrow

HamishWoodrow/.block

Created October 30, 2017 23:38
Show Gist options
  • Save HamishWoodrow/288fcb4f2a7e9edb76d0cd56979d210d to your computer and use it in GitHub Desktop.
Save HamishWoodrow/288fcb4f2a7e9edb76d0cd56979d210d to your computer and use it in GitHub Desktop.
Download ZIP
d3_tip_plot
Raw
.block
license: mit
Raw
data.csv
letter frequency
0 2017-02-15 165.67
1 2017-02-16 39.81
2 2017-02-17 133.36
3 2017-02-18 98.79
4 2017-02-19 11.75
5 2017-02-23 22.99
6 2017-03-06 100.0
7 2017-03-13 9.99
8 2017-03-14 165.03
9 2017-03-18 262.5
10 2017-03-22 262.0
11 2017-03-29 261.38
12 2017-03-31 1187.41
13 2017-04-08 4.99
14 2017-04-16 129.34
15 2017-04-21 254.04
16 2017-04-22 254.04
17 2017-05-05 257.48
18 2017-05-07 25.16
19 2017-05-08 40.97
20 2017-05-09 3.28
21 2017-05-10 10.1
22 2017-05-11 109.92
23 2017-05-12 86.34
24 2017-05-13 33.01
25 2017-05-14 9.45
26 2017-05-16 63.0
27 2017-05-17 4.4
28 2017-05-18 159.76
29 2017-05-19 61.71
30 2017-05-20 86.58
31 2017-05-21 37.46
32 2017-05-23 2.1
33 2017-05-26 146.35
34 2017-05-27 43.99
35 2017-05-28 18.0
36 2017-05-29 12.5
37 2017-05-30 39.44
38 2017-06-01 73.8
39 2017-06-06 39.97
40 2017-06-07 4.7
41 2017-06-08 13.05
42 2017-06-09 9.0
43 2017-06-12 61.55
44 2017-06-14 5.0
45 2017-06-16 5.0
46 2017-06-18 3.13
47 2017-06-21 399.01
48 2017-06-22 24.75
49 2017-06-23 75.1
50 2017-06-24 17.94
51 2017-06-25 27.32
52 2017-06-26 13.93
53 2017-06-27 32.17
54 2017-06-28 10.29
55 2017-06-29 33.43
56 2017-06-30 3.19
57 2017-07-01 124.32
58 2017-07-03 41.08
59 2017-07-04 19.36
60 2017-07-05 22.21
61 2017-07-06 127.71
62 2017-07-07 18.16
63 2017-07-08 24.39
64 2017-07-09 4.65
65 2017-07-10 11.5
66 2017-07-14 8.5
67 2017-07-15 3.08
68 2017-07-17 14.29
69 2017-07-20 9.02
70 2017-07-21 44.65
71 2017-07-22 3.91
72 2017-07-23 18.53
73 2017-07-24 6.93
74 2017-07-26 4.33
75 2017-07-27 29.25
76 2017-07-28 3.11
77 2017-07-29 9.85
78 2017-07-30 3.74
79 2017-07-31 7.28
80 2017-08-01 3.76
81 2017-08-02 26.69
82 2017-08-03 12.83
83 2017-08-09 21.59
84 2017-08-12 38.63
85 2017-08-13 11.64
86 2017-08-15 7.91
87 2017-08-20 23.11
88 2017-08-21 31.89
89 2017-08-22 12.49
90 2017-08-23 7.82
91 2017-08-24 11.82
92 2017-08-26 95.32
93 2017-08-27 7.78
94 2017-08-28 3.61
95 2017-08-29 31.22
96 2017-08-30 120.5
97 2017-09-01 25.57
98 2017-09-02 43.29
99 2017-09-04 18.36
100 2017-09-05 53.69
101 2017-09-07 1.44
102 2017-09-08 29.68
103 2017-09-09 36.04
104 2017-09-10 45.46
105 2017-09-12 11.97
106 2017-09-15 1.98
107 2017-09-16 7.89
108 2017-09-17 11.97
109 2017-09-19 3.79
110 2017-09-20 11.85
111 2017-09-22 3.34
112 2017-09-23 20.98
113 2017-09-25 96.82
114 2017-09-26 46.73
115 2017-09-28 354.61
116 2017-09-30 27.2
117 2017-10-06 6.91
118 2017-10-07 11.16
119 2017-10-08 6.44
120 2017-10-09 68.19
121 2017-10-10 7.05
122 2017-10-14 5.84
123 2017-10-15 21.66
124 2017-10-16 227.87
125 2017-10-17 3.45
126 2017-10-18 4.76
127 2017-10-19 23.56
128 2017-10-20 5.42
129 2017-10-21 170.35
130 2017-10-25 95.21
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: orange;
}
.bar:hover {
fill: orangered ;
}
.x.axis path {
display: none;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var margin = {top: 40, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
})
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
d3.csv("data.csv", type, function(error, data) {
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
});
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment