js/SGN/Scatterplot.js

   1 // var data = [
   2 //     {
   3 //         "label": "Dairy Milk",
   4 //         "type": "cadbury",
   5 //         "x_pos": 45,
   6 //         "y_pos": 2
   7 //     }, {
   8 //         "label": "Galaxy",
   9 //         "type": "Nestle",
  10 //         "x_pos": 42,
  11 //         "y_pos": 3
  12 //     }
  13 // ];
  14
  15
  16 function SGND3ScatterPlot(data, div_id, x_label) {
  17     //console.log(data);
  18     var margins = {
  19         "left": 40,
  20         "right": 30,
  21         "top": 30,
  22         "bottom": 30
  23     };
  24
  25     var width = 500;
  26     var height = 500;
  27     var colors = d3.scale.category10();
  28
  29     var svg = d3.select("#"+div_id).append("svg").attr("width", width).attr("height", height).append("g")
  30         .attr("transform", "translate(" + margins.left + "," + margins.top + ")");
  31
  32     var x = d3.scale.linear()
  33         .domain(d3.extent(data, function (d) {
  34         return d.x_pos;
  35     }))
  36         .range([0, width - margins.left - margins.right]);
  37
  38     var y = d3.scale.linear()
  39         .domain(d3.extent(data, function (d) {
  40         return d.y_pos;
  41     }))
  42     .range([height - margins.top - margins.bottom, 0]);
  43
  44     svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + y.range()[0] + ")");
  45     svg.append("g").attr("class", "y axis");
  46
  47     svg.append("text")
  48         .attr("fill", "#414241")
  49         .attr("text-anchor", "end")
  50         .attr("x", width / 2)
  51         .attr("y", height - 35)
  52         .text(x_label);
  53
  54     var xAxis = d3.svg.axis().scale(x).orient("bottom").tickPadding(2);
  55     var yAxis = d3.svg.axis().scale(y).orient("left").tickPadding(2);
  56
  57     svg.selectAll("g.y.axis").call(yAxis);
  58     svg.selectAll("g.x.axis").call(xAxis);
  59
  60     var valInd = svg.selectAll("g.node").data(data, function (d) {
  61         return d.label;
  62     });
  63
  64     var valGroup = valInd.enter().append("g").attr("class", "node")
  65     .attr('transform', function (d) {
  66         return "translate(" + x(d.x_pos) + "," + y(d.y_pos) + ")";
  67     });
  68
  69     valGroup.append("circle")
  70         .attr("r", 5)
  71         .attr("class", "dot")
  72         .style("fill", function (d) {
  73             return colors(d.type);
  74     });
  75
  76     valGroup.append("text")
  77         .style("text-anchor", "middle")
  78         .attr("dy", -10)
  79         .text(function (d) {
  80             return d.label;
  81     });
  82 }
  83