task 2

Question

I am not geting by task 2

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.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.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 · 2016-09-13T11:49:31Z

September 13, 2016 11:49am

Do you see how .style('fill', function(d) { is done:

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

It does exactly what you need in Task 2 but for fill : changing the colors for year 1973 be blue, and for the others to be "#ff00f5"

Simply replace the .style('stroke', 'red') with the code from style('fill', function(d)) ...

Sounds reasonable ?

Welcome to the Treehouse Community

Looking to learn something new?

Toni Caktas

Toni Caktas

task 2

1 Answer

Alexander Nikiforov

Alexander Nikiforov