Week8: Scatter Homework

forked from hmader's block: Week8: Scatter Homework

<!DOCTYPE html>

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

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

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>

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