How to use this data with D3js Scatter Plot?

Question

I have data in following format and want to use with D3.js Scatter Plot:

{
    "0": [
             {"X":"1", "Y":"1"},
             {"X":"2", "Y":"2"},
             {"X":"3", "Y":"3"},
             {"X":"4", "Y":"4"}
         ],
    "1": [
             {"X":"1", "Y":"1"},
             {"X":"2", "Y":"2"},
             {"X":"3", "Y":"3"},
             {"X":"4", "Y":"4"}
         ],
    "2": [
             {"X":"1", "Y":"1"},
             {"X":"2", "Y":"2"},
             {"X":"3", "Y":"3"},
             {"X":"4", "Y":"4"}
         ],
    ...
}

Provided that, I want each 0, 1, 2 and N to be treated as a new series for the Scatter Plot while want to draw dots using X,Y provided in that N (0, 1, 2 or N).

My apparent confusions are around following points:

1. Is this data good for Scatter Plot? if not, then what should be the best graph (an existing example will be great in either case).

2. How to use this data with d3.min() and d3.max()?

3. How to use this data to define the scaling for X and Y axis, as well?

Any help is highly appreciated. Thanks in advance.

Answer 1

There is a fiddle to accompany this code: http://jsfiddle.net/GyWpN/13/

Crude, but the elements are there.

1. Is this data good for Scatter Plot? if not, then what should be the best graph (an existing example will be great in either case).

   This data will work in a scatter plot. The 'best' graph very much depends on what the data represents, and how your users will interpret it.

2. How to use this data with d3.min() and d3.max()?

   See code below

3. How to use this data to define the scaling for X and Y axis, as well?

   See code below

   var myData = {
   "0": [   {"X":"1", "Y":"1"},
            {"X":"2", "Y":"2"},
            {"X":"3", "Y":"3"},
            {"X":"4", "Y":"4"}  ],
   "1": [   {"X":"1", "Y":"2"},
            {"X":"2", "Y":"3"},
            {"X":"3", "Y":"4"},
            {"X":"4", "Y":"5"}  ],
   "2": [   {"X":"1", "Y":"7"},
            {"X":"2", "Y":"6"},
            {"X":"3", "Y":"5"},
            {"X":"4", "Y":"4"}  ]};
   
   var width = 625,
       height = 350;
   
   // A way to look more easily across all 'inner' arrays
   var myDataDrill = d3.values( myData );
   
   var x = d3.scale.linear()
       .domain([0, 
         // max over all series'
         d3.max( myDataDrill, function(d) { 
             // within a series, look at the X-value
             return d3.max( d, function(v) { return v.X } )  
   } ) ])
       .range([0, width]);
   
   var y = d3.scale.linear()
       .domain([0, d3.max( myDataDrill, function(d) { 
         return d3.max( d, function(v) { return v.Y } ) } )])
       .range([height, 0]);
   
   var svg = d3.select("body").append("svg")
       .attr("width", width)
       .attr("height", height)
       .append("g");
   
   var series = svg.selectAll( "g" )
       // convert the object to an array of d3 entries
       .data( d3.map( myData ).entries() )
       .enter()
       // create a container for each series
       .append("g")
       .attr( "id", function(d) { return "series-" + d.key } );
   
   series.selectAll( "circle" )
      // do a data join for each series' values
      .data( function(d) { return d.value } )
      .enter()
      .append("circle")
       .attr( "cx", function(d) { return x(d.X) } )
       .attr( "r", "10" )
       .attr( "cy", function(d) { return y(d.Y) } );
   

Answer 2

I'm new to D3 to but I can direct you to alignedleft his tutorials are really helpfull and your questions accept from key,value-objects are explained.