Scatter Plot - Donut sales

forked from nivas8292's block: Scatter Plot - Donut sales

<html>
    <head>
        <title>Scatter Plot</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="main.css">
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    </head>
    <body>
        <br>
        <script>
            var w = 800;
            var h = 450;
            var margin = {
                top: 60,
                bottom: 60,
                left: 80,
                right: 20
            };
            var width = w - margin.left - margin.right;
            var height = h - margin.top - margin.bottom;

var chart = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h)
                    .attr("id", "chart")
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xScale = d3.scale.linear()
                    .range([0, width]);

var yScale = d3.scale.linear()
                    .domain([1, 5])
                    .range([height, 0]);

var responseScale = d3.scale.linear()
                    .range([2, 15]);
            var colorScale = d3.scale.category10();

var yAxis = d3.svg.axis()
                    .scale(yScale)
                    .tickSize(20)
                    .ticks(5)
                    .tickFormat(function (d) {
                        return d.toFixed(1);
                    })
                    .orient("left");

var tickValues = [18, 25, 32, 39, 46, 53, 60, 67, 74];
            var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .tickValues(tickValues)
                    .orient("bottom");

var xGridLines = d3.svg.axis()
                    .scale(xScale)
                    .tickValues(tickValues)
                    .tickSize(-height, -height)
                    .tickFormat("")
                    .orient("bottom");

var yGridLines = d3.svg.axis()
                    .scale(yScale)
                    .tickSize(-width, 0, 0)
                    .tickFormat("")
                    .orient("left");

function drawAxis(params) {
                if (params.initialize) {
                    this.append("g")
                            .classed("y gridline", true)
                            .attr("transform", "translate(0,0)")
                            .call(params.axis.gridline.y);

this.append("g")
                            .classed("x gridline", true)
                            .attr("transform", "translate(0, " + height + ")")
                            .call(params.axis.gridline.x);

this.append("g")
                            .classed("y axis", true)
                            .attr("transform", "translate(0,0)")
                            .call(params.axis.y);

this.append("g")
                            .classed("x axis", true)
                            .attr("transform", "translate(0, " + height + ")")
                            .call(params.axis.x);

this.select(".y.axis")
                            .append("text")
                            .classed("y axis-label", true)
                            .attr("transform", "translate(-56," + height / 2 + ") rotate(-90)")
                            .text("Rating");

this.select(".x.axis")
                            .append("text")
                            .classed("x axis-label", true)
                            .attr("transform", "translate(" + width / 2 + ", 48) ")
                            .text("Customer Age");

this.append("g")
                            .append("text")
                            .classed("chart-header", true)
                            .attr("transform", "translate(0,-24)")
                            .text("");
                }
            }

function plot(params) {
                params.scale.x.domain(d3.extent(params.data, function (d) {
                    return d.age
                }));
                params.scale.r.domain(d3.extent(params.data, function (d) {
                    return d.responses
                }));

drawAxis.call(this, params);
                var self = this;
                var donuts = d3.keys(params.data[0]).filter(function (d) {
                    return d !== 'age' && d !== 'responses';
                });

//enter() for <g>
                this.selectAll(".donut")
                        .data(donuts)
                        .enter()
                        .append("g")
                        .attr("class", function (d) {
                            return d;
                        })
                        .classed("donut", true);

//update for <g>
                this.selectAll(".donut")
                        .style("fill", function (d, i) {
                            return params.scale.color(i)
                        })
                        .on("mouseover", function (d, i) {
                            d3.select(this)
                                    .transition()
                                    .style("opacity", 1)
                        })
                        .on("mouseout", function (d, i) {
                            d3.select(this)
                                    .transition()
                                    .style("opacity", 0.1)
                        });

donuts.forEach(function (donut) {
                    var g = self.select('g.' + donut);
                    var arr = params.data.map(function (d) {
                        return {
                            key: donut,
                            value: d[donut],
                            age: d.age,
                            responses: d.responses
                        };
                    });

//enter()
                    g.selectAll('.response')
                            .data(arr)
                            .enter()
                            .append("circle")
                            .classed('response', true);

//update
                    g.selectAll('.response')
                            .attr("r", function (d) {
                                return params.scale.r(d.responses)
                            })
                            .attr("cx", function (d) {
                                return params.scale.x(d.age)
                            })
                            .attr("cy", function (d) {
                                return params.scale.y(d.value)
                            })
                            .on("mouseover", function (d, i) {
                                str = d.key + " donut: ";
                                str += " age: " + d.age;
                                str += " responses: " + d.responses;
                                str += " average rating: " + d.value;
                                d3.select('.chart-header').text(str);
                            })
                            .on("mouseout", function (d, i) {
                                d3.select('.chart-header').text("");
                            });

//exit()
                    g.selectAll('.response')
                            .data(arr)
                            .exit()
                            .remove();
                });
            }

d3.csv("survey_data.csv", function (error, parsed_data) {
                plot.call(chart, {
                    data: parsed_data,
                    scale: {
                        x: xScale,
                        y: yScale,
                        r: responseScale,
                        color: colorScale,
                    },
                    axis: {
                        x: xAxis,
                        y: yAxis,
                        gridline: {
                            x: xGridLines,
                            y: yGridLines,
                        }
                    },
                    initialize: true,
                });
            });

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

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js