Skip to content

Instantly share code, notes, and snippets.

@naxxateux

naxxateux/index.html

Last active August 29, 2015 13:56
Show Gist options
  • Save naxxateux/9269708 to your computer and use it in GitHub Desktop.
Save naxxateux/9269708 to your computer and use it in GitHub Desktop.
Download ZIP
Ronaldo goals with slider
Raw
index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<html>
<head>
<script src='http://d3js.org/d3.v3.min.js'></script>
<link href='http://fonts.googleapis.com/css?family=Raleway:400' rel='stylesheet' type='text/css'>
<style>
body {
background-color: #ffffff;
}
.slider {
width: 1000px;
height: 10px;
}
</style>
<title>Ronaldo has now scored a goal in all 90 minutes of a match</title>
</head>
<body>
<div id='chart-container'></div>
<div id='slider-container'>
<input type='range' class='slider' step='1' min='1' value='1' max='90'>
<div id='slider-ticks'></div>
</div>
<script>
var margin = {
top: 50,
right: 50,
bottom: 50,
left: 50
},
width = 800 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var svg = d3.select('#chart-container').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 + ')');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment