Skip to content

Instantly share code, notes, and snippets.

Last active August 2, 2017 11:16
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
scaleOrdinal example
license: gpl-3.0
height: 80
border: no
<!DOCTYPE html>
<meta charset="utf-8">
<title>Ordinal scale</title>
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: #333;
<svg width="800" height="60">
<g id="wrapper" transform="translate(100, 40)">
<script src=""></script>
var myData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
var linearScale = d3.scaleLinear()
.domain([0, 11])
.range([0, 600]);
var ordinalScale = d3.scaleOrdinal()
.range(['black', '#ccc', '#ccc']);'#wrapper')
.attr('x', function(d, i) {
return linearScale(i);
.text(function(d) {
return d;
.style('fill', function(d) {
return ordinalScale(d);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment