D3 Examples - Week8: Scatter Homework

xxxxxxxxxx
 
<!DOCTYPE html>
<!-- Modified example from enjalot: https://bl.ocks.org/enjalot/1429426 -->
<html>
​
<head>
    <title>Bar Transition Example</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
​
    <style type="text/css">
        body {
            padding: 50px;
            font-family: sans-serif;
            font-size: 12pt;
        }
        
        button {
            margin: 5px;
            font-size: 15pt;
            padding: 3px;
            cursor: pointer;
        }
        
        input {
            margin: 5px;
            font-size: 15pt;
            padding: 3px;
        }
        
        p {
            width: 500px;
        }
        
        #data1 {
            width: 200px;
            position: absolute;
            left: 600px;
            top: 300px;
        }
        
        #data2 {
            width: 200px;
            position: absolute;
            left: 600px;
            top: 450px;
        }
        
        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
        
        .selected {
            border: 2px solid orange;
        }
    </style>
</head>
​
<body>
    <h2>Homework for Fake Scatter Update</h2>
    <p>Make this fake data work with the enter/update/exit pattern as scatterplots.
        <div id="buttons">
            <button id="data1">Set Data to data 1</button>
            <button id="data2">Set Data to data 2</button>
        </div>
​
        <div id="chart">
        </div>
​
        <script type="text/javascript">
            var data1 = [
                {
                    country: "Belgium",
                    x: 5,
                    y: 24,
                    region: "Europe"
                }, // in data set 2
                {
                    country: "USA",
                    x: 20,
                    y: 43,
                    region: "Americas"
                }, // in data set 2
                {
                    country: "China",
                    x: 55,
                    y: 24,
                    region: "Asia"
                }, // in data set 2
                {
                    country: "Russia",
                    x: 15,
                    y: 30,
                    region: "Asia"
                },
                {
                    country: "France",
                    x: 60,
                    y: 43,
                    region: "Europe"
                }, // in data set 2
                {
                    country: "Chile",
                    x: 89,
                    y: 34,
                    region: "Americas"
                }
    ];
​
            var data2 = [
                {
                    country: "Belgium",
                    x: 5,
                    y: 24,
                    region: "Europe"
                },
                {
                    country: "USA",
                    x: 20,
                    y: 43,
                    region: "Americas"
                },
                {
                    country: "Spain",
                    x: 35,
                    y: 24,
                    region: "Europe"
                },
                {
                    country: "China",
                    x: 55,
                    y: 24,
                    region: "Asia"
                },
                {
                    country: "UK",
                    x: 90,
                    y: 10,
                    region: "Europe"
                },
                {
                    country: "Brazil",
                    x: 40,
                    y: 20,
                    region: "Americas"
                },
                {
                    country: "France",
                    x: 60,
                    y: 43,
                    region: "Europe"
                },
                {
                    country: "Canada",
                    x: 39,
                    y: 66,
                    region: "Americas"
                },
                {
                    country: "Argentina",
                    x: 99,
                    y: 30,
                    region: "Americas"
                }
    ];
​
​
            var width = 400;
            var height = 400;
​
            var margin = {
                top: 20,
                right: 10,
                bottom: 10,
                left: 30
            };
​
​
            var dotRadius = 4;
​
            //setup the svg
            var xScale = d3.scale.linear()
                .range([margin.left, width - margin.left - margin.right]); //--- range is what we are mapping TO, so we want it to be the chart area
​
​
            var yScale = d3.scale.linear()
                .range([height - margin.bottom, margin.top]); //--- range is what we are mapping TO, so we want it to be the chart area
​
            xScale.domain(d3.extent(data1, function (d) {
                return +d.x;
            }));
​
            yScale.domain(d3.extent(data1, function (d) {
                return +d.y;
            }));
​
​
            var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom")
                .ticks(10);
​
            var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");
​
​
​
            var vis = d3.select("#chart").append("svg");
            var svg = vis
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom); // adding some random padding
            svg.append("rect")
                .attr("width", "100%")
                .attr("height", "100%")
                .attr("stroke", "#FFF")
                .attr("fill", "#ebebeb");
​
            svg.append("g")
                .attr("id", "barchart");
            //                .attr("transform", "translate(50,50)");
​
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (height - margin.bottom) + ")")
                .call(xAxis)
​
​
            svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + (margin.left) + ",0)")
                .call(yAxis)
​
​
​
            //setup our ui buttons:
            d3.select("#data1")
                .on("click", function (d, i) {
                 document.getElementById("data2").className = "";
                 this.className = "selected";
                    redraw(data1);
                });
            d3.select("#data2")
                .on("click", function (d, i) {
                 document.getElementById("data1").className = "";
                this.className = "selected";
                    redraw(data2);
                });
​
            //make the dots
​
            //TODO: make the button for data1 look selected when the page loads.
​
            window.onload = function () {
                document.getElementById("data1").className = "selected";
            };
​
            redraw(data1);
​
​
            // This function is used to draw and update the data. It takes different data each time.
​
            function redraw(myData) {
​
                //TODO: Fill this in with scatter plot enter/update/exit stuff including transitions.
​
                var maxX = d3.max(myData, function (d) {
                    return +d.x;
                });
​
                var maxY = d3.max(myData, function (d) {
                    return +d.y;
                });
​
                xScale
                    .domain(d3.extent(myData,function (d) {
                    return +d.x;
                }));
​
                yScale
                    .domain(d3.extent(myData,function (d) {
                    return +d.y;
                }));
​
                var circles = vis.selectAll("circle")
                    .data(myData);
​
                circles.attr("fill", "steelblue");
​
                circles
                    .enter()
                    .append("circle")
                    .attr("fill", "darkorange")
                    .append("title")
                    .text(function (d) {
                        return d.country + " x:" + d.x + ", y: " + d.y;
                    });
​
​
                circles.exit()
                    .transition()
                    .duration(300)
                    .ease("exp")
                    .attr("r", 0)
                    //TODO: what goes here at the end of exit?
                    .remove();
​
                // transition -- move to proper widths and location
                circles.transition()
                    .duration(300)
                    .ease("quad")
                    .attr("cx", function (d) {
                        return xScale(+d.x);
                    })
                    .attr("cy", function (d) {
                        return yScale(+d.y);
                    })
                    .attr("r", dotRadius);
​
                // Include axes that transition.
                // Update the axes - also animated. this is really easy.
                svg.select(".x.axis")
                    .transition()
                    .duration(1000)
                    .call(xAxis);
​
                // Update Y Axis
                svg.select(".y.axis")
                    .transition()
                    .duration(1000)
                    .call(yAxis);
            } // end of draw function
        </script>
</body>
​
</html>
    