Last active
December 14, 2016 10:29
-
-
Save danharr/8d0f9629216a8c0447a8 to your computer and use it in GitHub Desktop.
Portfolio
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- saved from url=(0060)http://www.tips-for-excel.com/dataviz/portfolio/gallery.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%; | |
| } | |
| p{ | |
| 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="http://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="http://www.telegraph.co.uk/news/worldnews/us-election/9657081/Can-social-media-predict-the-US-election.html" target="_blank"><img src="http://i.imgur.com/tUoiXdp.png" class="images"></a></div><div class="thumbs"><p>Online Journeys</p><a href="http://bl.ocks.org/danharr/raw/9837654/" target="_blank"><img src="http://i.imgur.com/jmn1n0T.png" class="images"></a></div><div class="thumbs"><p>Sports Entertainment Viz</p><a href="http://bl.ocks.org/danharr/raw/9831933/" target="_blank"><img src="http://i.imgur.com/lMiAgO2.png" class="images"></a></div><div class="thumbs"><p>Football Passes</p><a href="http://bl.ocks.org/danharr/raw/9833333/" target="_blank"><img src="http://i.imgur.com/52JOHuI.png" class="images"></a></div><div class="thumbs"><p>Project Management I</p><a href="http://bl.ocks.org/danharr/raw/4bf8860581a6f5f869e2/" target="_blank"><img src="http://i.imgur.com/pOv78zX.png" class="images"></a></div><div class="thumbs"><p>Project Management II</p><a href="http://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="http://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="http://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="http://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="http://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="http://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="http://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 & 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="http://bl.ocks.org/danharr/raw/fd930bb06df3ff213bd0/" target="_blank"><img src="./Gallery_files/exp1.png" class="images"></a></div><div class="thumbs"><p>Google Analytics & Tableau</p><a href="http://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="http://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="http://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="http://d3js.org/" target="_blank"><img src="./Gallery_files/etl2.png" class="images"></a></div><div class="thumbs"><p>Tableau</p><a href="http://www.tableausoftware.com/" target="_blank"><img src="./Gallery_files/etl3.png" class="images"></a></div><div class="thumbs"><p>Qlikview</p><a href="http://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="http://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="http://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="http://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> | |
| <script> | |
| var d3Viz = [ | |
| ["http://i.imgur.com/tUoiXdp.png","http://www.telegraph.co.uk/news/worldnews/us-election/9657081/Can-social-media-predict-the-US-election.html", "Predicting the US Election"], | |
| ["http://i.imgur.com/jmn1n0T.png","http://bl.ocks.org/danharr/raw/9837654/", "Online Journeys"], | |
| ["http://i.imgur.com/lMiAgO2.png","http://bl.ocks.org/danharr/raw/9831933/", "Sports Entertainment Viz"], | |
| ["http://i.imgur.com/52JOHuI.png","http://bl.ocks.org/danharr/raw/9833333/", "Football Passes"], | |
| ["http://i.imgur.com/pOv78zX.png","http://bl.ocks.org/danharr/raw/4bf8860581a6f5f869e2/", "Project Management I"], | |
| ["projects.gif","http://bl.ocks.org/danharr/raw/3505bdf5a161c398bab3/", "Project Management II"], | |
| ["gal/d37.png","http://bl.ocks.org/danharr/raw/9834558/", "Web Analytics"], | |
| ["gal/best11.gif","http://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","http://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","http://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","http://placehold.it/250x150", "Understanding Mean & Standard Deviation"], | |
| ["http://placehold.it/250x150","http://placehold.it/250x150", "To be added"], | |
| ["http://placehold.it/250x150","http://placehold.it/250x150", "To be added"], | |
| ["http://placehold.it/250x150","http://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","http://bl.ocks.org/danharr/raw/fd930bb06df3ff213bd0/", "Customer Dashboard"], | |
| ["gal/exp2.png","#", "Google Analytics & Tableau"], | |
| ["http://placehold.it/250x150","#", "To be added"], | |
| ["http://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","http://d3js.org/", "d3.js"], | |
| ["gal/etl3.png","http://www.tableausoftware.com/", "Tableau"], | |
| ["gal/etl4.png","http://www.qlik.com/uk/explore/products/qlikview", "Qlikview"], | |
| ["gal/etl1.png","http://support.sas.com/rnd/base/new92/", "SAS"], | |
| ["gal/etl5.png","http://office.microsoft.com/en-gb/excel/download-power-pivot-HA101959985.aspx", "PowerPivot"], | |
| ["gal/etl6.png","http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment