Old school D3 from simpler times

All examples By author By category About

lmelgar

Full window Github gist

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>

<style type="text/css">
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
    body {
        font-family: "Open Sans", sans-serif;
        font-weight: 300;
        padding: 50px;
        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;
    			}
    .axis text {
      font-size: 12px;
    }
    .selected {
      background-color: #B6E3CB;
    }
    .unfocused {
      opacity: 0.5;
    }
    .tooltip {
        position: absolute;
        z-index: 10;
      }
    .tooltip p {
      width: initial;
      font-family: "Open Sans", sans-serif;
      line-height: 1.4;
      color: black;
      font-size: 13px;
      background-color: rgba(255,255,255,0.8);
      border: rgba(230,230,230,1) 1px solid;
      padding: 5px 7px 5px 7px;
     }
    </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 = 500;
    var height = 500;
    var margin = {top: 50, right: 10, bottom: 50, left: 50};
    var dotRadius = 6;
    var xScale = d3.scale.linear()
								.range([margin.left, width - margin.right - margin.left]);
    var yScale = d3.scale.linear()
      					.range([height - margin.bottom, margin.top]);
    var xAxis = d3.svg.axis()
      							.scale(xScale)
      							.orient("bottom")
      							.ticks(8);  // fix this to a good number of ticks for your scale later.
    var yAxis = d3.svg.axis()
      							.scale(yScale)
      							.orient("left")
                    .ticks(8);
    var tooltip = d3.select("body")
                    .append("div")
                    .attr("class", "tooltip");
        //setup the svg
    var vis = d3.select("#chart").append("svg");
    var svg = vis
            .attr("width", width)
            .attr("height", height); // adding some random padding
        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) {
                redraw(data1);
                var thisButton = d3.select(this);
                d3.selectAll("button").classed("selected", false);
                thisButton.classed("selected", true);
            });
        d3.select("#data2")
            .on("click", function(d,i) {
                redraw(data2)
                  var thisButton = d3.select(this);
                  d3.selectAll("button").classed("selected", false);
                  thisButton.classed("selected", true);
            });
        //make the dots
        redraw(data1);
        //TODO: make the button for data1 look selected when the page loads.
    // This function is used to draw and update the data. It takes different data each time.
    function redraw(data) {
        xScale.domain([
          d3.min(data, function(d) {
            return +d.x;
          }) -3,
          d3.max(data, function(d) {
            return +d.x;
          }) +3
        ]);
        yScale.domain([
          d3.min(data, function(d) {
            return +d.y;
          }) -3,
          d3.max(data, function(d) {
            return +d.y;
          }) +3
        ]);
        var circles = svg.selectAll("circle")
              .data(data, function(d) { return d.country });
        circles
            .enter()
            .append("circle")
            /*.attr("cx", function (d){
                return xScale(+d.x);
            })
            .attr("cy", function (d){
                return yScale(+d.y);
            })*/
            .attr("class", "dots")
            .attr("fill", function(d) {
              if(d.region === "Europe") {
                return "#E3B6CE";
              }
              if(d.region === "Asia") {
                return "#E3E2B6";
              }
              else {
                return "#B6B7E3";
              }
            });
        circles
    				.transition()
    				.duration(1000)
    				.ease("linear")
            .attr("cx", function(d) {
    									return xScale(+d.x);
    									// return the value to use for your x scale here
    								})
    				.attr("cy", function(d) {
    									return yScale(+d.y);
    								})
    			  .attr("r", function() {
    										return dotRadius;
    								});
        circles
            .exit()
            .transition()
            .duration(700)
            .remove();
         svg.select(".x.axis")
            .transition()
            .duration(1000)
            .call(xAxis);
           // Update Y Axis
         svg.select(".y.axis")
               .transition()
               .duration(1000)
               .call(yAxis);
        //TODO: Fill this in with scatter plot enter/update/exit stuff including transitions.
        // Include axes that transition.
        d3.selectAll("circle")
            .on("mouseover", mouseoverFunc)
            .on("mouseout", mouseoutFunc)
            .on("mousemove", mousemoveFunc);
            function mouseoverFunc(d) {
             // line styling:
             // this is the g element. select it, then the line inside it!
             //console.log(d, this);
             d3.selectAll("circle").classed("unfocused", true);
             // now undo the unfocus on the current line and set to focused.
             d3.select(this).classed("unfocused", false).classed("focused", true);
             tooltip
               .style("display", null) // this removes the display none setting from it
               .html("<p><b>" + d.country + "</b></br>" + d.region + "</p>");
            }
            function mouseoutFunc() {
               // this removes special classes for focusing from all lines. Back to default.
               d3.selectAll("circle").classed("unfocused", false).classed("focused", false);
               tooltip.style("display", "none");  // this sets it to invisible!
            }
            function mousemoveFunc(d) {
             //console.log("events", window.event, d3.event);
             tooltip
               .style("top", (d3.event.pageY - 10) + "px" )
               .style("left", (d3.event.pageX + 10) + "px");
            }
      }; // end of draw function
      d3.select("button#data1").classed("selected", true);
</script>
 </body>
</html>

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