Un simple ejemplo de diagrama de dispersión en D3.js?

Estoy buscando un ejemplo de cómo dibujar un diagrama de dispersión en D3.js.Un simple ejemplo de diagrama de dispersión en D3.js?

No he podido encontrar un ejemplo simple mirando el official D3.js examples (aunque son impresionantes). Sólo quiero saber cómo:

empate y etiquetar los
puntos sorteo de dispersión X e Y de los ejes de la gráfica.

he encontrado this example en este D3 reusable library, pero es mucho más compleja de lo que necesito, con archivos externos que hacen que sea difícil de sacar los puntos esenciales. ¿Podría alguien señalarme un simple ejemplo de diagrama de dispersión para comenzar?

Muchas gracias.

Fuente

2012-05-03 Richard

I nunca antes había usado d3 y dejó de intentar armar un ejemplo de trabajo. Parece que necesitas transformar los datos y los ejes para hacer algo convencional (el eje y por defecto apunta hacia abajo). Estas son las páginas que utilicé: http://alignedleft.com/tutorials/d3/making-a-scatterplot/ y http://bl.ocks.org/1166403 ¡Espero que ayuden! –

Esto debería comenzar. Puede verlo en acción en 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

Se utiliza la siguiente manera:

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

Fuente

2012-05-04 05:06:20 Bill

Gracias, pero esto no funciona para mí, ¿no está seguro de dónde viene 'flipy'? – Richard

Lo siento, asumí que su ejemplo estaba funcionando. He actualizado mi respuesta y simplifiqué un poco las cosas para poder aclarar las cosas. Puedes verlo trabajando en http://bl.ocks.org/2595950. – Bill

Ah, funciona, ahora, muchas gracias. – Richard

NVD3.js tiene grandes ejemplos. También deberá incluir su biblioteca o echar un vistazo a su implementación. Echar un vistazo a este ejemplo de diagrama de dispersión: http://nvd3.org/livecode/#codemirrorNav

Fuente

2012-12-29 20:17:56 Sherzod

Tome un vistazo a este ejemplo de diagrama de dispersión con C3.js (D3 basada en): http://c3js.org/samples/chart_scatter.html

Puede Chang tamaño del radio de esta manera: http://grokbase.com/t/gg/c3js/14a7jfj28c/bubble-chart-with-changing-radius-size-in-c3-js

Fuente

2015-04-13 06:46:05

Un simple ejemplo de diagrama de dispersión en D3.js?

Respuesta

Cuestiones relacionadas