kevinschaul/README.md

## README.md

      
    Raw
  

              README.md
            
          
    There has to be a better way to denote undefined data regions.
I've tried using line.defined to pick out only the points directly before and after an undefined region, but I've had no luck.

  
## data.csv

          
            year
            rate

            
              1906
              4.7

            
              1907
              4.6

            
              1908

            
              1909
              7.8

            
              1910
              9.7

            
              1911

            
              1912

            
              1913

            
              1914

            
              1915
              7.3

            
              1916
              7.6

            
              1917

            
              1918
              8.2

            
              1919
              9.2

            
              1920
              6.2

            
              1921
              5.3

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
    font-family: sans-serif;
    font-size: 10px;
}

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.x.axis path {
    display: none;
}

.y.axis path {
    display: none;
}

.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 3px;
}

.line-undefined {
    stroke: grey;
    stroke-dasharray: 5,5;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

</style>
<body>

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

var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
};

var width = 600 - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var x_axis = d3.svg.axis()
    .scale(x)
    .ticks(4)
    .orient('bottom');

var y_axis = d3.svg.axis()
    .scale(y)
    .orient('left')
    .ticks(4);

var line = d3.svg.line()
    .x(function(d) { return x(d.year); })
    .y(function(d) { return y(d.rate); })
    .defined(function(d) { return d.rate; });

var lineUndefined = d3.svg.line()
    .x(function(d) { return x(d.year); })
    .y(function(d) { return y(d.rate); });

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 + ')');

d3.csv('data.csv', function(error, data) {

    var dataNoUndefined = [];
    data.forEach(function(d, i) {
        d.year = d3.time.format('%Y').parse(d.year);
        d.rate = +d.rate;

        if (d.rate) {
            dataNoUndefined.push(d);
        }
    });

    x.domain(d3.extent(data, function(d) { return d.year; }));
    y.domain(d3.extent(data, function(d) { return d.rate; }));

    svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(x_axis);

    svg.append('g')
        .attr('class', 'y axis')
        .call(y_axis);

    svg.append('path')
        .datum(dataNoUndefined)
        .attr('class', 'line line-undefined')
        .attr('d', lineUndefined);

    svg.append('path')
        .datum(data)
        .attr('class', 'line')
        .attr('d', line);
});

</script>

</body>
	year	rate
	1906	4.7
	1907	4.6
	1908
	1909	7.8
	1910	9.7
	1911
	1912
	1913
	1914
	1915	7.3
	1916	7.6
	1917
	1918	8.2
	1919	9.2
	1920	6.2
	1921	5.3
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: sans-serif;
	font-size: 10px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	.y.axis path {
	display: none;
	}

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 3px;
	}

	.line-undefined {
	stroke: grey;
	stroke-dasharray: 5,5;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	</style>
	<body>

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

	var margin = {
	top: 20,
	right: 20,
	bottom: 30,
	left: 50
	};

	var width = 600 - margin.left - margin.right;
	var height = 300 - margin.top - margin.bottom;

	var x = d3.time.scale()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var x_axis = d3.svg.axis()
	.scale(x)
	.ticks(4)
	.orient('bottom');

	var y_axis = d3.svg.axis()
	.scale(y)
	.orient('left')
	.ticks(4);

	var line = d3.svg.line()
	.x(function(d) { return x(d.year); })
	.y(function(d) { return y(d.rate); })
	.defined(function(d) { return d.rate; });

	var lineUndefined = d3.svg.line()
	.x(function(d) { return x(d.year); })
	.y(function(d) { return y(d.rate); });

	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 + ')');

	d3.csv('data.csv', function(error, data) {

	var dataNoUndefined = [];
	data.forEach(function(d, i) {
	d.year = d3.time.format('%Y').parse(d.year);
	d.rate = +d.rate;

	if (d.rate) {
	dataNoUndefined.push(d);
	}
	});

	x.domain(d3.extent(data, function(d) { return d.year; }));
	y.domain(d3.extent(data, function(d) { return d.rate; }));

	svg.append('g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(0,' + height + ')')
	.call(x_axis);

	svg.append('g')
	.attr('class', 'y axis')
	.call(y_axis);

	svg.append('path')
	.datum(dataNoUndefined)
	.attr('class', 'line line-undefined')
	.attr('d', lineUndefined);

	svg.append('path')
	.datum(data)
	.attr('class', 'line')
	.attr('d', line);
	});

	</script>

	</body>