Ein einfaches Scatterplot-Beispiel in D3.js?

Ich suche ein Beispiel, wie man ein Streudiagramm in D3.js zeichnet.Ein einfaches Scatterplot-Beispiel in D3.js?

Ich konnte kein einfaches Beispiel finden, indem ich durch die official D3.js examples (beeindruckend, obwohl sie sind). Ich möchte nur wissen, wie man:

Unentschieden und beschriften Sie die x- und y-Achsen
Unentschieden Streu Punkte auf dem Graphen.

Ich habe this example in diesem D3 reusable library finden, aber es ist sehr viel komplexer, als ich brauche, mit externen Dateien, die es schwer ziehen Sie die wesentlichen Punkte zu machen. Könnte mich jemand auf ein einfaches Scatterplot-Beispiel hinweisen, um loszulegen?

Vielen Dank.

Quelle

2012-05-03 Richard

I habe d3 nie zuvor benutzt und es aufgegeben, ein funktionierendes Beispiel zu erstellen. Es sieht so aus, als müssten Sie die Daten und die Achsen so transformieren, dass etwas Konventionelles entsteht (die Standard-Y-Achse zeigt nach unten). Hier sind die Seiten, die ich benutzt habe: http://alignedleft.com/tutorials/d3/making-a-scatterplot/ und http://bl.ocks.org/1166403 Hoffe, dass sie helfen! –

Dies sollte Ihnen den Anfang machen. Sie können es in Aktion bei http://bl.ocks.org/2595950 sehen.

// 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

wie folgt verwendet:

<!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

Quelle

2012-05-04 05:06:20 Bill

Danke, aber das funktioniert nicht wirklich für mich - nicht sicher woher 'flipy' kommt? – Richard

Sorry, ich nahm an, dass sein Beispiel funktionierte. Ich habe meine Antwort aktualisiert und die Dinge ein wenig vereinfacht, um die Dinge hoffentlich klarer zu machen. Sie können es bei http://bl.ocks.org/2595950 arbeiten sehen. – Bill

Ah, funktioniert, jetzt, vielen Dank. – Richard

NVD3.js hat gute Beispiele. Sie müssen auch ihre Bibliothek einschließen oder einen Blick auf deren Implementierung werfen. Werfen Sie einen Blick auf dieses Beispiel Scatterplot: http://nvd3.org/livecode/#codemirrorNav

Quelle

2012-12-29 20:17:56 Sherzod

Werfen Sie einen Blick auf dieses Beispiel Scatterplot mit C3.js (D3-basiert): http://c3js.org/samples/chart_scatter.html

Sie können chang Radiusgröße wie folgt aus: http://grokbase.com/t/gg/c3js/14a7jfj28c/bubble-chart-with-changing-radius-size-in-c3-js

Quelle

2015-04-13 06:46:05

Ein einfaches Scatterplot-Beispiel in D3.js?

Antwort

Verwandte Themen