VI3

Lloyd Decker

3 things learned about D3 ...

Not having an IDE debugger to work with makes troubleshooting difficult
D3 will not error out ... it will simple not do anything
D3 transitions are way cool

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>div.bar {
      display: inline-block;
      width: 20px;
      height: 75px;   /* We'll override this later */
      background-color: teal;
      margin-right: 2px;
      }
      .axis path,
      .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }
      .axis text {
        font-family: sans-serif;
        font-size: 11px;
      }
    </style>
  </head>
  <body>
    <p>This is the VI2 that did not work for me earlier ...</p>
    <script type="text/javascript">
      var w = 500;
      var h = 100;
      var barPadding = 1;
      var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
      var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
      svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
          return i * (w / dataset.length);
          })
        .attr("y", function(d) {
          return h - (d * 4);
        })
        .attr("width", w / dataset.length - barPadding)
        .attr("height", function(d) {
          return d * 4;
        })
        .attr("fill", function(d) {
          return "rgb(0, 0, " + (d * 10) + ")";
        })
      svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) {
          return d;
        })
      .attr("x", function(d, i) {
        return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
        })
      .attr("y", function(d) {
        return h - (d * 4) + 14;
        })
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill", "white")
      .attr("text-anchor", "middle");
    </script>
    <p>This is the Scatterplot from VI3 ...</p>
    <script>
      var dataset = [
                  [ 5,     20 ],
                  [ 480,   90 ],
                  [ 250,   50 ],
                  [ 100,   33 ],
                  [ 330,   95 ],
                  [ 410,   12 ],
                  [ 475,   44 ],
                  [ 25,    67 ],
                  [ 85,    21 ],
                  [ 220,   88 ]
              ];
      var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
      svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
          return d[0];
        })
        .attr("cy", function(d) {
          return d[1];
        })
        .attr("r", function(d) {
          return Math.sqrt(h - d[1]);
        });
      svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) {
          return d[0] + "," + d[1];
        })
        .attr("x", function(d) {
          return d[0];
        })
        .attr("y", function(d) {
          return d[1];
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "red");
    </script>
    <p>This is the Scaling the Scatterplot from VI3 ...</p>
    <script>
      var w = 500;
      var h = 300;
      var dataset = [
                  [ 5,     20 ],
                  [ 480,   90 ],
                  [ 250,   50 ],
                  [ 100,   33 ],
                  [ 330,   95 ],
                  [ 410,   12 ],
                  [ 475,   44 ],
                  [ 25,    67 ],
                  [ 85,    21 ],
                  [ 220,   88 ],
                  [ 600,  150 ]
              ];
      var padding = 20;
      var xScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d) {
          return d[0];
        })])
        .range([padding, w - padding * 2]);
      var yScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d) {
          return d[1];
        })])
        .range([h - padding, padding]);
      var rScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d) {
          return d[1];
        })])
        .range([2, 5]);
      var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
      svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
          return xScale(d[0]);
        })
        .attr("cy", function(d) {
          return yScale(d[1]);
        })
        .attr("r", function(d) {
          return rScale(d[1]);
        });
      svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) {
          return d[0] + "," + d[1];
        })
        .attr("x", function(d) {
          return xScale(d[0]);
        })
        .attr("y", function(d) {
          return yScale(d[1]);
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "red");
    </script>
    <p>This is the Axes from VI3 ...</p>
    <script>
      var w = 500;
      var h = 300;
      var padding = 30;
      var dataset = [];
      var numDataPoints = 50;
      var xRange = Math.random() * 1000;
      var yRange = Math.random() * 1000;
      for (var i = 0; i < numDataPoints; i++) {
        var newNumber1 = Math.round(Math.random() * xRange);
        var newNumber2 = Math.round(Math.random() * yRange);
        dataset.push([newNumber1, newNumber2]);
      }
      var xScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d) {
          return d[0];
        })])
        .range([padding, w - padding * 2]);
      var yScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d) {
          return d[1];
        })])
        .range([h - padding, padding]);
      var rScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d) {
          return d[1];
        })])
        .range([2, 5]);
      var formatAsPercentage = d3.format(".1%");
      var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
        .ticks(5)
        .tickFormat(formatAsPercentage);
      var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .ticks(5)
        .tickFormat(formatAsPercentage);
      var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
      svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
          return xScale(d[0]);
        })
        .attr("cy", function(d) {
          return yScale(d[1]);
        })
        .attr("r", function(d) {
          return rScale(d[1]);
        });
//      svg.selectAll("text")
//        .data(dataset)
//        .enter()
//        .append("text")
//        .text(function(d) {
//          return d[0] + "," + d[1];
//        })
//        .attr("x", function(d) {
//          return xScale(d[0]);
//        })
//        .attr("y", function(d) {
//          return yScale(d[1]);
//        })
//        .attr("font-family", "sans-serif")
//        .attr("font-size", "11px")
//        .attr("fill", "red");
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + (h - padding) + ")")
        .call(xAxis);
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + padding + ",0)")
        .call(yAxis);
    </script>
    <p>This is the Transitions from VI3 ...</p>
    <div id="moveButton"><button>Move</button></div>
    <div id="colorButton"><button>Color</button></div>
    <div id="transparentButton"><button>Transparent</button></div>
    <div id="resetButton"><button>Reset</button></div>
    <script>
      var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
      var mySquare = svg.append("rect")
        .attr("x", 60)
        .attr("y", 60)
        .attr("width", 60)
        .attr("height", 60)
        .style("fill", "red");
      d3.select("#moveButton button").on("click", function() {
        mySquare
          .transition()
          .attr("x", 320)
          .duration(2000)
          .delay(100)
          .ease("elastic")
          .each("end", function() {
            d3.select(this)
              .transition()
              .attr("y", 180)
          });
      })
      d3.select("#colorButton button").on("click", function() {
        mySquare
          .transition()
          .style("fill", "blue");
      })
      d3.select("#transparentButton button").on("click", function() {
        mySquare
          .transition()
          .style("opacity", 0.5);
      })
      d3.select("#resetButton button").on("click", function() {
        mySquare
          .transition()
          .attr("x", 60)
          .attr("y", 60)
          .style("fill", "red")
          .style("opacity", 1);
      })
    </script>
    
  </body>
</html>

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