Change the stroke color when a different year by setting a function to it..

Question

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

});

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-10-05T22:54:43Z

October 5, 2017 10:54pm

The provided code already does this for the "fill". So using that for an example, it should be reasonably easy to modify the "stroke" to do something similar. You can match the fill colors if you want, or you can use totally different colors if you like.

Welcome to the Treehouse Community

Looking to learn something new?

Jorge Montava Arsis

Jorge Montava Arsis

Change the stroke color when a different year by setting a function to it..

1 Answer

Steven Parker

Steven Parker