D3 Examples - Dunot Chart Rent

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <title></title>
</head>
<body>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        margin: auto;
        position: relative;
        width: 960px;
    }
​
    text {
        font: 10px sans-serif;
    }
​
    form {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .fixedBlocks{
        width: 50px;
        height: 20px;
        margin: 10px;
        border: darkturquoise 1px solid;
        display: inline-block;
        text-align: center;
        color: #ffffff;
        padding: 2%;
    }
​
    .tooltip {
        position: absolute;
        width: 200px;
        height: 28px;
        pointer-events: none;
    }
​
</style>
<form>
    <label><input type="radio" name="dataset" value="Rent2011" checked> Rent 2011</label>
    <label><input type="radio" name="dataset" value="Rent2016"> Rent 2016</label>
</form>
​
<div class="fixedBlocks" style="background-color: #1f77b4">Maor</div>
<div class="fixedBlocks" style="background-color: #2ca02c">Yael</div>
<div class="fixedBlocks" style="background-color: #ffbb78">Noa</div>
<div class="fixedBlocks" style="background-color: #aec7e8">Ohad</div>
<div class="fixedBlocks" style="background-color: #ff7f0e">Eidan</div>
​
<script>
​
    var width = 960,
            height = 500,
            radius = Math.min(width, height) / 2;
​
    var color = d3.scale.category20();
​
    var pie = d3.layout.pie()
            .value(function(d) { return d.Rent2011; })
            .sort(null);
​
    var arc = d3.svg.arc()
            .innerRadius(radius - 100)
            .outerRadius(radius - 20);
​
    var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
​
    var tooltip = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);
​
    d3.csv("rent.csv", type, function(error, data) {
        var path = svg.datum(data).selectAll("path")
                .data(pie)
                .enter().append("path")
                .attr("fill", function(d, i) { return color(i); })
                .attr("d", arc)
                .on("mouseover", function(d) {
                    tooltip.transition()
                            .duration(200)
                            .style("opacity", .9);
                    tooltip.html(d.data.Name + "<br/> (" + d.data.Rent2011
                    + "," + d.data.Rent2016 + ")")
                            .style("left", (d3.event.pageX + 5) + "px")
                            .style("top", (d3.event.pageY - 28) + "px");
                })
                .on("mouseout", function(d) {
                    tooltip.transition()
                            .duration(500)
                            .style("opacity", 0);
                });
​
​
        d3.selectAll("input")
                .on("change", change);
​
        var timeout = setTimeout(function() {
            d3.select("input[value=\"Rent2016\"]").property("checked", true).each(change);
        }, 2000);
​
        function change() {
            var value = this.value;
            clearTimeout(timeout);
            pie.value(function(d) { return d[value]; }); // change the value function
            path = path.data(pie); // compute the new angles
            path.attr("d", arc); // redraw the arcs
        }
    });
​
    function type(d) {
        d.Rent2011 = +d.Rent2011;
        d.Rent2016 = +d.Rent2016;
        return d;
    }
​
</script>
</body>
</html>
    