D3.js Requirement

by devangkantharia

HTML

<p id="title">10,000 Steps Challenge</p>
    <p>Hover to see your steps</p>
    <div id="sidebar">
        <div id="legend"></div>
    </div>
    <div id="main">
        <div id="chart">
            <div id="explanation" style="visibility: hidden;">
                <span id="steps"></span>
                <br/> Steps
            </div>
        </div>
    </div>

CSS

#main {
    float: right;
    width: 300px;
}

#chart path {
    stroke: #fff;
}

#explanation {
    text-align: center;
    z-index: -1;
}

#title {
    font-size: 2.5em;
}

#steps {
    font-size: 2.5em;
}

#sidebar {
    float: left;
    width: 200px;
}

#legend {
    padding: 10px 0 0 3px;
}

#legend text {
    font-weight: 600;
    fill: #fff;
}

JavaScript

//set up some basic data
var data = {
    "name": "Compass Steps",
    "children": [{
        "name": "The Walking Dev",
        "children": [{
            "name": "Week 1",
            "size": 300000
        }, {
            "name": "Week 2",
            "size": 200000
        }, {
            "name": "Week 3",
            "size": 350000
        }, {
            "name": "Week 4",
            "size": 400000
        }]
    }, {
        "name": "The Street Walkers",
        "children": [{
            "name": "Week 1",
            "size": 100000
        }, {
            "name": "Week 2",
            "size": 250000
        }, {
            "name": "Week 3",
            "size": 375000
        }, {
            "name": "Week 4",
            "size": 400000
        }]
    }, {
        "name": "Pinot Gris",
        "children": [{
            "name": "Week 1",
            "size": 70545
        }, {
            "name": "Week 2",
            "size": 180345
        }, {
            "name": "Week 3",
            "size": 234123
        }, {
            "name": "Week 4",
            "size": 265889
        }]
    }]
};

//add an svg canvas to the page
var width = 700,
    height = 700,
    radius = Math.min(width, height) / 2,
    hue = d3.scale.category10();

var luminance = d3.scale.sqrt()
    .domain([0, 1e6])
    .clamp(true)
    .range([90, 50]);

var svg = d3.select("body").append("svg")
    .attr("width", width + 20)
    .attr("height", height + 20)
    .append("g")
    .attr("id", "container")
    .attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");

var circle = svg.append("circle")
    .attr("r", radius)
    .style("opacity", 0);


var partition = d3.layout.partition()
    .sort(null)
    .size([2 * Math.PI, radius * radius])
    .value(function(d) {
        return d.size;
    });

var arc = d3.svg.arc()
    .startAngle(function(d) {
        return d.x;
    })
    .endAngle(function(d) {
        return d.x + d.dx;
    })
    .innerRadius(function(d)...