D3 Fire Hose of Data

by wittnl

HTML

<div>
    <p>Sample Data:</p>
    <pre>[{"x":66,"y":63},{"x":6,"y":87},{"x":23,"y":91},{"x":88,"y":85},{"x":83,"y":83},{"x":95,"y":17},{"x":19,"y":13},{"x":60,"y":49},{"x":78,"y":19},{"x":79,"y":69},{"x":22,"y":70},{"x":92,"y":33},{"x":72,"y":65},{"x":96,"y":80},{"x":1,"y":98},{"x":16,"y":43},{"x":85,"y":94},{"x":13,"y":25},{"x":25,"y":76},{"x":81,"y":26},{"x":95,"y":29},{"x":46,"y":40},{"x":55,"y":100},{"x":72,"y":64},{"x":98,"y":25},{"x":43,"y":22},{"x":81,"y":85},{"x":42,"y":21},{"x":86,"y":9},{"x":26,"y":36},{"x":2,"y":20},{"x":48,"y":59},{"x":6,"y":5},{"x":6,"y":96},{"x":32,"y":90},{"x":18,"y":85},{"x":97,"y":92},{"x":84,"y":17},{"x":22,"y":40},{"x":60,"y":92},{"x":55,"y":30},{"x":75,"y":32},{"x":90,"y":59},{"x":74,"y":81},{"x":64,"y":38},{"x":81,"y":16},{"x":73,"y":87},{"x":25,"y":13},{"x":92,"y":15},{"x":57,"y":64},{"x":78,"y":83},{"x":8,"y":77},{"x":10,"y":62},{"x":45,"y":52},{"x":35,"y":9},{"x":27,"y":1},{"x":7,"y":45},{"x":96,"y":61},{"x":83,"y":58},{"x":63,"y":23},{"x":81,"y":73},{"x":28,"y":91},{"x":85,"y":64},{"x":57,"y":22},{"x":86,"y":26},{"x":28,"y":14},{"x":60,"y":81},{"x":94,"y":42},{"x":13,"y":25},{"x":32,"y":95},{"x":98,"y":89},{"x":37,"y":29},{"x":44,"y":73},{"x":67,"y":45},{"x":56,"y":12},{"x":6,"y":10},{"x":83,"y":17},{"x":23,"y":64},{"x":76,"y":17},{"x":15,"y":42},{"x":84,"y":15},{"x":70,"y":29},{"x":33,"y":28},{"x":71,"y":78},{"x":92,"y":60},{"x":32,"y":15},{"x":76,"y":5},{"x":18,"y":17},{"x":65,"y":50},{"x":18,"y":24},{"x":89,"y":70},{"x":22,"y":74},{"x":16,"y":38},{"x":48,"y":2},{"x":41,"y":61},{"x":9,"y":82},{"x":75,"y":56},{"x":51,"y":9},{"x":32,"y":1},{"x":23,"y":80}]</pre>
    <textarea id="data" placeholder="Paste that data!"></textarea>
</div>
<svg></svg>

CSS

svg { 
    border: 1px solid black;
}

JavaScript

var svg = d3.select("svg")
    .attr("width", 400)
    .attr("height", 400);

d3.select("#data")
    .on("input", plotThatData);

function randomColor() {
    return '#'+Math.floor(Math.random()*16777215).toString(16);
}

function plotThatData() { 
    
    var json = JSON.parse(d3.event.target.value);
    
    var newPoints = svg.append("g").selectAll("circle").data(json);
        
    newPoints.enter().append("circle")
            .attr("cx", function (d) { return d.x * 4; })
            .attr("cy", function (d) { return d.y * 4; })
            .attr("r", 5)
            .attr("opacity", 0)
            .style("fill", randomColor())
            .transition()
            .delay( function(d, i) {
                return i * 5;
            })
            .ease("circle")
            .attr("opacity", 1);
}