webapps/viz/src/main/webapp/resources/scripts/geomap.js
// must be named this way to match earthquake feed
must be named this way to match earthquake feed
must be named this way to match earthquake feed
function show_geo_points(data) {
        var svg = d3.select("#map").select("svg");
        max = data[0].count;
        var quakes = svg.selectAll("circle")
                .data(data);
        var radius = d3.scale.pow()
                .range([2, 12])
                .domain([0, 10]);
        quakes.enter()
                .append("circle")
                .attr("cx", function(d) {
                    var longitude = d.lon;
                    var latitude = d.lat;
                    return projection([longitude, latitude])[0];
                })
                .attr("cy", function(d) {
                    var longitude = d.lon;
                    var latitude = d.lat;
                    return projection([longitude, latitude])[1];
                })
                .attr("r", function(d) {
                    return 0;
                })
                .style("fill", function(d){
                    return getColor(d.count, max);
                })
                .style("fill-opacity", 0)
                .style("stroke", 'rgb(255, 0, 0)')
                .style("stroke-width", "0.5px")
                .style("stroke-opacity", 1)
                .transition()
                .delay(function(d, i) {
                    return i / data.length * 100;
                })
                .duration(100)
                .attr("r", function(d) {
                    return radius(0.01 + Math.log(d.count)/2);
                })
                .style("fill-opacity", 0.25);
        quakes.exit()
                .transition()
                .attr("r", 0)
                .style("fill-opacity", 0)
                .remove();
    }
function show_geo_points ( data ) { var svg = d3 . select ( "#map" ) . select ( "svg" ) ; max = data [ 0 ] . count ; var quakes = svg . selectAll ( "circle" ) . data ( data ) ; var radius = d3 . scale . pow ( ) . range ( [ 2 , 12 ] ) . domain ( [ 0 , 10 ] ) ; quakes . enter ( ) . append ( "circle" ) . attr ( "cx" , function ( d ) { var longitude = d . lon ; var latitude = d . lat ; return projection ( [ longitude , latitude ] ) [ 0 ] ; } ) . attr ( "cy" , function ( d ) { var longitude = d . lon ; var latitude = d . lat ; return projection ( [ longitude , latitude ] ) [ 1 ] ; } ) . attr ( "r" , function ( d ) { return 0 ; } ) . style ( "fill" , function ( d ) { return getColor ( d . count , max ) ; } ) . style ( "fill-opacity" , 0 ) . style ( "stroke" , 'rgb(255, 0, 0)' ) . style ( "stroke-width" , "0.5px" ) . style ( "stroke-opacity" , 1 ) . transition ( ) . delay ( function ( d , i ) { return i / data . length * 100 ; } ) . duration ( 100 ) . attr ( "r" , function ( d ) { return radius ( 0.01 + Math . log ( d . count ) / 2 ) ; } ) . style ( "fill-opacity" , 0.25 ) ; quakes . exit ( ) . transition ( ) . attr ( "r" , 0 ) . style ( "fill-opacity" , 0 ) . remove ( ) ; }
must be named this way to match earthquake feed
must be named this way to match earthquake feed
// get pointer to svg image // handling updates are difficult // http://bost.ocks.org/mike/join/ // http://bl.ocks.org/mbostock/3808234 //Assumption : max value is in first item //console.log(JSON.stringify(data)); // get any existing circles // add new circles for new earthquakes //return radius(d.count); // remove circles for old earthquakes no longer in data