block by nivas8292 d89bd5f03508a3470d70

Scatter Plot - Donut sales

Full Screen

index.html

<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>

main.css

body, html {
    margin:0;
    padding:0;
    font-family:"Arial", sans-serif;
    font-size:0.95em;
    text-align:center;
}

#chart {
    background-color:#F5F2EB;
    border: 1px solid #CCC;
}

.bar {
    fill:purple;
    shape-rendering:crispEdges;
}

.bar-label {
    text-anchor:end;
    fill:white;
}

.axis path,
.axis line {
    fill:none;
    stroke:#000;
    shape-rendering:crispEdges;
}

.gridline path,
.gridline line {
    fill: none;
    stroke: #ccc;
    shape-rendering: crispEdges;
}

.trendline {
    fill: none;
    stroke: #ccc;
    stroke-width: 2;
    /*stroke-dasharray:10;*/
}

.area {
    fill: #ccc;
    stroke: #ccc;
    opacity: 0.25;
}

.donut {
    opacity:0.1;
}
.axis-label {
    text-anchor: middle;
}
.chart-header {
    text-transform: capitalize;
    font-size: 110%;
}
.temperature {
    stroke:#95cddf;
    stroke-width:2px;
}

.rain {
    fill:none;
    stroke:#cc627a;
    stroke-width:0.5;
}

#cursor {
    stroke: black;
}

survey_data.csv

age,responses,glazed,jelly,powdered,sprinkles
18,7,3.14,4.43,2.43,3.86
19,3,3,3.67,2.67,4
20,3,2,4,2.33,4.33
21,2,3.5,4.5,1,3.5
22,6,2.83,3.5,1.83,4.5
23,4,3.25,4.75,2.25,3.5
25,2,1.5,4,2.5,4
26,3,1.67,3,1.33,4
27,2,2.5,4,1,4.5
28,3,3,4.33,1.33,4.33
29,1,5,4,1,4
30,1,5,5,2,5
31,4,1.5,4.5,3,4.75
32,3,3.67,3.33,1.67,4.67
33,2,2,4.5,1,5
34,4,2.75,3.75,2.5,4.5
35,4,4,3,2.75,4.25
36,2,1.5,3,4,4
37,2,3,3,3.5,4
39,3,4,2,3.33,4.67
40,2,3.5,3,4,4.5
41,4,2.75,2.75,4,4.25
42,4,2.25,2.5,1.75,4.25
43,1,1,2,1,5
44,3,2,3,3.67,3.33
46,3,3.33,2.33,3.33,3.33
47,4,2.25,4,2.75,3
48,4,3.75,2,3,2.75
49,4,2.75,2,3.75,3.25
51,3,2.67,2.67,1.67,3.67
52,2,2.5,2.5,4,3
53,3,3,3.67,4.67,2.67
54,2,5,5,5,3.5
55,3,2.33,1.67,2.33,3.33
56,1,3,2,3,3
57,1,2,2,2,4
59,4,1.25,2,3,1.75
60,2,2.5,2.5,4,2.5
61,3,2.33,2.33,2.67,3
62,4,2.25,2.5,3.75,3
63,2,1.5,3,3,2
64,5,2,3,3.4,2.4
65,2,2,1,4.5,2
66,3,2,1.67,4,1.67
67,4,1.5,1.75,3.75,2.25
68,4,2,2.5,4.25,2
70,1,3,2,3,3
71,3,2.33,2.67,4.33,2.33
72,4,3,2.5,3.75,2
73,2,2,2.5,4.5,2.5
74,2,3,2,4,1.5