Icelandic earthquakes (D3)

<!DOCTYPE html>
<html>
<head>
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.csv.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.time.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>  
    <script type="text/javascript" src="svg_pan.js"></script>
    <script type="text/javascript" src="svg_map.js"></script>
  
     <STYLE> 
     
     @import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css");
     
        .ui-slider {
            height:15px;
            margin-top:5px}
     
        .ui-slider .ui-slider-handle{
            width:10px; 
            height:20px; 
        }
        .slider {
            text-align:center;
            font-size:small;
        }
        
        #map {
            height:60%;
        }

body, .ui-widget {
  font: 14px Helvetica Neue;
}

path {
  fill: #ccc;
  stroke: #fff;
}

</STYLE>
</head>
  
<body>
    <img id="play"  alt="Play">
    <div id="date_control">
        <div id="datelabel">Loading CSV data...</div>
        <div id="date_slider"></div>
        <div id="dateLegend"></div>
     </div>
    <div id="map"></div>
    <div id="speed_slider" class="slider">Speed: <span>0</span></div>
    <div id="size_slider" class="slider">Size: <span>0</span>x</div>
    <div id="delay_slider" class="slider">Fade: <span>0</span> days</div>
    
    <script type="text/javascript">

// Variables
        var depth = d3.scale.linear().range(["green","red"]).domain([0,10]).clamp(true),
            dateFormat = d3.time.format("%Y-%m-%d"),
            timer = eqData = dateScale = currentDate = null,
            currentDate = null,
            speed = 1,
            delay = 30,
            size = 1;
        
        var msDay = 1000*60*60*24;

svg=d3.select("#map")
            .append("svg:svg")
            
            
            
        map=svg_map(svg,{x:0,y:0,width:100,api_key:"3eb45b95929d472d8fe4a2a5dafbd314",update_delay:250});
        svg.attr("viewBox","40.6735 21.4144 13.2496 6.90081");
        svg.call(svg_interact);
        drawLayer = svg.append("svg:g").attr("class","drawLayer")

// Create sliders
        
        $("#speed_slider").slider({min:0.1,max:10,step:0.1,value:speed,animate:true,slide:change_speed,create:change_speed()})
        $("#size_slider").slider({min:0.1,max:10,step:0.02 ,value:size,animate:true,slide:change_size,create:change_size()})
        $("#delay_slider").slider({min:1,max:40,step:1 ,value:delay,animate:true,slide:change_delay,create:change_delay()})

// Play/stop button

buttonImg={'play':'data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURczMzNLS0tPT09XV1ePj4+Tk5OXl5ebm5vX19fb29vf39/j4+Pn5+f7+/v///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJebCpAAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjQ+jcx2AAAAcklEQVQoU23R0RKFIAgE0DVrzYr+/3PTiQC9d5/gwIyj4hYuCMmUG7KUK6aWJOA6WGtWIs121Qwo0oftBG3gGtA1oumAn46o2rC+6ZeilY5qfW74WcfjDahFKw3dAtpe30z7OWXP2DgjN0gq9eeR/33HAxBHDTAV3PLIAAAAAElFTkSuQmCC',
                'stop':'data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURczMzNLS0tPT09XV1ePj4+Tk5OXl5ebm5vX19fb29vf39/j4+Pn5+f7+/v///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJebCpAAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjQ+jcx2AAAAXklEQVQoU5WR6wrAIAhGP7tobtn7P26xYLQarJ1fesALimLsMODZCsxJHlEhA4eHa0lg0OyyemCRuU34K/tSvWoMPqVe9PI73pfHQuuzLSmdE8kj8iw5wkh0OfLbOyryQAz61SueyQAAAABJRU5ErkJggg=='};

function nextFrame() {
           currentDate+=speed;
           if (currentDate > maxDate) buttonPress(true)
           $("#date_slider").slider("value",currentDate)
           change_date();
        }

button = d3.select("#play")
                .attr("src",buttonImg['play'])
                .on("click",buttonPress);

// Data-processing and datelegend/slider
        
        d3.csv("111010eq.csv",function(eq) {

// Process the data

eq.map(function(d,i) {  
                eq[i].date = new Date(d.dags.slice(0,4),d.dags.slice(4,6),d.dags.slice(6,8))
                eq[i].dateNo =Math.floor( +eq[i].date / msDay)
            });
            
            eqData = d3.nest()
                .key(function(d) { return d.dateNo})
                .entries(eq);
            
            dates=eqData.map(function(d) { return +d.key})
            minDate = +d3.min(dates);
            maxDate = +d3.max(dates);
            currentDate = minDate;
            
            // Create the date-slider
            
            $("#date_slider").slider({min:minDate,max:maxDate,value:minDate,step:1,slide:change_date,create:change_date()})
            
            // Create the date-axis
            
            dateScale = d3.time.scale().domain([new Date(+minDate*msDay),new Date(+maxDate*msDay)]).range([0,$("#date_control").width()])
            
            dateLegend = d3.select("#dateLegend").append("svg:svg")
                .style("height","30")
                    .style("background-color","white")
                    .style("border-style","none")
           
            axis = dateLegend.append("svg:g").attr("id","axis")
                    .selectAll("*")
                    .data(dateScale.ticks(11))
                    .enter()
                    .append("svg:g");
                    
        
            axis.append("svg:line")
                .attr("y0",0)
                .attr("y1",5)
                .style("stroke","black");
                
            axis.append("svg:text")
                .attr("y", 5)
                .attr("dy", "1em")
                .attr("text-anchor", "middle")
                .text(dateScale.tickFormat(11));
            
            // Plot activity as red circles
           
            bigActivity = dateLegend.append("svg:g").attr("id","bigActivity")
                .selectAll("circle")
                .data(eq.filter(function(d) { return d.ml > 5}))  // Filter earthquakes larger than 5
                .enter()
                    .append("svg:circle")
                    .attr("cy",10)
                    .attr("r",5)
                    .attr("opacity",0.15)
                    .style("fill","red")
        
            update_axis();
            d3.select(window).on("resize",update_axis);

});
        
        
        function update_axis() {
            dateScale = d3.time.scale().domain([new Date(+minDate*msDay),new Date(+maxDate*msDay)]).range([0,$("#date_control").width()])
            dateLegend.selectAll("line").attr("x1",dateScale).attr("x2",dateScale)
            dateLegend.selectAll("text").attr("x",dateScale)
            dateLegend.selectAll("circle").attr("cx",function(d) {return dateScale(d.date)})
        }
       
        // The main chart function
        
        function redraw() {
            groups= drawLayer.selectAll("g")
                .data(eqData.filter( function (d) { return (d.key  <= currentDate  && d.key > (currentDate-delay))}),function(d) { return +d.key;});

groups.exit().remove()
            groups.enter()
                .append("svg:g")
                .attr("id",function(d) { return d.key})
                .selectAll("circle")
                .data(function(d) { return d.values})
                .enter()
                    .append("svg:circle")
                    .attr("cx",function(d) { return map.lng2map(d.lng)})
                    .attr("cy",function(d) { return map.lat2map(d.lat)})    
                    .style("fill",function(d) { return depth(d.dypi)})
                    .attr("desc",function(d) { return d.lng+" "+d.lat}).style("stroke","black").style("stroke-width",0.0005)
                    .attr("r",function(d) { return Math.pow(+d.ml,2)*0.01*$("#size_slider").slider("value")});
                        
            groups.style("opacity",function(d) { return 0.4-(currentDate-d.key)/delay*0.4}); 
       
        }
        
    </script>
</body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

Modified http://mbostock.github.com/d3/d3.csv.js to a secure url

Modified http://mbostock.github.com/d3/d3.time.js to a secure url

Modified http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js to a secure url

Modified http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js to a secure url

https://mbostock.github.com/d3/d3.js

https://mbostock.github.com/d3/d3.csv.js

https://mbostock.github.com/d3/d3.time.js

https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js