Menu
I'm looking for an example of how to draw a scatterplot in D3.js.
I haven't been able to find a simple example by looking through the official D3.js examples (impressive though they are). I just want to know how to:
I did find this example in this D3 reusable library, but it is much more complex than I need, with external files that make it hard to pull out the essential points. Could anyone point me at a simple scatterplot example to get started?
Thanks very much.
408
After adding data, go to the 'Traces' section under the 'Structure' menu on the left-hand side. Choose the 'Type' of trace, then choose '3D Scatter' under '3D' chart type. Next, select 'X', 'Y' and 'Z' values from the dropdown menus. This will create a 3D scatter trace, as seen below.
A Simple Scatter Plot plots one variable against another. A Matrix Scatter Plot plots all possible combinations of two or more numeric variables against each other. A Simple Dot Plot plots one categorical variable or one continuous variable. An Overlay Scatterplot plots two or more pairs of variables.
This should get you started. You can see it in action at http://bl.ocks.org/2595950.
// data that you want to plot, I've used separate arrays for x and y values
var xdata = [5, 10, 15, 20],
ydata = [3, 17, 4, 6];
// size and margins for the chart
var margin = {top: 20, right: 15, bottom: 60, left: 60}
, width = 960 - margin.left - margin.right
, height = 500 - margin.top - margin.bottom;
// x and y scales, I've used linear here but there are other options
// the scales translate data values to pixel values for you
var x = d3.scale.linear()
.domain([0, d3.max(xdata)]) // the range of the values to plot
.range([ 0, width ]); // the pixel range of the x-axis
var y = d3.scale.linear()
.domain([0, d3.max(ydata)])
.range([ height, 0 ]);
// the chart object, includes all margins
var chart = d3.select('body')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart')
// the main object where the chart and axis will be drawn
var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main')
// draw the x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'main axis date')
.call(xAxis);
// draw the y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis);
// draw the graph object
var g = main.append("svg:g");
g.selectAll("scatter-dots")
.data(ydata) // using the values in the ydata array
.enter().append("svg:circle") // create a new circle for each value
.attr("cy", function (d) { return y(d); } ) // translate y value to a pixel
.attr("cx", function (d,i) { return x(xdata[i]); } ) // translate x value
.attr("r", 10) // radius of circle
.style("opacity", 0.6); // opacity of circle
Used like this:
<!DOCTYPE html>
<html>
<head>
<title>The d3 test</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js" charset="utf-8"></script>
</head>
<body>
<div class='content'>
<!-- /the chart goes here -->
</div>
<script type="text/javascript" src="scatterchart.js"></script>
</body>
</html
NVD3.js has great examples. You will need to include their library also or take a look at their implementation. Take a look at this example of scatterplot: http://nvd3.org/livecode/#codemirrorNav
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
