-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
235 lines (211 loc) · 11.5 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
---
layout: base
title: Peter Cook Data Visualisation
description: Home page of Brighton-based Peter Cook who specialises in data visualisation
---
<div class="jumbotron">
<p class="lead">I design and build web applications.</p>
<p class="lead">I use JavaScript, Python, WordPress, HTML, CSS, jQuery, D3 and more.</p>
<p class="lead">Available <a href="contact">for hire</a>.</p>
</div>
<hr>
<!-- <h3>Latest news</h3>
<p>27 May 2014 - Launched <a href="http://www.meetup.com/Data-Visualisation-Brighton/">Data Visualisation Brighton Meetup group</a></p>
<p>4 Nov 2013 - <a href="/radialbarchart">Radial bar chart</a> reusable D3 component released</p>
<p>3 Oct 2013 - <a href="/slides/beyondthebarchart">Beyond the Bar Chart</a> talk given at <a href="http://brighton.nerdnite.com/2013/09/18/nerd-nite-6-31013/">Nerd Nite Brighton</a></p>
<p>7 Sep 2013 - <a href="http://sumall.org/syria">Crisis visualisation</a> developed with <a href="http://sumall.org/">Sumall.org</a> featured in <a href="http://mashable.com/2013/09/06/syria-timeline-tweets/">Mashable</a></p>
-->
<!-- <p>25 Sep 2013 - <a href="/d3-workshop">Building Data Visualisations with D3</a> (a one-day course in Brighton, UK). <a href="/d3-workshop">More...</a></p> -->
<!-- <hr> -->
<h3>Some things I've made recently...</h3>
<div class="row-fluid showcase">
<div class="span4 item">
<a href="http://charts.animateddata.co.uk/tatum"><img src="img/tatum-thumb.jpg"></a>
</div>
<div class="span4 item">
<a href="http://charts.animateddata.co.uk/uktemp"><img src="img/uktemprange-thumb.jpg"></a>
</div>
<div class="span4 item">
<a href="http://charts.animateddata.co.uk/f1"><img src="img/f1-thumb.jpg"></a>
</div>
</div>
<div class="row-fluid showcase">
<div class="span4 item">
<a href="http://charts.animateddata.co.uk/uktemperaturelines"><img src="img/uktemplines-thumb.jpg"></a>
</div>
<div class="span4 item">
<a href="/radialbarchart"><img src="img/radial-bar-thumb.jpg"></a>
<div class="rollover">
<h4><a href="/lab/selection">Radial bar chart reusable D3 component</a></h4>
<p>Radial bar chart reusable D3 component</p>
</div>
</div>
<div class="span4 item">
<a href="http://sumall.org/syria"><img src="img/crisis-thumb.jpg"></a>
<div class="rollover">
<h4>Crisis visualisation</h4>
<p>Crisis visualisation</p>
</div>
</div>
</div>
<div class="row-fluid showcase">
<div class="span4 item">
<a href="/lab/selection"><img src="img/selection-thumb.jpg"></a>
<div class="rollover">
<h4><a href="/lab/selection">Understanding D3 Selections</a></h4>
<p>Understanding D3 selections</p>
</div>
</div>
<div class="span4 item">
<a href="http://wimbledon.prcweb.co.uk"><img src="img/playerbubbles-thumb.jpg"></a>
<div class="rollover">
<h4><a href="http://wimbledon.prcweb.co.uk">Wimbledon Visualisations</a></h4>
<p>10 different visualisations of Wimbledon 2012.</p>
</div>
</div>
<div class="span4 item">
<a href="http://wimbledon.prcweb.co.uk"><img src="img/davidgoliath-thumb.jpg"></a>
<div class="rollover">
<h4><a href="http://wimbledon.prcweb.co.uk">Wimbledon Visualisations</a></h4>
<p>10 different visualisations of Wimbledon 2012.</p>
</div>
</div>
</div>
<div class="row-fluid showcase">
<div class="span4 item">
<a href="/lab/d3-tree"><img src="img/d3-tree/tree-thumb.jpg"></a>
<div class="rollover">
<h4><a href="/lab/d3-tree">Binary tree</a></h4>
<p>A binary tree with a degree of geometric randomness. The user can regenerate the tree and hovering over a branch highlights the path back to the root.</p></p>Built with <a href="http://d3js.org">D3</a>.</p>
</div>
</div>
<div class="span4 item">
<a href="/lab/what-makes-us-happy"><img src="img/whatmakesushappy-thumb.jpg"></a>
<div class="rollover">
<h4><a href="/lab/what-makes-us-happy">What Makes Us Happy?</a></h4>
<p>An interactive scatterplot of <a href="/lab/what-makes-us-happy">well-being in 22 European countries</a> plotted against measures such as GDP, equality and working hours.</p><p>Made with <a href="http://d3js.org">D3</a>.</p>
</div>
</div>
<div class="span4 item">
<a href="/lab/ukwind"><img src="img/uk-wind-chart-thumb.jpg"></a>
<div class="rollover">
<h4><a href="/lab/ukwind">UK Animated Wind Chart</a></h4>
<p>A visualisation of <a href="/lab/ukwind">wind in the UK</a> using animation to depict the strength and direction of the wind.</p><p>Made with <a href="http://d3js.org">D3</a>.</p>
<p><a href="/making-the-uk-wind-chart">More</a></p>
</div>
</div>
</div>
<div class="row-fluid showcase">
<div class="span4 item">
<a href="/lab/worldmigration"><img src="img/world-migration-thumb.jpg"></a>
<div class="rollover">
<h4><a href="/lab/worldmigration">World Migration 2010</a></h4>
<p>A visualisation of <a href="/lab/worldmigration">migration in 2010</a> with animated arrows.</p><p>Made with <a href="http://raphaeljs.com">Raphaël</a>.</p>
<p><a href="/what-goes-into-a-data-visualisation">More</a></p>
</div>
</div>
<div class="span4 item">
<a href="/lab/eurodebt"><img src="img/euro-debt-thumb.jpg"></a>
<div class="rollover">
<h4><a href="/lab/eurodebt">European Debt</a></h4>
<p>A visualisation of <a href="/lab/eurodebt">European debt</a>.</p><p>Made with <a href="http://raphaeljs.com">Raphaël</a>.</p>
<p><a href="/lab/eurodebt">More</a></p>
</div>
</div>
<div class="span4 item">
<a href="/uktemperature"><img src="img/uktemp-thumb.jpg"></a>
<div class="rollover">
<h4><a href="/uktemperature">UK Temperature visualisation</a></h4>
<p>A visualisation of <a href="/uktemperature">UK temperature 1910-2012</a> made with <a href="http://d3js.org">D3</a>.</p>
<p><a href="/uktemperature">More</a></p>
</div>
</div>
</div>
<div class="row-fluid showcase">
<div class="span4 item">
<a href="/circularheatchart"><img src="img/circular-heat-chart-thumb.jpg"></a>
<div class="rollover">
<h4><a href="/circularheatchart">Circular heat chart D3 component</a></h4>
<p>A reusable component for building <a href="/circularheatchart">circular heat charts</a> using <a href="http://d3js.org">D3</a>.<p>
<p><a href="/circularheatchart">More</a></p>
</div>
</div>
<div class="span4 item">
<a href="/energy"><img src="img/energy-thumb.jpg"></a>
<div class="rollover">
<h4><a href="/energy">Energy visualisation</a></h4>
<p>An interactive visualisation of my energy consumption.</p><p>Made with <a href="http://d3js.org">D3</a>.</p>
<p><a href="/energy">More</a></p>
</div>
</div>
<div class="span4 item">
<a href="/async-visualisation"><img src="img/async-mat-thumb.jpg"></a>
<div class="rollover">
<h4><a href="/async-visualisation">Event attendance visualisation</a></h4>
<p>A matrix of Async <a href="/async-visualisation">event attendance</a> made with <a href="http://d3js.org">D3</a>.</p>
<p><a href="/async-visualisation">More</a></p>
</div>
</div>
<!-- <div class="span4 item">
<a href="/async-visualisation"><img src="img/async-list-thumb.jpg"></a>
<div class="rollover">
<h4><a href="/async-visualisation">Event attendance visualisation</a></h4>
<p>A visualisation of Async <a href="/async-visualisation">event attendance</a> made with <a href="http://d3js.org">D3</a>.<p>
<p><a href="/async-visualisation">More</a></p>
</div>
</div>
--> </div>
<hr>
<h3>I've worked with...</h3>
<div class="row-fluid showcase">
<div class="span4 item">
<a href="http://www.bbc.co.uk/rd/blog/2014/05/celebrating-20-years-of-being-online"><img src="img/bbc.jpg"></a>
</div>
<div class="span4 item">
<a href="http://wunderdata.com"><img src="img/wunderdata-logo.png"></a>
</div>
<div class="span4 item">
<a href="http://dharmafly.com"><img src="img/dharmafly-thumb.jpg"></a>
<div class="rollover">
<h4><a href="http://dharmafly.com">Dharmafly</a></h4>
<ul>
<li>HTML5, CSS, JavaScript, jQuery</li>
</ul>
<p><a href="http://dharmafly.com">Visit site</a></p>
</div>
</div>
</div>
<hr>
<h3>I like to use...</h3>
<p>
<a href="https://developer.mozilla.org/en/docs/JavaScript">JavaScript</a>,
<a href="http://jquery.com">jQuery</a>,
<a href="http://d3js.org">D3</a>,
<a href="http://www.w3.org/html/wg/drafts/html/master/">HTML5</a>,
<a href="https://developer.mozilla.org/en-US/docs/CSS/CSS3">CSS3</a>,
<a href="http://www.python.org">Python</a>,
<a href="http://wordpress.org">WordPress</a> and others</p>
<hr>
<h3>Tutorials and talks</h3>
<p><a href="/slides/wordpress-plugins">Slides</a> from my How to Build a WordPress Plugin talk given at <a href="http://www.meetup.com/WordUp-Brighton/events/220349774/">WordUp Brighton</a></p>
<p><a href="/slides/beyondthebarchart">Slides</a> from my Beyond the Bar Chart talk given at <a href="http://brighton.nerdnite.com/2013/09/18/nerd-nite-6-31013/">Nerd Nite Brighton</a></p>
<p><a href="/lab/selection">An interactive explanation of D3 selections</a></p>
<p><a href="/d3-workshop">Building Data Visualisations with D3 One Day Workshop</a></p>
<p><a href="/slides/d3london">Slides</a> from my talk at the <a href="http://lanyrd.com/2013/london-d3js-5/">London D3 Meetup (June 2013)</a> '10 Views of a Single Dataset'</p>
<p><a href="/slides/d3">Slides</a> from my <a href="http://asyncjs.com/d3/">Async</a> talk 'D3.js - Data Visualisation in the Browser'</p>
<hr>
<h3>Projects</h3>
<p><a href="/circularheatchart">Circular heat chart component for D3.js</a></p>
<p><a href="/chartme">ChartMe WordPress plugin for Google Chart Tools</a></p>
<hr>
<h3>Blog</h3>
<p><a href="/visualisation">Creative data visualisation: a structured approach</a></p>
<p><a href="/d3-workshop">Building Data Visualisations with D3 One Day Workshop</a></p>
<p><a href="/making-the-uk-wind-chart">Making the UK animated wind chart</a></p>
<p><a href="/what-goes-into-a-data-visualisation">What goes into a data visualisation?</a></p>
<p><a href="/uktemperature">Data visualisation of UK temperature</a></p>
<p><a href="/rainfall">Data visualisation of UK rainfall</a></p>
<p><a href="/circularheatchart">Circular heat chart component for D3.js</a></p>
<p><a href="/energy">Energy data visualisation using D3.js</a></p>
<p><a href="/async-visualisation">Visualising event attendance using D3.js</a></p>
<hr>