Skip to content

Instantly share code, notes, and snippets.

@d3indepth
Last active February 10, 2021 08:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save d3indepth/2d51279bdad4a553b2005af680108257 to your computer and use it in GitHub Desktop.
Save d3indepth/2d51279bdad4a553b2005af680108257 to your computer and use it in GitHub Desktop.
Scale function example
license: gpl-3.0
height: 50
border: no
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Scale example</title>
</head>
<style>
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
color: #333;
}
text {
fill: #555;
}
.inner text {
text-anchor: middle;
}
</style>
<body>
<svg width="700" height="40">
<g class="inner" transform="translate(40, 30)">
</g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var data = [ 0, 2, 3, 5, 7.5, 9, 10 ];
var myScale = d3.scaleLinear()
.domain([0, 10])
.range([0, 600]);
d3.select('svg .inner')
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('r', 3)
.attr('cx', function(d) {
return myScale(d);
});
d3.select('svg .inner')
.selectAll('text')
.data(data)
.enter()
.append('text')
.attr('x', function(d) {
return myScale(d);
})
.attr('y', -8)
.text(function(d) {
return d;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment