CODEWITHSUNDEEP
javascriptd3.jstimeline
randomblink
randomblink

Reputation: 235

Create Vertical Timeline from 01JAN15 -> 31DEC15 in D3.js

I am looking for the code necessary to create a vertical timeline in D3.js that runs from the 1st of January 2015 through to the end of December 2015. I would like to include two entries (via JSON) for any two dates within the middle and have them represented by a colored circle for each. The canvas can be any size, and I have no preference on ticks and axis, as long as it shows dates somehow.

I've created a horizontal one following examples but I can't figure out how I would even get a vertical one to display.

Here is a sample I've been able to get going.

<!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 assumed I could just swap out the "x axis" with a "y axis" in the svg.append call, and change scale(x) to scale(y) but that gives me an empty screen.

Upvotes: 1

Views: 1638

Answers (1)

randomblink
randomblink

Reputation: 235

So I modified the following:

  • svg.append("g").call line and changed the orient from "bottom" to "left"
  • d3.time.scale().range from [0, width] to [height, 0]

Problem solved. Vertical time line.

Upvotes: 1

Related Questions