I am in need of assistance with creating a vertical timeline using D3.js that spans from the beginning of January 2015 to the end of December 2015. My goal is to have two entries, represented by colored circles, at specific dates within the middle of the timeline. These entries will be provided via JSON. I do not have any size requirements for the canvas, and I am open to different options for ticks and axis as long as the dates are clearly displayed.
I was able to successfully create a horizontal timeline following some examples, but I am struggling to figure out how to display a vertical one.
Below is a snippet of the code I have been working on:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var format = d3.time.format("%Y-%m-%d");
var startDate = format.parse("2015-01-01");
var endDate = format.parse("2015-12-31");
var margin = {top: 100, right: 100, bottom: 100, left: 100},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([startDate, endDate])
.nice(d3.time.month)
.range([0, width]);
var svg = d3.select("body").append("svg")
.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(d3.svg.axis().scale(x).orient("bottom"));
</script>
I tried changing the "x axis" to a "y axis" in the svg.append call and switching scale(x) to scale(y), but this resulted in a blank screen.