D3 Examples

VI4

##Chart: Scatter Plot

Title: Number of events and Sports conducted in each country with color mapped to Country.

Magnitude Channel:

Position on a common scale

Area

Identity channel:

Color hue

Spatial region

Circles as Mark

X-axis represents the Sports and Y-axis represents th Events.

The property of discriminability is maintained by allowing the viewers to easily differentiate the countries by colors. Viewing at this chart, we can say that India conducts highest number of sports and Greece conducts least number of sports

##Tableau

xxxxxxxxxx
 
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Viz-4</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      .axis path,
      .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }
      .axis text {
        font-family: sans-serif;
        font-size: 11px;
      }
    </style>
  </head>
  <body>
    
    <script>
      var w = 500;
      var h = 300;
      var padding = 30;
      //Temperature in Celsius and Fahrenheit
      var dataset = [ [10, 50,"Greece"],
                      [20, 68,"France"],
                      [30, 86,"US"],
                      [40, 104,"GreatBritain"],
                      [50, 122,"Sweden"],
                      [60, 140,"Belgium"],
                      [70, 158,"Australia"],
                      [80, 176,"India"]
                    ];
      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, 10]);
      var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
        .ticks(5);
      var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .ticks(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]);
        })
        .attr("fill", function(d) {
          if (d[2] == "Greece") {return "pink"}
          else if (d[2] == "France") {return "cyan"}
          else if (d[2] == "US") {return "blue"}
          else if (d[2] == "GreatBritain") {return "green"}
          else if (d[2] == "Sweden") {return "purple"}
          else if (d[2] == "Belgium") {return "orange"}
          else if (d[2] == "Australia") {return "brown"}
          else if (d[2] == "India") {return "red"}
        });
        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", "green");
      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>
  </body>
</html>
    