Menu
I am starting with the d3.js and have decided to build a weather graph but the points (or nodes?) do not change color as they should i.e. not by temperature (position on y scale) but according to their position on x scale? What am I doing wrong?
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 2.5px;
}
.dot {
fill: steelblue;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<script src="d3/d3.min.js" charset="utf-8"></script>
<script>
var tooltip = d3.select('body').append('div')
.style('position','absolute')
var data = [
[new Date(1961, 0, 1), 6.3],
[new Date(2014, 0, 1), 9.4]
];
var margin = {top: 20, right: 30, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var tooltip = d3.select('body').append('div')
.style('position', 'absolute')
.style('padding', '0 10px')
var colors = d3.scale.linear()
.domain([5, 20])
.range(['#000000','#ffffff'])
var x = d3.time.scale()
.domain([new Date(1960, 0, 1), new Date(2015, 0, 1)])
.range([0, width]);
var y = d3.scale.linear()
.domain([5, 10])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("monotone")
.x(function(d) { return x(d[0]); })
.y(function(d) { return y(d[1]); });
var svg = d3.select("body").append("svg")
.datum(data)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Teplota (ºC)");
svg.append("path")
.attr("class", "line")
.attr("d", line);
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.style('stroke', function(d,i) {
return colors(i);
})
.style('fill', function(d,i) {
return colors(i);
})
.attr("class", "dot")
.attr("cx", line.x())
.attr("cy", line.y())
.attr("r", 1.5)
.on("mouseover", function(d) {
tooltip.html(d[1] + 'ºC')
.style('left', (d3.event.pageX - 35) + 'px')
.style('top', (d3.event.pageY - 30) + 'px')
.style('font-size', '15px')
});
</script>
826
Your dots are currently being colored by the array index of your data. Doing it this way will color your dots based on their time series (the x axis).
In order to color your circles based on temperature set the call to colors function like so. This will reference the second data point in current array iteration (the temperature).
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.style('stroke', function(d,i) {
return colors(d[1]);
})
.style('fill', function(d,i) {
return colors(d[1]);
})
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
