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

Posted by Joseph Fusco
Joseph Fusco
9,577 Points

Change the stroke of the circles that represent the year 1973 to be a different color from those that represent 1974?

I have been stuck on this question for about 2 hours now. I have no idea how to do this on the d3.js course

9 Answers

Joseph Fusco
Joseph Fusco
9,577 Points

wow...after 3 hours on this problem I figured it out.

.style('stroke', function(d) {
              year = d.DATE.substring(0,4)
              if (year === "1973") {
                  return "blue"
                  //d3.select('circle').style('stroke', 'green')
              }
              else {
                  return "#ff00f5"
              }

I think I need a break

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Congrats! Nice work sticking with the problem!

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Joseph;

I understand. Do you mind if we break this down a bit?

Task 2

Change the stroke of the circles that represent the year 1973 to be a different color from those that represent the year 1974.

Let's just look at the dots code for brevity;

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

If you missed it in the video, this is a great example of method chaining, if that part is still confusing, I would highly recommend re-watching the videos as method chaining is an important concept to grasp even outside d3.js.

Since we are working with the stroke of the circles (dots) let's concentrate on that. We need to come up with a way that if the year is "1973" it is one color otherwise (else) it is another color. We can, therefore create a function similar to the function laid out for the 'fill' attribute, something along the lines of the following boilerplate code (don't want to give you all the answers :smile: )

.style('stroke', function(d) {                    // implements a function to check for the date
    year = d.Date.substring(0,4)              // assigns the value from the passed in data to a "year" variable
    if ( somethingToCheckGoesHere) {   // need to check for something here...
        return "someWildColor"                 // choose a color
   } else {
        return "someOtherWildColor"       // choose a color, make sure it is different from the one above
   }
})

I hope that helps without providing the answer outright.

Post back if you are still stuck.

Ken

Michel Moreau L
Michel Moreau L
21,751 Points
Michel Moreau L
Michel Moreau L
21,751 Points

Thanks for that answer Ken! My problem was that I was adding a semicolon after the function which was causing an error. We want to avoid that because there is another function in the chain after styling the stroke.

.style('stroke', function(d) {                    
    year = d.Date.substring(0,4)              
    if (year === '1973') {   
        return "someWildColor"                 
   } else if (year === '1974') {
        return "someOtherWildColor"       
   }
}) // I added a semicolon here which created an error, 
    //because another method follows in the chain!

.style('fill', function(d) {
              year = d.DATE.substring(0,4)
              if (year === "1973") {
                  return "blue"
                  dots.attr.style('stroke', 'green')
              }
              else {
                  return "#ff00f5"
              }
          });
larsberg
larsberg
58,676 Points
larsberg
larsberg
58,676 Points

//This is what I did and I replaced the fill with stroke and it worked. // 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('fill', 'red')
    .style('stroke', function(d) {
        year = d.DATE.substring(0,4)
        if (year === "1973") {
            return "blue"
        }
        else {
            return "#ff00f5"
        }
    });

});

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Joseph;

Can you post the code you are trying that isn't passing? It will help to explain why and where you are having errors.

Thanks, Ken

Joseph Fusco
Joseph Fusco
9,577 Points
Joseph Fusco
Joseph Fusco
9,577 Points

Oh thanks. Sorry I didn't include that. Here is what I have. I figured dots.style('stroke','green') would turn the strokes green on the 1973 circles...

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('climate_data.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"
                  dots.attr.style('stroke', 'green')
              }
              else {
                  return "#ff00f5"
              }
          });
  });
Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Joseph;

If you take a look at the prompting code, there is a very good chance that the same code that changes the fill color based on the year would work as well for the stroke code.

Give that a try and post back if you have any questions on it.

Happy coding, Ken

Joseph Fusco
Joseph Fusco
9,577 Points
Joseph Fusco
Joseph Fusco
9,577 Points

Ken, First off thank you for responding but after several hours looking at this code I am afraid I can't see any light at the end of this tunnel. I tried looking into your suggestion but I am still getting nowhere.

Joseph Fusco
Joseph Fusco
9,577 Points
Joseph Fusco
Joseph Fusco
9,577 Points

Ken, that pretty much describes what I was looking for. Thank you for your help!