Gallery

<!DOCTYPE HTML>
<html>
<head>
<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;

}

</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra lorem non nisl posuere, vel efficitur dolor aliquet. Phasellus non facilisis felis. In hac habitasse platea dictumst. Nullam elit orci, ornare vel turpis ac, elementum lacinia elit. Curabitur ultricies dui justo, nec vehicula tortor dapibus a. Maecenas sed nisl maximus, accumsan lorem in, scelerisque nulla. Vivamus vitae sapien tortor. Morbi non sem lacus. Sed cursus metus ac viverra consequat. Suspendisse vulputate condimentum leo.</p>
<div class="header1"><p class="titles">Visuals made using d3 and other Javascript libraries (Angular, Radian etc)</p></div>
<div id="d3"></div>
<div class="header2"><p class="titles">Visuals made using Tableau Public/Desktop</p></div>
<div id="tab"></div>
<div class="header3"><p class="titles">Collection of mapping projects (Tableau, d3, Mapbox)</p></div>
<div id="map"></div>

<div class="header4"><p class="titles">Stats based visuals</p></div>
<div id="stats"></div>
<div class="header4"><p class="titles">Experiments</p></div>
<div id="exp"></div>
<div class="header5"><p class="titles">Software used for data transformation</p></div>
<div id="etl"></div>

var d3Viz = [

["gal.png","https://bl.ocks.org/danharr/raw/df96298cbff5445ffe52/", "Visual Number 1"],
["gal2.png","https://bl.ocks.org/danharr/raw/df96298cbff5445ffe52/", "Visual Number 1"],
["gal.png","https://bl.ocks.org/danharr/raw/df96298cbff5445ffe52/", "Visual Number 1"],
["gal.png","https://bl.ocks.org/danharr/raw/df96298cbff5445ffe52/", "Visual Number 1"]

];

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 = [

];

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 = [

];

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

var thumbs3 = gal3.selectAll(".thumbs").data(TabViz).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");

</script>

</body>
</html>

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