CODEWITHSUNDEEP
javascriptd3.js
The Old County
The Old County

Reputation: 109

d3.js Series Circle chart

I am looking to create a chart like this -- that shows the various different relationships in a horizontal plane.

enter image description here

So I envision the data will look like this

[{
    "name": "Twitter",
    "vistsperday": "15 billion",
    "employeecount": 450
}, {
    "name": "Facebook",
    "vistsperday": "5 billion",
    "employeecount": 2000
}, {
    "name": "Google",
    "vistsperday": "5 billion",
    "employeecount": 25000
}, {
    "name": "Netflix",
    "vistsperday": "10 billion",
    "employeecount": 2200
}, {
    "name": "Ebay",
    "vistsperday": "8 billion",
    "employeecount": 17700
}, {
    "name": "Klout",
    "vistsperday": "2 billion",
    "employeecount": 45
}]

I have started a jsfiddle here. deriving from https://bost.ocks.org/mike/circles/ - three little circles * Latest fiddle - http://jsfiddle.net/NYEaX/1425/

here is the current structure of the code from the latest fiddle.

//code

        $(document).ready(function() {

  var rawData = [{
    "name": "Twitter",
    "vistsperday": "15 billion",
    "employeecount": 450
  }, {
    "name": "Facebook",
    "vistsperday": "5 billion",
    "employeecount": 2000
  }, {
    "name": "Google",
    "vistsperday": "5 billion",
    "employeecount": 25000
  }, {
    "name": "Netflix",
    "vistsperday": "10 billion",
    "employeecount": 2200
  }, {
    "name": "Ebay",
    "vistsperday": "8 billion",
    "employeecount": 17700
  }, {
    "name": "Klout",
    "vistsperday": "2 billion",
    "employeecount": 45
  }];



  var width = 700;
  var height = 500;
  var margin = {
    top: 20,
    right: 100,
    bottom: 30,
    left: 100
  }

  //serieschart
  var svg = d3.select(".serieschart").append("svg")
    .attr("class", "serieschart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var bluedata = [5000,2000,2000,1600,701,1603];

  //blue layer
    var bluelayer = svg.append("g")
                                .attr("class", "bluelayer")

  var bluecircle = bluelayer.selectAll("circle")
    .data(bluedata);

  bluecircle.enter().append("circle")
    .attr("class", "blue")
    .attr("cy", 60)
    .attr("cx", function(d, i) {
      return (i * 60) + 10;
    })
    .attr("r", function(d) {
      return Math.sqrt(d);
    });

  bluecircle.exit().remove();


  var golddata = [32, 57, 293,31, 455, 296];
    //gold layer
    var goldlayer = svg.append("g")
                                .attr("class", "goldlayer")

  var goldcircle = goldlayer.selectAll("circle")
    .data(golddata);

  goldcircle.enter().append("circle")
    .attr("class", "gold")
    .attr("cy", 60)
    .attr("cx", function(d, i) {
      return (i * 60) + 10;
    })
    .attr("r", function(d) {
      return Math.sqrt(d);
    });

  goldcircle.exit().remove();



});

Upvotes: 0

Views: 579

Answers (2)

The Old County
The Old County

Reputation: 109

I've hooked into place one raw data source to try and control the application.

http://jsfiddle.net/59bunh8u/23/ enter image description here I try altering some of the values -- in-versing them almost to see how the chart adapts - but it starts to tear with the pointers. http://jsfiddle.net/59bunh8u/24/ enter image description here

M-4.78125,125L44.78125,125 75.50572494064927,60

when I altered the path to reduce the L coordinate it nearly fixes the error - its almost like the L part of the path is being plotted incorrectly.

M-4.78125,125L4.78125,125 75.50572494064927,60

Upvotes: 0

mkaran
mkaran

Reputation: 2718

For the first problem: 

 var bluecircle = bluelayer.selectAll("circle")
    .data(bluedata);

otherwise when you get to 

 .attr("cx", function(d, i) {
      return (i * 100) + 10;
    })

the elements that are the same will be represented once in the cx function.

For the second problem, edit your cx e.g. like this:

.attr("cx", function(d, i) {
      return (i * 80) + 10;
    })

http://jsfiddle.net/3ky4wvgm/

Good luck! :)

Upvotes: 1

Related Questions