How to change color of the nodes in D3.js to reflect data?

Question

Hi everybody,

I am bulding a weather graph but the nodes change colors not by temperature (position on y scale) but according to their position on x scale? What am I doing wrong? Thank you!

<!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(1961, 0, 5), 7.3], [new Date(1961, 0, 6), 8.3], [new Date(1962, 0, 1), 6.3], [new Date(1963, 0, 1), 6.5], [new Date(1964, 0, 1), 7.0], [new Date(1965, 0, 1), 6.4], [new Date(1966, 0, 1), 7.9], [new Date(1967, 0, 1), 8.0], [new Date(1968, 0, 1), 7.3], [new Date(1969, 0, 1), 6.9], [new Date(1970, 0, 1), 6.9], [new Date(1971, 0, 1), 7.5], [new Date(1972, 0, 1), 7.2], [new Date(1973, 0, 1), 7.2], [new Date(1974, 0, 1), 8.0], [new Date(1975, 0, 1), 8.0], [new Date(1976, 0, 1), 7.3], [new Date(1977, 0, 1), 7.6], [new Date(1978, 0, 1), 6.7], [new Date(1979, 0, 1), 7.2], [new Date(1980, 0, 1), 6.3], [new Date(1981, 0, 1), 7.4], [new Date(1982, 0, 1), 7.9], [new Date(1983, 0, 1), 8.3], [new Date(1984, 0, 1), 7.0], [new Date(1985, 0, 1), 6.5], [new Date(1986, 0, 1), 7.2], [new Date(1987, 0, 1), 6.6], [new Date(1988, 0, 1), 8.0], [new Date(1989, 0, 1), 8.4], [new Date(1990, 0, 1), 8.4], [new Date(1991, 0, 1), 7.2], [new Date(1992, 0, 1), 8.6], [new Date(1993, 0, 1), 7.6], [new Date(1994, 0, 1), 8.9], [new Date(1995, 0, 1), 7.9], [new Date(1996, 0, 1), 6.3], [new Date(1997, 0, 1), 7.6], [new Date(1998, 0, 1), 8.2], [new Date(1999, 0, 1), 8.3], [new Date(2000, 0, 1), 9.1], [new Date(2001, 0, 1), 7.9], [new Date(2002, 0, 1), 8.8], [new Date(2003, 0, 1), 8.4], [new Date(2004, 0, 1), 7.8], [new Date(2005, 0, 1), 7.7], [new Date(2006, 0, 1), 8.2], [new Date(2007, 0, 1), 9.1], [new Date(2008, 0, 1), 8.9], [new Date(2009, 0, 1), 8.4], [new Date(2010, 0, 1), 7.2], [new Date(2011, 0, 1), 8.5], [new Date(2012, 0, 1), 8.3], [new Date(2013, 0, 1), 7.9], [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>

Answer 1 · 2016-01-05T07:11:44Z

January 5, 2016 7:11am

sorry, I dont know how...but anyway I was accessing the wrong numbers instead of "return colors(d[1])" I was accessing "return colors(i)". But thanks for the effort Huston! Appreciate that!

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]);
 })

Answer 2 · 2016-01-04T20:42:11Z

January 4, 2016 8:42pm

Can you fix your code above to be highlighted?

Welcome to the Treehouse Community

Looking to learn something new?

Daniel Čupak

Daniel Čupak

How to change color of the nodes in D3.js to reflect data?

2 Answers

Daniel Čupak

Daniel Čupak

Huston Hedinger

Huston Hedinger