nikhilNathwani/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Radio Button</title>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    </head>
    <body>

        <script type="text/javascript">

            var w= 400;
            var h= 200;
            var svg= d3.select("body")
                        .append("svg")
                        .attr("width",w)
                        .attr("height",h)

            var rect= svg.append("rect")
                        .attr("width","100%")
                        .attr("height","100%")
                        .attr("x",0)
                        .attr("y",0)
                        .attr("fill","#CCCCCC")

            //container for all buttons
            var toggleGroup= svg.append("g")
                                .attr("id","toggle")

            //fontawesome button labels
            var labels= ['\uf017','\uf200','\uf183'];

            //groups for each toggle button
            var buttons= toggleGroup.selectAll("g.button")
                                    .data(labels)
                                    .enter()
                                    .append("g")
                                    .attr("class","button")
                                    .style("cursor","pointer")
                                    .on("click",function(d) {
                                        updateButtonColors(d3.select(this), d3.select(this.parentNode))
                                    })
                                    .on("mouseover", function() {
                                        if (d3.select(this).select("rect").attr("fill") != pressedColor) {
                                            d3.select(this)
                                                .select("rect")
                                                .attr("fill",hoverColor);
                                        }
                                    })
                                    .on("mouseout", function() {
                                        if (d3.select(this).select("rect").attr("fill") != pressedColor) {
                                            d3.select(this)
                                                .select("rect")
                                                .attr("fill",defaultColor);
                                        }
                                    })

            var bWidth= 40;
            var bHeight= 25;
            var defaultColor= "red"
            var hoverColor= "#0000ff"
            var pressedColor= "#000077"

            //adding a rect to each toggle button group
            //rx and ry give the rect rounded corner
            buttons.append("rect")
                    .attr("width",bWidth)
                    .attr("height",bHeight)
                    .attr("x",function(d,i) {return 20+(bWidth+10)*i;})
                    .attr("y",10)
                    .attr("rx",5)
                    .attr("ry",5)
                    .attr("fill","red")

            //adding text to each toggle button group, centered
            //within the toggle button rect
            buttons.append("text")
                    .attr("font-family","FontAwesome")
                    .attr("x",function(d,i) {
                        return 20 + (bWidth+10)*i + bWidth/2;
                    })
                    .attr("y",10+bHeight/2)
                    .attr("text-anchor","middle")
                    .attr("dominant-baseline","central")
                    .attr("fill","white")
                    .text(function(d) {return d;})

            function updateButtonColors(button, parent) {
                parent.selectAll("rect")
                        .attr("fill",defaultColor)

                button.select("rect")
                        .attr("fill",pressedColor)
            }

        /*

                var defaultColor= "#AAAAAA"
                var hoverColor= "#0000ff"
                var pressedColor= "#000077"

                var buttons= toggleGroup.selectAll("g.button")
                                        .data(Object.keys(numerator))
                                        .enter()
                                        .append("g")
                                        .attr("class","button")
                                        .attr("id",function(d){return d;})
                                        .style("cursor","pointer")
                                        .on("click",function(d) {
                                            setGraph(d);
                                            updateButtonColors(d3.select(this), d3.select(this.parentNode))
                                            if(!viewport.empty()) {
                                                chart.select("g#yAxis")
                                                    .attr("transform", "transform", "translate("+ xScale(viewport.extent()[0]) +"," + 0 + ")");
                                            }
                                        })
                                        .on("mouseover", function() {
                                            if (d3.select(this).select("rect").attr("fill") != pressedColor) {
                                                d3.select(this)
                                                    .select("rect")
                                                    .attr("fill",hoverColor);
                                            }
                                        })
                                        .on("mouseout", function() {
                                            if (d3.select(this).select("rect").attr("fill") != pressedColor) {
                                                d3.select(this)
                                                    .select("rect")
                                                    .attr("fill",defaultColor);
                                            }
                                        })


                var buttonRects= buttons.append("rect")
                                        .attr("height",25)
                                        .attr("width",40)
                                        .attr("x",function(d,i) {
                                            return main["w"] - 5 - (Object.keys(numerator).length - i)*45;
                                        })
                                        .attr("y",10)
                                        .attr("rx",5)
                                        .attr("ry",5)
                                        .attr("fill",defaultColor)

                //press mins button by default (or whatever I choose the default metric to be)
                toggleGroup.select("g#"+defaultMetric)
                            .select("rect")
                            .attr("fill",pressedColor)


                var icons= {"mins":"\uf017","ws":"\uf200","count":"\uf183"}

                var buttonsText= buttons.append("text")
                                            .attr("font-family","FontAwesome")
                                            .attr("x",function(d,i) {
                                                return main["w"] - 5 - (Object.keys(numerator).length - i)*45 + 20;
                                            })
                                            .attr("y",10+12.5)
                                            .attr("text-anchor","middle")
                                            .attr("dominant-baseline","central")
                                            .attr("fill","white")
                                            .text(function(d) {
                                                return icons[d];
                                            })

*/


        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 Radio Button</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
	</head>
	<body>

	<script type="text/javascript">

	var w= 400;
	var h= 200;
	var svg= d3.select("body")
	.append("svg")
	.attr("width",w)
	.attr("height",h)

	var rect= svg.append("rect")
	.attr("width","100%")
	.attr("height","100%")
	.attr("x",0)
	.attr("y",0)
	.attr("fill","#CCCCCC")

	//container for all buttons
	var toggleGroup= svg.append("g")
	.attr("id","toggle")

	//fontawesome button labels
	var labels= ['\uf017','\uf200','\uf183'];

	//groups for each toggle button
	var buttons= toggleGroup.selectAll("g.button")
	.data(labels)
	.enter()
	.append("g")
	.attr("class","button")
	.style("cursor","pointer")
	.on("click",function(d) {
	updateButtonColors(d3.select(this), d3.select(this.parentNode))
	})
	.on("mouseover", function() {
	if (d3.select(this).select("rect").attr("fill") != pressedColor) {
	d3.select(this)
	.select("rect")
	.attr("fill",hoverColor);
	}
	})
	.on("mouseout", function() {
	if (d3.select(this).select("rect").attr("fill") != pressedColor) {
	d3.select(this)
	.select("rect")
	.attr("fill",defaultColor);
	}
	})

	var bWidth= 40;
	var bHeight= 25;
	var defaultColor= "red"
	var hoverColor= "#0000ff"
	var pressedColor= "#000077"

	//adding a rect to each toggle button group
	//rx and ry give the rect rounded corner
	buttons.append("rect")
	.attr("width",bWidth)
	.attr("height",bHeight)
	.attr("x",function(d,i) {return 20+(bWidth+10)*i;})
	.attr("y",10)
	.attr("rx",5)
	.attr("ry",5)
	.attr("fill","red")

	//adding text to each toggle button group, centered
	//within the toggle button rect
	buttons.append("text")
	.attr("font-family","FontAwesome")
	.attr("x",function(d,i) {
	return 20 + (bWidth+10)*i + bWidth/2;
	})
	.attr("y",10+bHeight/2)
	.attr("text-anchor","middle")
	.attr("dominant-baseline","central")
	.attr("fill","white")
	.text(function(d) {return d;})

	function updateButtonColors(button, parent) {
	parent.selectAll("rect")
	.attr("fill",defaultColor)

	button.select("rect")
	.attr("fill",pressedColor)
	}

	/*

	var defaultColor= "#AAAAAA"
	var hoverColor= "#0000ff"
	var pressedColor= "#000077"

	var buttons= toggleGroup.selectAll("g.button")
	.data(Object.keys(numerator))
	.enter()
	.append("g")
	.attr("class","button")
	.attr("id",function(d){return d;})
	.style("cursor","pointer")
	.on("click",function(d) {
	setGraph(d);
	updateButtonColors(d3.select(this), d3.select(this.parentNode))
	if(!viewport.empty()) {
	chart.select("g#yAxis")
	.attr("transform", "transform", "translate("+ xScale(viewport.extent()[0]) +"," + 0 + ")");
	}
	})
	.on("mouseover", function() {
	if (d3.select(this).select("rect").attr("fill") != pressedColor) {
	d3.select(this)
	.select("rect")
	.attr("fill",hoverColor);
	}
	})
	.on("mouseout", function() {
	if (d3.select(this).select("rect").attr("fill") != pressedColor) {
	d3.select(this)
	.select("rect")
	.attr("fill",defaultColor);
	}
	})



	var buttonRects= buttons.append("rect")
	.attr("height",25)
	.attr("width",40)
	.attr("x",function(d,i) {
	return main["w"] - 5 - (Object.keys(numerator).length - i)*45;
	})
	.attr("y",10)
	.attr("rx",5)
	.attr("ry",5)
	.attr("fill",defaultColor)

	//press mins button by default (or whatever I choose the default metric to be)
	toggleGroup.select("g#"+defaultMetric)
	.select("rect")
	.attr("fill",pressedColor)


	var icons= {"mins":"\uf017","ws":"\uf200","count":"\uf183"}

	var buttonsText= buttons.append("text")
	.attr("font-family","FontAwesome")
	.attr("x",function(d,i) {
	return main["w"] - 5 - (Object.keys(numerator).length - i)*45 + 20;
	})
	.attr("y",10+12.5)
	.attr("text-anchor","middle")
	.attr("dominant-baseline","central")
	.attr("fill","white")
	.text(function(d) {
	return icons[d];
	})

	*/


	</script>
	</body>
	</html>