Skip to content

Instantly share code, notes, and snippets.

@tomshanley

tomshanley/.block

Last active May 9, 2019 02:39
Show Gist options
  • Save tomshanley/ec34598f993fc2bbdd65cc21ef42734e to your computer and use it in GitHub Desktop.
Save tomshanley/ec34598f993fc2bbdd65cc21ef42734e to your computer and use it in GitHub Desktop.
Download ZIP
Peaks
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
path {
stroke: black;
stroke-width: 2;
fill: none;
stroke-linecap: round
}
</style>
</head>
<body>
<script>
let w = 500
let h = 250
let m = 50
var svg = d3.select("body")
.append("svg")
.attr("width", w + m + m)
.attr("height", h + m + m)
var g = svg.append("g")
.attr("transform", "translate("+ m + "," + m +")")
var data = d3.range(13).map(function(){return Math.random()*10})
var x = d3.scaleLinear()
.domain([0, 12])
.range([0, w]);
var y = d3.scaleLinear()
.domain([0, 10])
.range([h, 0]);
var lineData = []
//if you want 20px, calculate the value needed to +/- to the x value
let padding = x.invert(10)
data.forEach(function(d, i){
lineData.push({"x": (i - padding), "y": 0 })
lineData.push({"x": i, "y": d })
lineData.push({"x": (i + padding), "y": 0 })
})
var line = d3.line()
.x(function(d,i) { return x(d.x);})
.y(function(d) { return y(d.y);})
.curve(d3.curveLinear);
var path = g.append("path")
.attr("d", line(lineData))
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment