Simple x-y plot -- Check out Mike Bostock's.
Last active
November 15, 2019 22:36
-
-
Save pbogden/7562151 to your computer and use it in GitHub Desktop.
simple x-y plot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset='utf-8'> | |
<title>xy plot</title> | |
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> | |
<body> | |
<script> | |
var outerWidth = 960, outerHeight = 500; // includes margins | |
var margin = {top: 100, right: 20, bottom: 80, left: 80}; // clockwise as in CSS | |
var width = outerWidth - margin.left - margin.right, // width of plot inside margins | |
height = outerHeight - margin.top - margin.bottom; // height " " | |
document.body.style.margin="0px"; // Eliminate default margin from <body> element | |
var data = [ {x: 0, y: 00}, {x: 1, y: 30}, {x: 2, y: 40}, | |
{x: 3, y: 20}, {x: 4, y: 90}, {x: 5, y: 70} ]; | |
function xValue(d) { return d.x; } // accessors | |
function yValue(d) { return d.y; } | |
var x = d3.scaleLinear() // interpolator for X axis -- inner plot region | |
.domain(d3.extent(data,xValue)) | |
.range([0,width]); | |
var y = d3.scaleLinear() // interpolator for Y axis -- inner plot region | |
.domain(d3.extent(data,yValue)) | |
.range([height,0]); // remember, (0,0) is upper left -- this reverses "y" | |
var line = d3.line() // SVG line generator | |
.x(function(d) { return x(d.x); } ) | |
.y(function(d) { return y(d.y); } ); | |
var xAxis = d3.axisBottom(x) | |
.ticks(5) // request 5 ticks on the x axis | |
var yAxis = d3.axisLeft(y) // y Axis | |
.ticks(4) | |
var svg = d3.select("body").append("svg") | |
.attr("width", outerWidth) | |
.attr("height", outerHeight); // Note: ok to leave this without units, implied "px" | |
var g = svg.append("g") // <g> element is the inner plot area (i.e., inside the margins) | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
g.append("g") // render the Y axis in the inner plot area | |
.attr("class", "y axis") | |
.call(yAxis); | |
g.append("g") // render the X axis in the inner plot area | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") // axis runs along lower part of graph | |
.call(xAxis); | |
g.append("text") // inner x-axis label | |
.attr("class", "x label") | |
.attr("text-anchor", "end") | |
.attr("x", width - 6) | |
.attr("y", height - 6) | |
.text("inner x-axis label"); | |
g.append("text") // outer x-axis label | |
.attr("class", "x label") | |
.attr("text-anchor", "end") | |
.attr("x", width/2) | |
.attr("y", height + 2*margin.bottom/3 + 6) | |
.text("outer x-axis label"); | |
g.append("text") // plot title | |
.attr("class", "x label") | |
.attr("text-anchor", "middle") | |
.attr("x", width/2) | |
.attr("y", -margin.top/2) | |
.attr("dy", "+.75em") | |
.text("plot title"); | |
g.append("text") // inner y-axis label | |
.attr("class", "y label") | |
.attr("text-anchor", "end") | |
.attr("x", -6) | |
.attr("y", 6) | |
.attr("dy", ".75em") | |
.attr("transform", "rotate(-90)") | |
.text("inner y-axis label"); | |
g.append("text") // outer y-axis label | |
.attr("class", "x label") | |
.attr("text-anchor", "middle") | |
.attr("x", -height/2) | |
.attr("y", -6 - margin.left/3) | |
.attr("dy", "-.75em") | |
.attr("transform", "rotate(-90)") | |
.text("outer y-axis label"); | |
g.append("path") // plot the data as a line | |
.datum(data) | |
.attr("class", "line") | |
.attr("d", line) | |
.style('fill', 'none') | |
.style('stroke', '#fff') | |
.transition() | |
.delay(500) | |
.duration(1000) | |
.style('stroke', '#000') | |
g.selectAll(".dot") // plot a circle at each data location | |
.data(data) | |
.enter().append("circle") | |
.attr("class", "dot") | |
.attr("cx", function(d) { return x(d.x); } ) | |
.attr("cy", function(d) { return y(d.y); } ) | |
.attr("r", 5); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment