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

Question

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>

Answer 1 · 2017-11-14T14:50:37Z

November 14, 2017 2:50pm

This is a lot easier than it seems at first, because 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 for "extra credit" (just for your own benefit, it doesn't affect the challenge), the existing code doesn't exactly follow "best practices", so you can actually do it better.

Welcome to the Treehouse Community

Looking to learn something new?

Juan Ramos

Juan Ramos

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

1 Answer

Steven Parker

Steven Parker