D3 Examples - Exercise 5 for Data Visualizations and Infographics with D3

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Scatter Plot</title>
        <link href='https://fonts.googleapis.com/css?family=Raleway:400,300' rel='stylesheet' type='text/css'>
        <style type="text/css">
            body {
                background-color: whitesmoke;
                font-family: 'Raleway', Helvetica, sans-serif;
                font-weight: 300;
            }
            h1 {
                font-weight: 400;
                line-height: 1.5em;
                border-bottom: 1px solid gray;
            }
            svg {
                background-color: mistyrose;
                width: 75%;
            }
            circle:hover {
                fill: rebeccapurple;
            }
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            .axis text {
                font-size: 11px;
            }
            .y.axis path,
            .y.axis line {
                opacity: 1;
            }
            /*.y.axis text {
                -moz-transform: rotate(-25deg) translate(0, -0.5em);-ms-transform: rotate(-25deg) translate(0, -0.5em);-o-transform: rotate(-25deg) translate(0, -0.5em);-webkit-transform: rotate(-25deg) translate(0, -0.5em);transform: rotate(-25deg) translate(0, -0.5em);
                -moz-transform-origin: top right;-ms-transform-origin: top right;-o-transform-origin: top right;-webkit-transform-origin: top right;transform-origin: top right;
            }*/
​
        </style>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    </head>
    <body>
​
        <h1>Relationship between Obesity and Diabetes Rates in California Counties</h1>
        <p>Hover over a dot for more information!</p>
​
        <svg id="bar-chart" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid">
            <!--  -->
        </svg>
​
        <script type="text/javascript">
            var svg1 = d3.select("svg"),
                h = document.getElementById('bar-chart').scrollHeight,
                w = document.getElementById('bar-chart').scrollWidth,
                padding = [50, 20, 20, 120],
                yScale = d3.scale.linear().range([ padding[0], h - padding[2] ]),
                xScale = d3.scale.linear().range([padding[3], w - padding[1] ]),
                xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickFormat(d3.format(".1%")),
                yAxis = d3.svg.axis().scale(yScale).orient("left").tickFormat(d3.format("%")),
                xOffset = 10,
                yOffset = xOffset;
​
            //Load in contents of CSV file and create a bar graph
            d3.csv("CA-diabetes-data.csv", function(data) {
​
                var xVal, xVal2, yVal, circles;
​
                // Define columns in CSV associated with x- and y- axes
                xVal = "Diabetes Value";
                xVal2 = "Adult obesity Value";
                // xVal2 = "Median household income Value"
                yVal = "County";
​
                // Sort the data in order of ascending Diabetes Value (DV)
                // data.sort(function(a, b) {
                //  return d3.ascending(a["Diabetes Value"], b["Diabetes Value"]);
                // });
                sortUp(data, xVal);
​
                // Define domain for xScale
                xScale.domain([ d3.round(d3.min(data, function(d) {
                                    return d[xVal]
                                }) * 0.9, 2), d3.max(data, function(d){
                    return d[xVal];
                }) ]);
                // Define domain for yScale
                yScale.domain([ d3.max(data, function(d) {
                    return d[xVal2];
                }), d3.round(d3.min(data, function(d) {
                    return d[xVal2];
                }) * 0.9, 2) ]);
​
                // Bind data to rectangles in the SVG element
                // svg1.selectAll("rect")
                //  .data(data)
                //  .enter()
                //  .append("rect");
                circles = bindData(svg1, data, "circle");
​
                // Give rectangles width proportional to DV
                // and position along y axis determined by index
                // svg1.selectAll("rect")
                //  .attr("x", 15)
                //  .attr("y", function(d, i) {
                //      return (i * 10) + 5;
                //  })
                //  .attr("width", function(d) {
                //      return parseInt(d["Diabetes Value"] * 4000);
                //  })
                //  .attr("height", 8)
                //  .attr("fill", "gray")
                //  .append("title")
                //  .text(function(d) {return d["County"];});
                // makeBarChart(rects, xVal, yVal);
                makeScatterPlot(circles, xVal, xVal2);
                circles.append("title").text(function(d) {return d[yVal] + " has a diabetes rate of " + d[xVal] + " and an obesity rate of " + d[xVal2];});
​
                // Add x- and y- axes to container
                addXAxis(svg1);
                addYAxis(svg1);
​
            });
​
            function sortUp(data, s) {
                data.sort(function(a, b) {
                    return d3.ascending( a[s], b[s] );
                });
            }
​
            function bindData(container, dataset, shape) {
                return container.selectAll(shape)
                    .data(dataset)
                    .enter()
                    .append(shape);
            }
​
            function makeBarChart(elements, wBar, hBar) {
                elements.attr("x", padding[3])
                    .attr("y", function(d) {return yScale(d[hBar]);})
                    .attr("width", function(d) {return xScale(d[wBar]);})
                    .attr("height", yScale.rangeBand())
                    .attr("fill", "gray")
                    .append("title")
                    .text(function(d) {return (d[wBar] * 100) + "%";})
            }
​
            function makeScatterPlot(elements, circleX, circleY) {
                elements.attr("cx", function(d) {return xScale(d[circleX]) + xOffset;})
                    .attr("cy", function(d) {return yScale(d[circleY]) - yOffset;})
                    .attr("r", 5) // was function(d) {return xScale(d[circleX]);}
                    .attr("fill", "gray")
            }
​
            function addXAxis(container) {
                container.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(" + xOffset + "," + (h - padding[2]) + ")")
                    .call(xAxis);
            }
​
            function addYAxis(container) {
                container.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + padding[3] + ",-" + yOffset + ")")
                    .call(yAxis);
            }
​
​
        </script>
​
    </body>
</html>
    