All examples By author By category About

danharr

Full window Github gist

Portfolio

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Gallery</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<style>

.thumbs {
    width:250px;
    height:150px;
    display: inline-block;
    
        margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 10px;

}

.images {

max-height:100%; 
max-width:100%;

}

font-family: "Century Gothic",'Helvetica Neue',Helvetica, sans-serif;
  font-size: 1.0em;
}

.header1 {

width: 100%;
height: 25px;
background-color: #0099FF;
line-height: 25px;

}

.header2 {

width: 100%;
height: 25px;
background-color: #FF3300;
line-height: 25px;

}

.titles {

margin-left: 10px;
   color: #fff;
}

.header3 {

width: 100%;
height: 25px;
background-color: #29293D;
line-height: 25px;

}
.header4 , .header5{

width: 100%;
height: 25px;
background-color: #1D561D;
line-height: 25px;

}

.code {
padding: 2px 4px;
font-size: 90%;
font-family: Menlo,Arial;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}

.codel {
padding: 2px 4px;
font-size: 90%;
font-family: Menlo,Arial;
color: #ffffff;
background-color: #1434F4;
border-radius: 4px;
}

</style>
</head>
<body>
<p>A collection of data visualisations that I've made in recent times. Most are made with <span class="code">d3.js</span> or <span class="code">Tableau</span>, though I enjoy having to learn a new piece of software.  Most of my data manipulation is done in <span class="code">Python</span>,<span class="code">SAS</span>,<span class="code">PowerPivot</span> or trusty ol' <span class="code">Excel</span>.  This is my <a href="https://uk.linkedin.com/pub/dan-harrington/7/96/7a6"><span class="codel">LinkedIn</span></a></p>
<div class="header1"><p class="titles">Visuals made using d3 and other Javascript libraries (Angular, Radian etc)</p></div>
<div id="d3"><div class="thumbs"><p>Predicting the US Election</p><a href="https://www.telegraph.co.uk/news/worldnews/us-election/9657081/Can-social-media-predict-the-US-election.html" target="_blank"><img src="https://i.imgur.com/tUoiXdp.png" class="images"></a></div><div class="thumbs"><p>Online Journeys</p><a href="https://bl.ocks.org/danharr/raw/9837654/" target="_blank"><img src="https://i.imgur.com/jmn1n0T.png" class="images"></a></div><div class="thumbs"><p>Sports Entertainment Viz</p><a href="https://bl.ocks.org/danharr/raw/9831933/" target="_blank"><img src="https://i.imgur.com/lMiAgO2.png" class="images"></a></div><div class="thumbs"><p>Football Passes</p><a href="https://bl.ocks.org/danharr/raw/9833333/" target="_blank"><img src="https://i.imgur.com/52JOHuI.png" class="images"></a></div><div class="thumbs"><p>Project Management I</p><a href="https://bl.ocks.org/danharr/raw/4bf8860581a6f5f869e2/" target="_blank"><img src="https://i.imgur.com/pOv78zX.png" class="images"></a></div><div class="thumbs"><p>Project Management II</p><a href="https://bl.ocks.org/danharr/raw/3505bdf5a161c398bab3/" target="_blank"><img src="./Gallery_files/projects.gif" class="images"></a></div><div class="thumbs"><p>Web Analytics</p><a href="https://bl.ocks.org/danharr/raw/9834558/" target="_blank"><img src="./Gallery_files/d37.png" class="images"></a></div><div class="thumbs"><p>Manager's Best 11</p><a href="https://www.tips-for-excel.com/dataviz/Best11/mufc.html" target="_blank"><img src="./Gallery_files/best11.gif" class="images"></a></div></div>
<div class="header2"><p class="titles">Visuals made using Tableau Public/Desktop</p></div>
<div id="tab"><div class="thumbs"><p>Drive Time Planning Tool</p><a href="https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/AirportDriveTime/Catchments" target="_blank"><img src="./Gallery_files/tab1.png" class="images"></a></div><div class="thumbs"><p>Football Passing I</p><a href="https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/MCFCPassing/All" target="_blank"><img src="./Gallery_files/tab2.png" class="images"></a></div><div class="thumbs"><p>Life Expectancy</p><a href="https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/LifeExpectancy_3/LifeExpectancy" target="_blank"><img src="./Gallery_files/tab3.png" class="images"></a></div><div class="thumbs"><p>Catchment Zones</p><a href="https://www.tips-for-excel.com/dataviz/portfolio/gallery.html#" target="_blank"><img src="./Gallery_files/tab4.png" class="images"></a></div><div class="thumbs"><p>Employee Expense Claims</p><a href="https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/Expenses_13/ExpenseOverview" target="_blank"><img src="./Gallery_files/tab5.png" class="images"></a></div><div class="thumbs"><p>Football Passing II</p><a href="https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/MCFCSpread/ManCity" target="_blank"><img src="./Gallery_files/tab6.png" class="images"></a></div><div class="thumbs"><p>Football Passing III</p><a href="https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/MCFCTrail/Dashboard1" target="_blank"><img src="./Gallery_files/tab7.png" class="images"></a></div><div class="thumbs"><p>Atheltics | 5km</p><a href="https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/LGNInterAdvertising5kmRun/LGNInterAdvertising5km" target="_blank"><img src="./Gallery_files/tab9.png" class="images"></a></div><div class="thumbs"><p>Sports Sponsorship</p><a href="https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/SportsSponsorship/Top20Earners" target="_blank"><img src="./Gallery_files/tab8.png" class="images"></a></div></div>
<div class="header3"><p class="titles">Collection of mapping projects (Tableau, d3, Mapbox)</p></div>
<div id="map"><div class="thumbs"><p>UK Postboxes</p><a href="https://bl.ocks.org/danharr/raw/5a1377f32656ed347865/" target="_blank"><img src="./Gallery_files/map1.png" class="images"></a></div><div class="thumbs"><p>Custom UK maps | Tableau</p><a href="https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/LondonPolygonMap/Dashboard1" target="_blank"><img src="./Gallery_files/map2.png" class="images"></a></div><div class="thumbs"><p>London Buses</p><a href="https://www.tips-for-excel.com/2013/07/how-are-different-parts-of-london-serviced-by-night-buses/" target="_blank"><img src="./Gallery_files/map3.png" class="images"></a></div><div class="thumbs"><p>Map linked dashboard</p><a href="https://www.tips-for-excel.com/dataviz/portfolio/gallery.html#" target="_blank"><img src="./Gallery_files/map4.png" class="images"></a></div></div>

<div class="header4"><p class="titles">Stats based visuals</p></div>
<div id="stats"><div class="thumbs"><p>Understanding Mean &amp; Standard Deviation</p><a href="./Gallery_files/250x150" target="_blank"><img src="./Gallery_files/stat1.png" class="images"></a></div><div class="thumbs"><p>To be added</p><a href="./Gallery_files/250x150" target="_blank"><img src="./Gallery_files/250x150" class="images"></a></div><div class="thumbs"><p>To be added</p><a href="./Gallery_files/250x150" target="_blank"><img src="./Gallery_files/250x150" class="images"></a></div><div class="thumbs"><p>To be added</p><a href="./Gallery_files/250x150" target="_blank"><img src="./Gallery_files/250x150" class="images"></a></div></div>
<div class="header4"><p class="titles">Experiments</p></div>
<div id="exp"><div class="thumbs"><p>Customer Dashboard</p><a href="https://bl.ocks.org/danharr/raw/fd930bb06df3ff213bd0/" target="_blank"><img src="./Gallery_files/exp1.png" class="images"></a></div><div class="thumbs"><p>Google Analytics &amp; Tableau</p><a href="https://www.tips-for-excel.com/dataviz/portfolio/gallery.html#" target="_blank"><img src="./Gallery_files/exp2.png" class="images"></a></div><div class="thumbs"><p>To be added</p><a href="https://www.tips-for-excel.com/dataviz/portfolio/gallery.html#" target="_blank"><img src="./Gallery_files/250x150" class="images"></a></div><div class="thumbs"><p>To be added</p><a href="https://www.tips-for-excel.com/dataviz/portfolio/gallery.html#" target="_blank"><img src="./Gallery_files/250x150" class="images"></a></div></div>
<div class="header5"><p class="titles">Software favoured</p></div>
<div id="etl"><div class="thumbs"><p>d3.js</p><a href="https://d3js.org/" target="_blank"><img src="./Gallery_files/etl2.png" class="images"></a></div><div class="thumbs"><p>Tableau</p><a href="https://www.tableausoftware.com/" target="_blank"><img src="./Gallery_files/etl3.png" class="images"></a></div><div class="thumbs"><p>Qlikview</p><a href="https://www.qlik.com/uk/explore/products/qlikview" target="_blank"><img src="./Gallery_files/etl4.png" class="images"></a></div><div class="thumbs"><p>SAS</p><a href="https://support.sas.com/rnd/base/new92/" target="_blank"><img src="./Gallery_files/etl1.png" class="images"></a></div><div class="thumbs"><p>PowerPivot</p><a href="https://office.microsoft.com/en-gb/excel/download-power-pivot-HA101959985.aspx" target="_blank"><img src="./Gallery_files/etl5.png" class="images"></a></div><div class="thumbs"><p>Excel</p><a href="https://www.tips-for-excel.com/" target="_blank"><img src="./Gallery_files/etl6.png" class="images"></a></div><div class="thumbs"><p>Angular.js</p><a href="https://angularjs.org/" target="_blank"><img src="./Gallery_files/etl7.png" class="images"></a></div></div>

var d3Viz = [

["https://i.imgur.com/tUoiXdp.png","https://www.telegraph.co.uk/news/worldnews/us-election/9657081/Can-social-media-predict-the-US-election.html", "Predicting the US Election"],
["https://i.imgur.com/jmn1n0T.png","https://bl.ocks.org/danharr/raw/9837654/", "Online Journeys"],
["https://i.imgur.com/lMiAgO2.png","https://bl.ocks.org/danharr/raw/9831933/", "Sports Entertainment Viz"],
["https://i.imgur.com/52JOHuI.png","https://bl.ocks.org/danharr/raw/9833333/", "Football Passes"],
["https://i.imgur.com/pOv78zX.png","https://bl.ocks.org/danharr/raw/4bf8860581a6f5f869e2/", "Project Management I"],
["projects.gif","https://bl.ocks.org/danharr/raw/3505bdf5a161c398bab3/", "Project Management II"],
["gal/d37.png","https://bl.ocks.org/danharr/raw/9834558/", "Web Analytics"],
["gal/best11.gif","https://www.tips-for-excel.com/dataviz/Best11/mufc.html", "Manager's Best 11"]

];

var gal = d3.select("#d3");

var thumbs = gal.selectAll(".thumbs").data(d3Viz).enter().append("div").attr("class","thumbs");

var title = thumbs.append("p").html(function(d) {return d[2];});

var links = thumbs.append("a").attr("href",function(d) {return d[1];}).attr("target","_blank");

var images = links.append("img").attr("src",function(d) {return d[0];}).attr("class","images");

var TabViz = [

["gal/tab1.png","https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/AirportDriveTime/Catchments", "Drive Time Planning Tool"],
["gal/tab2.png","https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/MCFCPassing/All", "Football Passing I"],
["gal/tab3.png","https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/LifeExpectancy_3/LifeExpectancy", "Life Expectancy"],
["gal/tab4.png","#", "Catchment Zones"],
["gal/tab5.png","https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/Expenses_13/ExpenseOverview", "Employee Expense Claims"],
["gal/tab6.png","https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/MCFCSpread/ManCity", "Football Passing II"],
["gal/tab7.png","https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/MCFCTrail/Dashboard1", "Football Passing III"],
["gal/tab9.png","https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/LGNInterAdvertising5kmRun/LGNInterAdvertising5km", "Atheltics | 5km"],
["gal/tab8.png","https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/SportsSponsorship/Top20Earners", "Sports Sponsorship"]

];

var gal2 = d3.select("#tab");

var thumbs2 = gal2.selectAll(".thumbs").data(TabViz).enter().append("div").attr("class","thumbs");

var title2 = thumbs2.append("p").html(function(d) {return d[2];});

var links2 = thumbs2.append("a").attr("href",function(d) {return d[1];}).attr("target","_blank");

var images2 = links2.append("img").attr("src",function(d) {return d[0];}).attr("class","images");

var MapViz = [

["gal/map1.png","https://bl.ocks.org/danharr/raw/5a1377f32656ed347865/", "UK Postboxes"],
["gal/map2.png","https://public.tableausoftware.com/profile/wilsonkiw#!/vizhome/LondonPolygonMap/Dashboard1", "Custom UK maps | Tableau"],
["gal/map3.png","https://www.tips-for-excel.com/2013/07/how-are-different-parts-of-london-serviced-by-night-buses/", "London Buses"],
["gal/map4.png","#", "Map linked dashboard"]

];

var gal3 = d3.select("#map");

var thumbs3 = gal3.selectAll(".thumbs").data(MapViz).enter().append("div").attr("class","thumbs");

var title3 = thumbs3.append("p").html(function(d) {return d[2];});

var links3 = thumbs3.append("a").attr("href",function(d) {return d[1];}).attr("target","_blank");

var images3 = links3.append("img").attr("src",function(d) {return d[0];}).attr("class","images");

var StatsViz = [

["gal/stat1.png","https://placehold.it/250x150", "Understanding Mean & Standard Deviation"],
["https://placehold.it/250x150","https://placehold.it/250x150", "To be added"],
["https://placehold.it/250x150","https://placehold.it/250x150", "To be added"],
["https://placehold.it/250x150","https://placehold.it/250x150", "To be added"]

];

var gal4 = d3.select("#stats");

var thumbs4 = gal4.selectAll(".thumbs").data(StatsViz).enter().append("div").attr("class","thumbs");

var title4 = thumbs4.append("p").html(function(d) {return d[2];});

var links4 = thumbs4.append("a").attr("href",function(d) {return d[1];}).attr("target","_blank");

var images4 = links4.append("img").attr("src",function(d) {return d[0];}).attr("class","images");

var ExpViz = [

["gal/exp1.png","https://bl.ocks.org/danharr/raw/fd930bb06df3ff213bd0/", "Customer Dashboard"],
["gal/exp2.png","#", "Google Analytics & Tableau"],
["https://placehold.it/250x150","#", "To be added"],
["https://placehold.it/250x150","#", "To be added"]

];

var gal5 = d3.select("#exp");

var thumbs5 = gal5.selectAll(".thumbs").data(ExpViz).enter().append("div").attr("class","thumbs");

var title5 = thumbs5.append("p").html(function(d) {return d[2];});

var links5 = thumbs5.append("a").attr("href",function(d) {return d[1];}).attr("target","_blank");

var images5 = links5.append("img").attr("src",function(d) {return d[0];}).attr("class","images");

var HowViz = [

["gal/etl2.png","https://d3js.org/", "d3.js"],
["gal/etl3.png","https://www.tableausoftware.com/", "Tableau"],
["gal/etl4.png","https://www.qlik.com/uk/explore/products/qlikview", "Qlikview"],
["gal/etl1.png","https://support.sas.com/rnd/base/new92/", "SAS"],
["gal/etl5.png","https://office.microsoft.com/en-gb/excel/download-power-pivot-HA101959985.aspx", "PowerPivot"],
["gal/etl6.png","https://www.tips-for-excel.com/", "Excel"],
["gal/etl7.png","https://angularjs.org/", "Angular.js"]

];

var gal6 = d3.select("#etl");

var thumbs6 = gal6.selectAll(".thumbs").data(HowViz).enter().append("div").attr("class","thumbs");

var title6 = thumbs6.append("p").html(function(d) {return d[2];});

var links6 = thumbs6.append("a").attr("href",function(d) {return d[1];}).attr("target","_blank");

var images6 = links6.append("img").attr("src",function(d) {return d[0];}).attr("class","images");

</script>

</body></html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js