rrag/README.md

## README.md

      
    Raw
  

              README.md
            
          
    No weekend scale, inspired by
http://bl.ocks.org/herrstucki/5403383

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font-family: Helvetica, Arial, sans-serif;
}
.reference-line {
  stroke: #333;
  shape-rendering: crispEdges;
  stroke-dasharray: 3;
}
.connection-line {
  stroke: red;
  stroke-width: 0.5;
}
text {
  font-size: 9px;
  text-anchor: middle;
}
  .line {
    fill: none;
    stroke: black;
    stroke-width: 1px;
  }

  .axis line,
  .axis path {
    stroke-width: 1px;
    stroke: black;
    fill: none;
  }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">

var width = 960,
    height = 500;

var fmtMonth = d3.time.format("%b");

var today = d3.time.day(new Date(2013, 3, 16)), dates = [];

for (var i = -145; i <= 80; i++) {
	var newDay = d3.time.day.offset(today, i);
	// saturday = 6, sunday = 0
	if (newDay.getDay() < 6 && newDay.getDay() > 0) {
		dates.push(d3.time.day.offset(today, i));
	}
}

var vis = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var linear = vis.append("g").attr("transform", "translate(20, 10)"),
    polyLinear = vis.append("g").attr("transform", "translate(20, 100)");


// Linear time scale

var linearTimeScale = d3.time.scale()
  .domain(d3.extent(dates))
  .range([0, 940]);

var linearAxis = d3.svg.axis().scale(linearTimeScale)
//.tickFormat(d3.time.format("%Y-%m-%d"))
;

console.log(linearTimeScale.ticks());


linear.append("g").attr("class", "x axis").call(linearAxis);

// poly linear scale
var tickWidth = (940) / (dates.length - 1);

var range = dates.map(function (d, i) { return (i * tickWidth); });

var polylinearTimeScale = d3.time.scale()
  .domain(dates)
  .range(range);

var polylinearAxis = d3.svg.axis().scale(polylinearTimeScale);

var ticks = polylinearTimeScale.ticks();

var j = 0;
var displayTicks = [];
for (var i = 0; i < dates.length && j < ticks.length; i++) {
  if (ticks[j].getTime() < dates[i].getTime()) {
    j++;
    displayTicks.push(dates[i]);
  }
};

console.log(ticks);
console.log(displayTicks);

polylinearAxis.tickValues(displayTicks);
//polylinearAxis.tickFormat(d3.time.format("%Y-%m-%d"))


polyLinear.append("g").attr("class", "x axis").call(polylinearAxis);
/**/
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	font-family: Helvetica, Arial, sans-serif;
	}
	.reference-line {
	stroke: #333;
	shape-rendering: crispEdges;
	stroke-dasharray: 3;
	}
	.connection-line {
	stroke: red;
	stroke-width: 0.5;
	}
	text {
	font-size: 9px;
	text-anchor: middle;
	}
	.line {
	fill: none;
	stroke: black;
	stroke-width: 1px;
	}

	.axis line,
	.axis path {
	stroke-width: 1px;
	stroke: black;
	fill: none;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript">

	var width = 960,
	height = 500;

	var fmtMonth = d3.time.format("%b");

	var today = d3.time.day(new Date(2013, 3, 16)), dates = [];

	for (var i = -145; i <= 80; i++) {
	var newDay = d3.time.day.offset(today, i);
	// saturday = 6, sunday = 0
	if (newDay.getDay() < 6 && newDay.getDay() > 0) {
	dates.push(d3.time.day.offset(today, i));
	}
	}

	var vis = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var linear = vis.append("g").attr("transform", "translate(20, 10)"),
	polyLinear = vis.append("g").attr("transform", "translate(20, 100)");


	// Linear time scale

	var linearTimeScale = d3.time.scale()
	.domain(d3.extent(dates))
	.range([0, 940]);

	var linearAxis = d3.svg.axis().scale(linearTimeScale)
	//.tickFormat(d3.time.format("%Y-%m-%d"))
	;

	console.log(linearTimeScale.ticks());


	linear.append("g").attr("class", "x axis").call(linearAxis);

	// poly linear scale
	var tickWidth = (940) / (dates.length - 1);

	var range = dates.map(function (d, i) { return (i * tickWidth); });

	var polylinearTimeScale = d3.time.scale()
	.domain(dates)
	.range(range);

	var polylinearAxis = d3.svg.axis().scale(polylinearTimeScale);

	var ticks = polylinearTimeScale.ticks();

	var j = 0;
	var displayTicks = [];
	for (var i = 0; i < dates.length && j < ticks.length; i++) {
	if (ticks[j].getTime() < dates[i].getTime()) {
	j++;
	displayTicks.push(dates[i]);
	}
	};

	console.log(ticks);
	console.log(displayTicks);

	polylinearAxis.tickValues(displayTicks);
	//polylinearAxis.tickFormat(d3.time.format("%Y-%m-%d"))


	polyLinear.append("g").attr("class", "x axis").call(polylinearAxis);
	/**/
	</script>