D3 Examples

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