Time in Process Scatter Chart - Add and Remove

Showcase the enter and exit functions of selection in D3.

by Trever Shick

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.3.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
    url = "https://s3.amazonaws.com/trevershick-experiments/tip.json"
</script>
<div class='form-group'>
    <label for="percentage">Percentage of Data Set</label>
    <select name="percentage" id="percentage">
        <option>1</option>
        <option>10</option>
        <option>25</option>
        <option>75</option>
        <option selected>100</option>
    </select>
    </div>
<div class="well">
    <div id="chart"></div>
</div>

CSS

body {
    font-family:Lato;
}

#chart {
    border:1px solid grey;
    padding:0px;
    margin:0;
    width:100%;
    height:400px;
}
svg {
    display:block;
    width:100%;
    height:100%;
}
.axis {
    font-size:10px;
}
.tooltip b {
    font-size:1.1em;
    color:black;
}
.tooltip {
    color:grey;
    background-color:white;
    border-radius:4px;
    border:1px solid;
    padding: 5px;
    margin:3px;
    position :absolute;
    z-index:10;
    opacity:0;
}
.axis path {
    fill: none;
    stroke: #777;
    shape-rendering: crispEdges;
}
.axis text {
    font-size: 13px;
}

JavaScript

// initialize the chart
var data = null;
var svg = d3.select("#chart").append("svg");

var margin= 20;
var margins = { top: 20, right:20, bottom:20, left:20 },
    w = $(svg).parent().width(),
    h = $(svg).parent().height() - (margins.top + margins.bottom);

function setupTooltipListeners(selection) {
    return selection.on("mouseover", function(d) {
        d3.select(this).attr("stroke","pink");
        d3.select(this).attr("stroke-width",3);
        tooltip.html(tooltipFormatter(d));
        tooltip.transition().call(_.partialRight(fadeIn,10));
    })
    .on("mousemove", function() {
        tooltip.style("top", (event.pageY-10)+"px")
        .style("left",(event.pageX+10)+"px");
    })
    .on("mouseout", function(){
        tooltip.transition().call(fadeOut);
        d3.select(this).attr("stroke","none");
    });
}

function fadeOut(selection, duration) {
    return selection.transition()        
        .duration(duration || 250)      
        .style("opacity",0);
}    

function fadeIn(selection, duration) {
    return selection.transition()        
        .duration(duration || 250)      
        .style("opacity",1);
}    

function fadeOutAndRemove(selection, duration) {
    return fadeOut(selection,duration).remove();
}    

$("#percentage").change(function() {
    var pct = $(this).val();
    var rowsToDrop = (1-(parseInt(pct,10) / 100)) * data.Results.length;
    var partialData = _.dropRight(data.Results, rowsToDrop);
    render(partialData);
});

function rand(min, max) {
    return parseInt(Math.random() * (max-min+1), 10) + min;
}
function rc() {
    var h = rand(1, 360); // color hue between 1 and 360
    var s = 58; // saturation 30-100%
    var l = 32; // lightness 30-70%
    return 'hsl(' + h + ',' + s + '%,' + l + '%)';
}

var tooltip = d3.select("body")
	.append("div")
    .style("border-color", rc())
    .attr("class","tooltip")
	.text("a simple tooltip");

var template = _.template(
    "<b><%=d.Name%></b><br/>"
    + "Days in Process: ...