Skip to content

Instantly share code, notes, and snippets.

@1wheel

1wheel/README.md

Last active August 22, 2016 02:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 1wheel/8571405 to your computer and use it in GitHub Desktop.
Save 1wheel/8571405 to your computer and use it in GitHub Desktop.
Download ZIP
tick-values
Raw
README.md

Is there a way to prevent the two subsequent odd-numbered days at the end of each year from generating adjacent ticks? In this case I would prefer a tick at Dec 29, Dec 31, Jan 2, Jan 4, etc.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
p { width: 600px; margin-bottom: 30px; }
.chart { shape-rendering: crispEdges; }
.axis text { font: 10px sans-serif; }
.axis line, .axis path { fill: none; stroke: black; }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var start_date = "2013-12-21T00:00:00Z",
end_date = "2014-01-07T00:00:00Z",
iso = d3.time.format.iso,
t1 = iso.parse(start_date),
t2 = iso.parse(end_date);
var margin = {top: 0, right: 10, bottom: 20, left: 10},
width = 600 - margin.left - margin.right,
height = 100 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([t1, t2])
.range([0, width])
var xAxis = d3.svg.axis()
.scale(x)
.tickValues(d3.time.days(t1, t2).filter(function(d, i){ return !(i % 2); }))
var svg = d3.select("body").append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append('g')
.attr('class', 'x axis')
.call(xAxis)
.selectAll('text')
.attr('fill', function(d) { if(is_problematic(d)) { return "red"; } })
function is_problematic(d) {
return ((d.getDate() == 31) || (d.getDate() == 1));
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment