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

Kudakwashe L Maluwa
Kudakwashe L Maluwa
9,271 Points
Posted by Kudakwashe L Maluwa
Kudakwashe L Maluwa
9,271 Points

i dont know what to do next!!!!!

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

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

3 Answers

Steven Parker
Steven Parker
229,708 Points
Steven Parker
Steven Parker
229,708 Points

Hint: what they want you to do with the "stroke" is already being done to the "fill" in the supplied code. So you can use the "fill" code as a model when you modify the "stroke".

And the existing code doesn't exactly follow "best practices", so you can actually do it better.

Kudakwashe L Maluwa
Kudakwashe L Maluwa
9,271 Points
Kudakwashe L Maluwa
Kudakwashe L Maluwa
9,271 Points

it was so easy, thank u a lot !!!

Juan Ramos
Juan Ramos
6,445 Points
Juan Ramos
Juan Ramos
6,445 Points

hi i'm having the same problem, can you please post the code to see the answer?

Steven Parker
Steven Parker
229,708 Points
Steven Parker
Steven Parker
229,708 Points

Did you understand the hint? A sample of the code needed is in the challenge code already.

Juan Ramos
Juan Ramos
6,445 Points
Juan Ramos
Juan Ramos
6,445 Points

Not really, to be honest, any help will be appreciated thank u

Steven Parker
Steven Parker
229,708 Points
Steven Parker
Steven Parker
229,708 Points

The line they want you to change currently has this:

          .style('stroke', 'red')

But the next few lines set the 'fill' using a function to change the color based on the date. All you need to do is to make the 'stroke' work like the 'fill' does already.