D3 Examples - Insight Data Visualization Workshop

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      body {
        font: 20px sans-serif;
        fill: #444;
      }
​
      .axis path,
      .axis line {
        fill: none;
        stroke: grey;
        shape-rendering: crispEdges;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
      // Setting the margin, width, and height.
      var margin = { top: 20, right: 20, bottom: 50, left: 100 };
      var width = 960 - margin.left - margin.right;
      var height = 500 - margin.top - margin.bottom;
​
      // Creating the x scale.
      var x = d3.scale.linear()
        .range([0, width]);
​
      // Creating the y scale.
      var y = d3.scale.linear()
        .range([height, 0]);
​
      // Built in d3 color function.
      var color = function () { return "#808080"; };
​
      // Function which draws the x axis.
      var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
​
      // Function which draws the y axis.
      var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");
​
      // Drawing the svg.
      var svg = d3.select("#chart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
      d3.csv("country.csv", function (data) {
        
        x.domain(d3.extent(data, function (d) { return d.median_age; }));
        y.domain(d3.extent(data, function (d) { return d.edu_index; }));
​
        // Creating the x axis.
        svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
          .append("text")
          .attr("class", "x label")
          .attr("x", function () { return width/2; })
          .attr("y", 30)
          .attr("dy", ".71em")
          .style("text-anchor", "middle")
          .text("Median Age");
​
        // Creating the y axis.
        svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
          .append("text")
          .attr("class", "y label")
          .attr("transform", "rotate(-90)")
          .attr("x", -height/2)
          .attr("y", -60)
          .attr("dy", ".71em")
          .style("text-anchor", "middle")
          .text("Education Index");
​
        // Creating clipPath - prevents circles from
        // being drawn outside the chart
        svg.append("clipPath")
          .attr("id", "chart-area")
          .append("rect")
          .attr("x", 0)
          .attr("y", 0)
          .attr("width", width)
          .attr("height", height);
​
        // Creating the bubble chart.
        var circles = svg.append("g")
          .attr("id", "circles")
          .attr("clip-path", "url(#chart-area)")
          .selectAll(".country").append("circle")
          .data(data)
          .enter().append("circle")
          .attr("class", "country")
          .attr("cx", function (d) { return x(d.median_age); })
          .attr("cy", function (d) { return y(d.edu_index); })
          .attr("r", function (d) { return Math.log(d.gdp); })
          .attr("stroke-width", 2)
          .attr("stroke", function () { return "#000000"; })
          .style("fill", function (d) { return color(d.country); })
          .style("opacity", 0.5);
      });
    </script>
  </body>
</html>
    