Skip to content

Instantly share code, notes, and snippets.

@curran

curran/.block

Last active July 4, 2017 15:25
Show Gist options
  • Save curran/923f33c78a80d8785a974507693a6f21 to your computer and use it in GitHub Desktop.
Save curran/923f33c78a80d8785a974507693a6f21 to your computer and use it in GitHub Desktop.
Download ZIP
[unlisted] Inline Data Example
Raw
.block
license: mit
border: no
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var width = 960,
height = 500,
svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var arrData = [
{date: "24-Apr-17", close: 198},
{date: "24-Apr-15", close: 500},
{date: "24-Apr-16", close: 198},
{date: "24-Apr-13", close: 198}
];
var parseTime = d3.timeParse("%d-%b-%y");
var data = arrData
.map(function (d){
return {
date: parseTime(d.date),
close: d.close
};
})
.sort(function (a, b){
return d3.ascending(a.date, b.date);
});
var valueX = function (d){ return d.date; };
var valueY = function (d){ return d.close; };
var scaleX = d3.scaleLinear()
.domain(d3.extent(data, valueX))
.range([0, width]);
var scaleY = d3.scaleLinear()
.domain(d3.extent(data, valueY))
.range([height, 0]);
var line = d3.line()
.x(function(d) { return scaleX(valueX(d)); })
.y(function(d) { return scaleY(valueY(d)); });
svg.append("path")
.attr("d", line(data))
.attr("stroke", "black")
.attr("fill", "none");
console.log(data);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment