Old school D3 from simpler times

All examples By author By category About

enjalot

Full window Github gist

building-blocks backers

Backers of building-blocks

♥ Shirley Wu
♥ James Waters
♥ Elijah Meeks
♥ d3noob
♥ Erik Hazzard
♥ Zan Armstrong
♥ Miles McCrocklin
♥ Erik Cunningham
♥ Owen Dall
♥ Sara Quigley
♥ Dow Street
♥ Sebastian Gutierrez
♥ Andrew Thornton
♥ Sha Hwang
♥ Kristina
♥ Max Goldstein
♥ René Clausen Nielsen
♥ Charles Boicey
♥ Maarten Vanhoof
♥ Adam Pearce
♥ Kent Russell
♥ Jyri Tuulos
♥ Lane Harrison
♥ Sophie Engle
♥ Jim Vallandingham
♥ Tom MacWright
♥ nthitz
♥ Jinlong Yang
♥ Lon Riesberg
♥ Brendan Sudol
♥ Susie Lu
♥ Sam Selikoff
♥ Mike Freeman
♥ Jason Sundram
♥ Iain Emsley
♥ noansknv
♥ Christophe Viau
♥ Gordon Woodhull
♥ Karl Sanford
♥ Yaniv Ben-Zaken
♥ Brian Kilmartin
♥ Nils Schlomann
♥ Tom VanAntwerp
♥ Jon Sadka
♥ Brylie Christopher Oxley
♥ Jeremy Stucki
♥ Timo Grossenbacher
♥ Joey Cherdarchuk
♥ paul van slembrouck
♥ Shobhit Gupta
♥ Tony Garcia
♥ Paul Katsen
♥ Sarah Rudd
♥ Adam Breckler
♥ Munaf Assaf
♥ Douglass Turner
♥ Tarek Rached
♥ David Mann
♥ Fred Benenson
♥ Lynn Wetherell
♥ John A Thompson
♥ David Cabo
♥ Scanner
♥ John Alexis Guerra Gomez
♥ Tony Chu
♥ Brandon Liu
♥ ninjaPixel
♥ fengshuo
♥ Jonathan Page
♥ Karl Broman
♥ Mahir Yavuz
♥ Yuri Feldman
♥ Matthieu Martin
♥ Enrico Paganin
♥ Curtis Mitchell
♥ George Murphy
♥ François Romain
♥ Danny Cochran
♥ Ignacio Campo
♥ Fabian Dubois
♥ Michael Groncki
♥ Phillip Smith
♥ Yassine Alouini
♥ Geo Miller
♥ Aline Lerner
♥ Claud Alexander
♥ Johanna Fulda
♥ Kai Chang

This list includes 87/111 survey responders for people who backed at a reward level of $25 or more.

Much love to everyone who backed!

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.js"></script>
</head>

<style>
  body {
    background-color: #111317;
    color: #124b58;
    font-size: 200px;
    text-align: center;
    width: 100%;
    margin-top: 120px;
    position: absolute;
  }
  .backers {
    position:absolute;
    color: #94dae9;
    font-size: 20px;
    top:-200px;
    left:0;
  }
</style>

<body> 
  Thank you
  <script>
    d3.csv("backers.csv", function(err, data) {
      console.log(data);
      var markdown = "";
      data.forEach(function(d) {
        markdown += "♥ [" + d.name + "](" + d.url + ")  \n" 
      })
      //console.log("markdown\n", markdown);
      //console.log("HTML\n", marked(markdown))
      
      var backers = d3.select("body").selectAll("div.backers")
      .data(data)
      
      backers.enter().append("div").classed("backers", true)
      
      backers.text(function(d) { return d.name })
        .style({
          left: function(d,i) { return Math.random() * 880 + "px" }
        })
      
      backers.transition()
        .ease("sin")
        .delay(function(d,i) { return i * 80 })
        .duration(function(d) { return 2500 + Math.random() * 400})
        .style({
          top: "600px"
        }).each("end", function(d,i) {
          repeat(d3.select(this), i)
        })
      
      function repeat(selection, i) {
        selection
          .style({ top: "-200px", left: Math.random() * 880 + "px" })
          .transition()
          .ease("sin")
          .delay(2500 + 400 + i * 80)
          .duration(function() { return 2500 + Math.random() * 400 })
          .style({ top: "600px" })
          .each("end", function() { repeat(selection, i) })
      }
      
    })
  </script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.js"></script>
</head>
​
<style>
  body {
    background-color: #111317;
    color: #124b58;
    font-size: 200px;
    text-align: center;
    width: 100%;
    margin-top: 120px;
    position: absolute;
  }
  .backers {
    position:absolute;
    color: #94dae9;
    font-size: 20px;
    top:-200px;
    left:0;
  }
</style>
​
<body> 
  Thank you
  <script>
    d3.csv("backers.csv", function(err, data) {
      console.log(data);
      var markdown = "";
      data.forEach(function(d) {
        markdown += "♥ [" + d.name + "](" + d.url + ")  \n" 
      })
      //console.log("markdown\n", markdown);
      //console.log("HTML\n", marked(markdown))
      
      var backers = d3.select("body").selectAll("div.backers")
      .data(data)
      
      backers.enter().append("div").classed("backers", true)
      
      backers.text(function(d) { return d.name })
        .style({
          left: function(d,i) { return Math.random() * 880 + "px" }
        })
      
      backers.transition()
        .ease("sin")
        .delay(function(d,i) { return i * 80 })
        .duration(function(d) { return 2500 + Math.random() * 400})
        .style({
          top: "600px"
        }).each("end", function(d,i) {
          repeat(d3.select(this), i)
        })
      
      function repeat(selection, i) {
        selection
          .style({ top: "-200px", left: Math.random() * 880 + "px" })
          .transition()
          .ease("sin")
          .delay(2500 + 400 + i * 80)
          .duration(function() { return 2500 + Math.random() * 400 })
          .style({ top: "600px" })
          .each("end", function() { repeat(selection, i) })
      }
      
    })
  </script>
</body>
​
​
​
    

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

https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.js