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

Posted by Scott Glover
Scott Glover
1,879 Points

TASK 1 not processing

ive passed the function to the best of my knowledge. should the substring not be 0,3? do i have the closing brackets wrong? completely lost

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', function(d) {
            year = d.DATE.substring(0,3)
            if (year === "1973") {
                return "red"
            }
            else {
                return "#ff00f5"
            };
        .style('fill', function(d) {
            year = d.DATE.substring(0,4)
            if (year === "1974") {
                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>

1 Answer

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

There's a syntax error in you code (That's usually what "Task 1 is no longer passing" really means.) The first .style() isn't closed off properly. It's missing the final closing bracket for the callback function and the closing parenthesis for the .style().

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

I should also point out that both substring() calls should be the same, since they are both trying to extract a 4-digit year.

Scott Glover
Scott Glover
1,879 Points

thank you! ive completed the argument but its still not calling

    .style('stroke', function(d) {
        year = d.DATE.substring(0,4)
        if (year === "1974") {
            return "red"
        }
        else {
            return "#ff00f5"
        }
    });
    .style('fill', function(d) {
        year = d.DATE.substring(0,4)
        if (year === "1973") {
            return "blue"
        }
        else {
            return "#ff00f5"
        }
    });

any extra help?

Scott Glover
Scott Glover
1,879 Points

NVM! i got it. thank you so much!