D3 Examples - Age Distribution in Run For The Parks

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel='stylesheet' type='text/css' href='' />
        <style>
        body {
          font: 10px sans-serif;
        }
​
        .axis path, .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }
​
        rect.bg {
            fill:#fff;
        }
​
        path.area {
            fill: #c6dbef;
        }
​
        path.line {
            stroke: steelblue;
            fill: transparent;
        }
​
        text.title {
            font:20px sans-serif;
            fill: #222;
        }
​
        text.key-title {
            font:bold 16px sans-serif;
            text-anchor:middle;
        }
​
        circle.person-circle {
            fill:#0966ae;
            stroke-width:1;
            stroke:#fff;
        }
        circle.person-circle-highlight {
            fill:#ff740f;
            stroke-width:1;
            stroke:#fff;
        }
        .person text, .person rect {
            display:none;
        }
        .person:hover rect {
            fill:#fff;
        }
        .person:hover text,
        .person:hover rect {
            display:block;
        }
        </style>
    </head>
    <body>
        <script src="https://d3js.org/d3.v2.js"></script>
        <script>
        function pad(number, length) {
            var str = '' + number;
            while (str.length < length) {
                str = '0' + str;
            }
            return str;
        }
        d3.json('results_clean.json', function(values) {
        var mapbox = {
            'Tom MacWright': true,
            'Eric Gundersen': true,
            'Jeff Miccolis': true,
            'William White': true
        };
        values = values.map(function(v) {
            v.mapbox = !!mapbox[v.name];
            return v;
        });
        values.sort(function(a, b) {
            if (a.mapbox) return 1;
            if (b.mapbox) return -1;
        });
        var margin = {top: 10, right: 100, bottom: 30, left: 30},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
        function xfmt(x) {
            if (x > (60 * 60)) {
                var h = Math.floor(x / (60 * 60));
                var m = pad(Math.floor((x % (60 * 60)) / (60)), 2);
                var s = pad(x % 60, 2);
                return [h, m, s].join(':');
            } else {
                var m = pad(Math.floor((x % (60 * 60)) / (60)), 2);
                var s = pad(x % 60, 2);
                return [m, s].join(':');
            }
        }
​
        var x = d3.scale.linear()
            .domain([
            d3.min(values, function(d) { return d.chip_s }),
            d3.max(values, function(d) { return d.chip_s })])
            .range([0, width]);
​
        var y = d3.scale.linear()
            .domain([
            d3.min(values, function(d) { return d.age }),
            d3.max(values, function(d) { return d.age })])
            .range([height, 0]);
​
        var xAxis = d3.svg.axis()
            .scale(x)
            .tickFormat(xfmt)
            .orient("bottom");
​
        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("right");
​
       function zoom() {
            svg.select(".x.axis").call(xAxis);
            svg.select(".y.axis").call(yAxis);
            pos();
        }
​
        var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1,8]).on("zoom", zoom));
​
        svg.append("rect")
          .attr('class', 'bg')
          .attr("width", width)
          .attr("height", height);
​
        var circles = svg.selectAll('g.person')
            .data(values)
            .enter()
            .append('g')
            .attr('class', 'person');
        function pos() {
            circles.attr('transform', function(d) { return 'translate(' + x(d.chip_s) + ',' + y(d.age) + ')'; });
        }
        pos();
​
        circles.append('circle')
            .attr('r', function(d) { return d.mapbox ? 5 : 3; })
            .attr('class', function(d) {
                return d.mapbox ? 'person-circle-highlight' :'person-circle';
            });
​
        circles.append('rect')
            .attr('width',100)
            .attr('height',20)
            .attr('x', 10)
            .attr('y', -10);
​
        circles.append('text')
            .text(function(d) {
                return d.name;
            })
            .attr('dx', 10)
            .attr('dy', 5);
​
        circles.on('mouseover', function(t) {
            circles.sort(function(a, b) {
                if (a == t) return 1;
                return 0;
            });
        });
​
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
​
        svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + width + ", 0)")
            .call(yAxis);
        });
    </script>
    </body>
</html>
​
    