spark2.html

<div id="sparklines"></div>
<style>
  path {
    stroke-width: 2;
    fill: none;
}

path.wind { stroke: red; }
path.power { stroke: steelblue; }



line {
    stroke: black;
}

line.wind {
    stroke: red;
    
}

text {
    font-family: Arial;
    font-size: 9pt;
}
</style>
<script>
  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');

</script>