line plot with negative bursts

This is a follow on from the simple scatterplot used as an example in the book D3 Tips and Tricks.

It is aimed at demonstrating a the use of an if statement to select elements in d3.js. It should be taken in context with the text of the book which can be downloaded for free from Leanpub.

forked from d3noob's block: if selection in d3.js

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}

path { 
    stroke: lightgreen;
    stroke-width: 2;
    fill: none;
}

redpath { 
    stroke: red;
    stroke-width: 3;
    fill: red;
}
  
  
.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

</style>
<body>

<script src="https://d3js.org/d3.v3.min.js"></script>

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

// Define the line
var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); })
.interpolate("monotone");
	
  
// Adds the svg canvas
var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.csv("data.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });

// Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.close; })]);

// Add the valueline path.
    svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(data));

// Add the scatterplot
    svg.selectAll("path")	
        .data(data)
        .style("stroke", function(d) {
            if (d.close <= 0) {return "red"}
            else 	{ return "blue" }
      
        ;})

// Add the scatterplot
    svg.selectAll("dot")	
        .data(data)										
    .enter().append("circle")								
        .attr("r", 3.5)		
        .style("fill", function(d) {
            if (d.close <= 100) {return "red"}
            else 	{ return "white" }
        ;})
        .attr("cx", function(d) { return x(d.date); })		 
        .attr("cy", function(d) { return y(d.close); });

// Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

// Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);
  // Add an SVG element with the desired dimensions and margin.
  // Add the clip path.
  svg.append("clipPath")
      .attr("id", "clip")
    .append("rect")
      .attr("width", width)
      .attr("height", height);

});

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js