Skip to content

Instantly share code, notes, and snippets.

@Spaxe

Spaxe/index.html

Created May 9, 2018 00:34
Show Gist options
  • Save Spaxe/15ddc26926a8e6136a0b57f3ee873f8e to your computer and use it in GitHub Desktop.
Save Spaxe/15ddc26926a8e6136a0b57f3ee873f8e to your computer and use it in GitHub Desktop.
Download ZIP
Example ticks only at the end with time
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 0, bottom: 20, left: 0},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scalePoint()
.domain([0, 1, 2])
.range([0, width])
.padding(1);
var y = d3.scaleTime()
.domain([new Date(2016, 0, 1), new Date(2018, 0, 2)])
.range([height, 0]);
g.append("g")
.attr("transform", "translate(" + x(0) + ",0)")
.attr("class", "axis")
.call(d3.axisLeft(y)
.tickValues([new Date(2016, 0, 1), new Date(2018, 0, 2)])
.tickFormat(d3.timeFormat('%b %Y')));
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment