1wheel/README.md

## README.md

      
    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.

  
## 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>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>