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

JavaScript D3.js Data Binding with D3.js Data Binding

Samantha North
Samantha North
9,450 Points
Posted by Samantha North
Samantha North
9,450 Points

Stuck on part 2 of code challenge in D3

It asks me to change the stroke of the circle, but no matter what I try I can't seem to figure it out. Can anyone help?

js/app.js 
// 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"
            }
        });
});
index.html 
<!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>

2 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

There's a perfect example of what to do if you look at how they handled the fill in the provided code. See how they replaced the 2nd argument with a function that returns values based on the year? And, just by chance :smirk:, it's even testing for the same year as needed here.

I'll bet you can get it now using the fill example and doing something similar for stroke.

Samantha North
Samantha North
9,450 Points
Samantha North
Samantha North
9,450 Points

Thanks for your reply Steven. I got it in the end by following that method. Seems I'd been trying to overcomplicate things before... :)