Building Blocks Overview

Links in the video

Act I: The project itself

http://blockbuilder.org/about
https://github.com/enjalot/building-blocks
http://blockbuilder.org/enjalot/476c804335f77198447e

Act II: The reasons we do it

/syntagmatic
/emeeks
/mbostock
/mbostock/85d7dce6fca6277f75fe
/syntagmatic/002ef2fb5c1dc2df5821
/syntagmatic/e6583e486f6df0c86b0f
/zanarmstrong/38d7f79f61a03acc0ef0
/syntagmatic/29bccce80df0f253c97e
/emeeks/bc38c32d24e6fba4db84
/mbostock/7115f7a0393de96f2fdc
/zanarmstrong/b1c051113be144570881
/zanarmstrong/05c1e95bf7aa16c4768e

Act III: Making a new block

http://blockbuilder.org
http://blockbuilder.org/enjalot/6a5460f62f7d04c46cf8
/enjalot
/syntagmatic/28f1fbeb41df9753e120
http://blockbuilder.org/enjalot/41cdfd9dc7e8131d1253

Post Script: Bookmarklet

http://blockbuilder.org/enjalot/c0e1634fb919c37575b8

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style> 
  body {
    margin: 0;
    padding: 0;
    position:fixed;
    top:0; left: 0; right: 0; bottom: 0;
  }
  a {
    width: 100%;
    height: 100%;
    display: block;
  }
  img {
    position: absolute;
    top: 65px;
    left: 240px;
    width: 480px;
  }
</style>
​
<body>
  
  <!-- 
​
  <a href="https://www.youtube.com/watch?v=NrBwgJGvS2c">
    <img src="https://img.youtube.com/vi/NrBwgJGvS2c/0.jpg"></a>
  unfortunately this doesn't work inside a sandboxed iframe (in building-blocks, it does work on bl.ocks.org)
-->
  <iframe width="960" height="500" src="https://www.youtube.com/embed/NrBwgJGvS2c?rel=0&html5=1" frameborder="0" sandbox="allow-scripts allow-same-origin"></iframe>
​
  </a>
​
  <script>
    console.log("you are now rocking with d3", d3);
  </script>
</body>
​
​
​
    

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