Skip to content

Instantly share code, notes, and snippets.

@rrag
Created Feb 27, 2015
Embed
What would you like to do?
No weekend scale
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment