Skip to content

Instantly share code, notes, and snippets.

@matt-mcdaniel

matt-mcdaniel/README.md

Last active May 7, 2016 18:12
Show Gist options
  • Save matt-mcdaniel/bab3233a9f7a8b6d3131 to your computer and use it in GitHub Desktop.
Save matt-mcdaniel/bab3233a9f7a8b6d3131 to your computer and use it in GitHub Desktop.
Download ZIP
Linear Scale with Decimals
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width: 100%; height: 100%; }
.container {
height: 300px;
width: 70%;
margin: auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.code-container {
width: 100%;
text-align: center;
}
.code-container > code {
font-size: 18px;
}
.plus, .minus {
cursor: pointer;
font-weight: bold;
display:inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
}
.plus {
background-color: springgreen;
}
.minus {
background-color: crimson;
}
.plus > p, .minus > p {
padding-left: 10px;
margin-top: -7px;
font-weight: bold;
color: white;
font-size: 50px;
width: 80px;
}
.minus > p {
padding-left: 16px;
}
.value, .domain, .range {
display: inline;
font-size: 18px;
}
.domain, .range {
max-width: 50px;
}
.domain {
margin-right: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="minus"><p>-</p></div>
Domain:
<div class="domain"></div>
Range:
<div class="range"></div>
<div class="plus"><p>+</p></div>
</div>
<div class="code-container">
<code class="scale">
d3.scale.linear().domain([6, 16]).range([0.9, 0.005]);
</code>
</div>
<script>
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var scale = d3.scale.linear().domain([6, 16]).range([0.9, 0.005]);
var currentValue = 6;
var format = d3.format('.5g');
var domain = d3.select('.domain').text(currentValue);
var range = d3.select('.range').text(scale(currentValue));
d3.select('.minus').on('click', function() {
currentValue -= 1;
domain.text(currentValue);
range.text(scale(currentValue));
})
d3.select('.plus').on('click', function() {
currentValue += 1;
domain.text(currentValue);
range.text(format(scale(currentValue)));
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment