D3 Examples - js fire animation adapted for teaching purposes

xxxxxxxxxx
 
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
html, body {
    height: 100%;
    background: #222;
    margin: 0;
}
​
body, #prev, #next {
    height: 100%;
    box-sizing: border-box;
​
    display: flex;
    flex-direction: column;
    justify-content: center;
​
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -webkit-justify-content: center;
}
​
#prev, #next {
    position: absolute;
    top: 0;
    color: #d1d1d1;
    font-size: 70px;
    text-decoration: none;
    padding: 20px;
}
​
#prev {
    left: 0;
}
​
#next {
    right: 0;
}
​
svg {
    margin: auto;
}
​
@font-face {
    font-family: 'FontAwesome';
    src: url('/animations/fonts/fontawesome-webfont.eot?v=4.2.0');
    src: url('/animations/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('/animations/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('/animations/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('/animations/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-twitter:before {
    content: "\f099";
}
.fa-github:before {
    content: "\f09b";
}
.fa-th:before {
    content: "\f00a";
}
​
footer {
    text-align: center;
    margin-bottom: 25px;
}
​
a {
    color: #d1d1d1;
    text-decoration: none;
    padding: 10px;
}
​
</style>
​
<script src="perlin.js"></script>
<script>
var width = 500,
    height = 500,
    n = 25;
​
noise.seed(Math.random());
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("background", "#d1d1d1");
​
var scale = d3.scale.ordinal()
    .domain(d3.range(-n / 2, n / 2 + 1))
    .rangePoints([0, width], 1.3);
​
var data = [];
for (var x = -n / 2; x <= n / 2; x++) {
    for (var y = -n / 2; y <= n / 2; y++) {
        data.push({x: x, y: y});
    }
}
​
var lines = svg.selectAll("path")
    .data(data)
    .enter().append("path")
    .attr("fill", "#111")
    .attr("d", "M-6,2,L12,0L-6,-2Z");
​
d3.timer(function(t) {
    // to appear to stop the timer,uncomment the line below
    // t = 100;
    lines.attr("transform", function(d) {
        var r = 360 * noise.simplex3(d.x / 60, d.y / 60, t / 7000);
        return "translate(" + [scale(d.x), scale(d.y)] + ")rotate(" + r + ")";
    });
});
​
​
</script>
    