Trace minigráficos usando D3.js con datos normalizados

Hi I am trying to plot a set of spark lines in D3.

My main problem is that I want to normalize the data.

So if I have two arrays of data like this:

var wind = [1, 8,3,4]
var powerGenerated = [50, 40,20,30]

I want to be able to plot them on top of each other because I am not interested in the difference between the values but I am interested in how the values change in relation to each other. The best way to see this would be if they were graphed on top of each other at the same scale.

I have put together a JS fiddle to start.

http://jsfiddle.net/redenvy/4KqTt/2/

preguntado el 25 de abril de 13 a las 02:04

1 Respuestas

You will have to create two separate yScale, one for the wind data and another for the power generated data.

var wind = [1, 8,3,4]
var power = [50, 40,20,30]

var w = 200, h = 80;
var yWind = d3.scale.linear().domain([d3.min(wind), d3.max(wind)]).range([0 , h]),
    yPower = d3.scale.linear().domain([d3.min(power), d3.max(power)]).range([0 , h]),
x = d3.scale.linear().domain([0, wind.length]).range([0, w])

var vis = d3.select("#sparklines")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h)

var g = vis.append("svg:g")
    .attr("transform", "translate(0, " + h     +")");

var lineWind = d3.svg.line()
    .x(function(d,i) { return x(i); })
    .y(function(d) { return -1 * yWind(d) });

var linePower = d3.svg.line()
    .x(function(d,i) { return x(i); })
    .y(function(d) { return -1 * yPower(d); });

g.append("svg:path").attr("d", lineWind(wind)).attr('class', 'wind');
g.append("svg:path").attr("d", linePower(power)).attr('class', 'power');

fiddle update: http://jsfiddle.net/4KqTt/6/

Respondido 25 Abr '13, 04:04

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.