StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There is a fiddle to accompany this code: <a href="http://jsfiddle.net/GyWpN/13/" rel="nofollow">http://jsfiddle.net/GyWpN/13/</a></p> <p>Crude, but the elements are there.</p> <ol> <li><p>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).</p> <p>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.</p></li> <li><p>How to use this data with d3.min() and d3.max()?</p> <p>See code below </p></li> <li><p>How to use this data to define the scaling for X and Y axis, as well?</p> <p>See code below </p> <pre><code>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) } ); </code></pre></li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload