karzak/DispersalLineChart.html

## beetle_short.csv

          
            Distance
            Percentile

            
              10
              0.157730611

            
              100
              0.777185394

            
              200
              0.8684237

            
              300
              0.904536767

            
              400
              0.92646615

            
              500
              0.944572981

            
              600
              0.955336485

            
              700
              0.965295242

            
              800
              0.971632633

            
              900
              0.974851625

            
              1000
              0.978774771

            
              1100
              0.980585454

            
              1200
              0.985715723

            
              1300
              0.986822251

            
              1400
              0.988431747

            
              1500
              0.990141837

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

body { font: 12px Arial;}

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

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

</style>
<body>

<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

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

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

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

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

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

// Define the line
var valueline = d3.svg.line()
    .x(function(d) { return x(d.distance); })
    .y(function(d) { return y(1-d.percentile); });

// 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("beetle_short.csv", function(error, data) {
    data.forEach(function(d) {
        d.distance = d.Distance;
        d.percentile = +d.Percentile;
    });

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


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

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

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate("+padding+",0)")
        .call(yAxis);

    svg.append("text")
        .attr("text-anchor", "middle")  // this makes it easy to centre the text as the transform is applied to the anchor
        .attr("transform", "translate("+ (width/2) +","+(height-(padding/2))+")")  // centre below axis
        .text("Distance (m)");

    svg.append("text")
        .attr("text-anchor", "middle")  // this makes it easy to centre the text as the transform is applied to the anchor
        .attr("transform", "translate("+ (padding/2) +","+(height/2)+")rotate(-90)")  // text is drawn off the screen top left, move down and out and rotate
        .text("Probability");

    svg.append("text")
        .attr("x", (width / 2))
        .attr("y", 72)
        .attr("text-anchor", "middle")
        .style("font-size", "16px")
        .style("text-decoration", "underline")
        .style("font-weight", "bold")
        .text("Inferred Probability of Asian Longhorned Beetle Flight Distance");
});

</script>
</body>
	Distance	Percentile
	10	0.157730611
	100	0.777185394
	200	0.8684237
	300	0.904536767
	400	0.92646615
	500	0.944572981
	600	0.955336485
	700	0.965295242
	800	0.971632633
	900	0.974851625
	1000	0.978774771
	1100	0.980585454
	1200	0.985715723
	1300	0.986822251
	1400	0.988431747
	1500	0.990141837
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */

	body { font: 12px Arial;}

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

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

	</style>
	<body>

	<!-- load the d3.js library -->
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>

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

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

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

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

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

	// Define the line
	var valueline = d3.svg.line()
	.x(function(d) { return x(d.distance); })
	.y(function(d) { return y(1-d.percentile); });

	// 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("beetle_short.csv", function(error, data) {
	data.forEach(function(d) {
	d.distance = d.Distance;
	d.percentile = +d.Percentile;
	});

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


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

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

	// Add the Y Axis
	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate("+padding+",0)")
	.call(yAxis);

	svg.append("text")
	.attr("text-anchor", "middle") // this makes it easy to centre the text as the transform is applied to the anchor
	.attr("transform", "translate("+ (width/2) +","+(height-(padding/2))+")") // centre below axis
	.text("Distance (m)");

	svg.append("text")
	.attr("text-anchor", "middle") // this makes it easy to centre the text as the transform is applied to the anchor
	.attr("transform", "translate("+ (padding/2) +","+(height/2)+")rotate(-90)") // text is drawn off the screen top left, move down and out and rotate
	.text("Probability");

	svg.append("text")
	.attr("x", (width / 2))
	.attr("y", 72)
	.attr("text-anchor", "middle")
	.style("font-size", "16px")
	.style("text-decoration", "underline")
	.style("font-weight", "bold")
	.text("Inferred Probability of Asian Longhorned Beetle Flight Distance");
	});

	</script>
	</body>