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

Gina Mills
Gina Mills
15,668 Points
Posted by Gina Mills
Gina Mills
15,668 Points

I have no idea how to do this exercise

Hey does anyone have the answer to this - I have no idea to be honest.

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('climate_data.csv', function(data) {

        dots = viz.selectAll('circle')
                     .data(data)
                     .enter()
                    .append('circle');

        dots.attr('r', function(d, i) {
          debugger;
          return Math.abs(d.TMAX) / 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.charAt(3)
                if (year === "3") {
                    return "blue"
                }
                else {
                    return "green"
                }
            });

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

1 Answer

Steven Parker
Steven Parker
229,785 Points
Steven Parker
Steven Parker
229,785 Points

It might be easier than you think.

Task 1 says, "Change the value of the radius attribute on the circles to be the absolute value of the TMIN data, divided by ten." While that sounds complicated, once you locate where the the radius is established in the original code, you'll see that it is computed by a formula almost exactly like the challenge describes but based on TMAX data. So all you need to do is change TMAX to TMIN.

Then for task 2 it says, "Change the stroke of the circles that represent the year 1973 to be a different color from those that represent the year 1974." And again it may seem complicated but the original code does something very similar to this with the fill attribute. So if you use that code as an example, you can do pretty much the same thing for the stroke, just modifying the attribute name, year, and colors.