Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jorge Montava Arsis
1,648 PointsChange the stroke...
The strokes on the circles from 1973 seem to be the same color as the strokes on the circles from 1974! When setting the 'stroke' in the style, you need to pass a function that returns a different color depending on whether the year portion of the 'DATE' attribute is 1973 or 1974.
I do not know how to do it, I have been trying for a while and can not make it through yet...
// height and width of the svg
var height = 800, width = 500;
var padding = 50;
var viz = d3.select("#viz-wrapper")
.append('svg')
.attr('id', 'viz')
.attr('height', height)
.attr('width', width);
d3.csv('app/climate_data_truncated.csv', function(data) {
dots = viz.selectAll('circle')
.data(data)
.enter()
.append('circle');
dots.attr('r', function(d) {return Math.abs(d.TMIN) / 10})
.attr('cx', function(d) {return Math.max(0 + padding, Math.random() * width - padding)})
.attr('cy', function(d) {return Math.max(0 + padding, Math.random() * height - padding )})
.style('stroke', 'red')
.style('fill', function(d) {
year = d.DATE.substring(0,4)
if (year === "1973") {
return "blue"
}
else {
return "#ff00f5"
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Requests</title>
</head>
<body>
<div id="viz-wrapper">
</div>
</body>
<script src="js/d3.min.js" charset="utf-8"></script>
<script src="js/app.js" charset="utf-8"></script>
</html>
3 Answers
Steven Parker
229,732 PointsOne thing that can make this task much easier is to notice that the code already passes a function that returns a different color based on the date to the "fill". So you can use that as a model, and do something similar for the "stroke".
Kevin Goudswaard
11,061 PointsJust a stab here, but you have:
year = d.DATE.substring(0,4) with year not being declared a variable yet. try
const year = dDATE.substring(0,4);
Steven Parker
229,732 PointsThat's actually the initial code provided by the challenge! 
Hopefully anyone doing this challenge will follow good practice guidelines in the new code that they add.
Kevin Goudswaard
11,061 PointsHuh that is interesting in more ways than one for me. I had no idea you could have implicit global variables.. oh, does he need a semi-colon though?
Steven Parker
229,732 PointsSemicolons at the end of the line are optional, but also considered "good practice".
Jorge Montava Arsis
1,648 PointsHi again,
I appreciate your answers and the help but I seem not to find the right code for this somehow I am very stuck in here. Will need to do some 'extra' research. Or even get this one solved by someone so I can see it and understand rather than try to light a bulb Edison style...
Thank you!
Steven Parker
229,732 PointsYou could post your changed code so we could take another look, and/or you might check out other questions asked about the same challenge.