D3 Gallery Experiments

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css">
<link rel="stylesheet" href="//ianlunn.github.io/Hover/css/hover.css">
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<div class="container">
  <div class="large-12 small-12 columns" id='gallery'>
    <a href="#" class="button radius small">Filter</a>
  </div>  
 </div>

CSS

.container{
  margin-top: 40px;
}
img {
   width: 100%;
}

                @import url(//fonts.googleapis.com/css?family=Roboto:400,500,300,100,700,900);
html, body {
  background: #FAFAFA; }

.card {
  font-family: 'Roboto', sans-serif;
  overflow: hidden;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: #272727;
  border-radius: 2px; }
  .card .title {
    line-height: 2rem;
    font-size: 1.5rem;
    font-weight: 300; }
  .card .content {
    padding: 1rem;
    font-weight: 300;
    border-radius: 0 0 2px 2px; }
  .card p {
    margin: 0; }
  .card .action {
    border-top: 1px solid rgba(160, 160, 160, 0.2);
    padding: 1rem;
  }
  .card a {
    color: #ffab40;
    margin-right: 1.3rem;
    transition: color 0.3s ease;
    text-transform: uppercase;
    text-decoration: none; }
  .card .image {
    position: relative; }
    .card .image .title {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 1rem;
      color: #fff; }
    .card .image img {
      border-radius: 2px 2px 0 0; }

CoffeeScript

data = d3.range(9)

create_card = (itemEnter) ->
  card = itemEnter.append('li').append('div.card')
  image = card.append('div.image')
  image.append('img')
  image.append('span.title').style('pointer-events', 'none')
  
  card.append('div.content')
  card.append('div.action')
    .append('a').attr('href', '#')
    .append('i')
    
update_card = (item) ->
  item.select('img').attr
    src: "http://static.pexels.com/wp-content/uploads/2014/07/alone-clouds-hills-1909-527x350.jpg"
    
  item.select('.title')
    .text "diagrammeR"
   
  item.select(".action i")
    .attr
      class: "fi-social-github"
    .style("font-size", "2rem")
    
  item.select('.content')
    .html((d, i) -> "<p>Create graph diagrams and flowcharts using R</p>")
  

card_gallery = (data) ->
  item = gallery.selectAll('li').data(data, (d) -> d)
  item.enter().call(create_card)
  item.call(update_card)
  item.exit().remove()


gallery = d3.select("#gallery")
  .append("ul")
  .attr("class", "small-block-grid-1 medium-block-grid-2 large-block-grid-4")
    

  
draw = (data) ->
  item = gallery.selectAll('li')
    .data(data, (d) -> d)
    
  item.enter()
    .append('li')
    .append('img')
    
  item.exit()
    .transition()
    .duration(100)
    .remove()
   
  item.select('img')
    .transition()
    .duration(1000)
    .attr
      class: 'hvr-grow'
      src: (d) -> "http://placehold.it/200x#{200+d}"
        
  
card_gallery(data)    
d3.select(".button").on "click", ->
  card_gallery([1, 6, 9])
    
#draw(data)