Skip to content

Instantly share code, notes, and snippets.

Last active February 22, 2019 23:02
  • Star 2 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
Save mbostock/3306147 to your computer and use it in GitHub Desktop.
d3.time.scale nice
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
.axis text {
font: 10px sans-serif;
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
<script src="//"></script>
var margin = {top: 100, right: 100, bottom: 100, left: 100},
width = 960 - margin.left - margin.right,
height = 500 - - margin.bottom;
var x = d3.time.scale()
.domain([new Date, new Date])
.range([0, width]);
var svg ="body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + + margin.bottom)
.attr("transform", "translate(" + margin.left + "," + + ")");
.attr("class", "x axis")
Copy link

kylelk commented Jan 17, 2014

Thank you, This was very helpful and easy to understand

Copy link

Hi Mike. Thanks for this great framework!

I'm using your d3.v5 scaleTime and timeFormat with this basic approach (hopefully this line is sufficient for context):

I'm just wondering if you can think of some way I could change the axis label text? In my case eg. I would like to go to -10000 but it only prints "0000" (4 digit limit).


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment