make the chart more like the official LTS schedule

lib/index.js

@@ -5,22 +5,35 @@ const D3Node = require('d3-node');
 
 const styles = `
 .current {
-  fill: green;
+  fill: #2aa748;
 }
 .active {
-  fill: steelblue;
+  fill: #47b4ff;
 }
 .maintenance {
-  fill: grey;
+  fill: #89a19d;
 }
 .unstable {
-  fill: gold;
+  fill: #ffb800;
+}
+.bar-join {
+  fill: #ffffff;
+}
+.bar-join.unstable, .bar-join.current {
+  display: none;
+}
+.tick text {
+  font: 16px sans-serif;
+  fill: #89a19d;
+}
+.axis--y .tick text {
+  text-anchor: end;
 }
 .label {
   fill: #fff;
   font: 20px sans-serif;
   font-weight: 100;
-  text-anchor: middle;
+  text-anchor: start;
   dominant-baseline: middle;
   text-transform: uppercase;
 }`;
@@ -81,7 +94,7 @@ function create (options) {
   const { queryStart, queryEnd, html, svg: svgFile, png } = options;
   const data = parseInput(options.data, queryStart, queryEnd);
   const d3n = new D3Node({ svgStyles: styles, d3Module: D3 });
-  const margin = { top: 20, right: 30, bottom: 30, left: 70 };
+  const margin = { top: 30, right: 30, bottom: 30, left: 110 };
   const width = 960 - margin.left - margin.right;
   const height = 500 - margin.top - margin.bottom;
   const xScale = D3.scaleTime()
@@ -90,15 +103,19 @@ function create (options) {
                    .clamp(true);
   const yScale = D3.scaleBand()
                    .domain(data.map((data) => { return data.name; }))
-                   .range([0, height]);
-  const xAxis = D3.axisTop(xScale).tickFormat(D3.timeFormat('%b %Y'));
-  const yAxis = D3.axisLeft(yScale);
+                   .range([0, height])
+                   .padding(0.3);
+  const xAxis = D3.axisBottom(xScale)
+                  .tickSize(height)
+                  .tickFormat(D3.timeFormat('%b %Y'));
+  const yAxis = D3.axisRight(yScale).tickSize(width);
   const svg = d3n.createSVG()
                  .attr('width', width + margin.left + margin.right)
                  .attr('height', height + margin.top + margin.bottom)
                  .append('g')
+                 .attr('id', 'bar-container')
                  .attr('transform', `translate(${margin.left}, ${margin.top})`);
-  const bar = svg.selectAll('g').data(data).enter().append('g');
+
 
   function calculateWidth (data) {
     return xScale(data.end) - xScale(data.start);
@@ -108,30 +125,69 @@ function create (options) {
     return yScale.bandwidth();
   }
 
+  function customXAxis (g) {
+    g.call(xAxis);
+    g.select('.domain').remove();
+    g.selectAll('.tick:nth-child(odd) line').attr('stroke', '#89a19d');
+    g.selectAll('.tick:nth-child(even) line')
+     .attr('stroke', '#89a19d')
+     .attr('stroke-dasharray', '2,2');
+    g.selectAll('.tick text').attr('y', 0).attr('dy', -10);
+  }
+
+  function customYAxis (g) {
+    g.call(yAxis);
+    g.select('.domain').remove();
+    g.selectAll('.tick line').attr('stroke', '#e1e7e7');
+    g.selectAll('.tick text').attr('x', 0).attr('dx', -10);
+    g.append('line')
+     .attr('y1', height)
+     .attr('y2', height)
+     .attr('x2', width)
+     .attr('stroke', '#89a19d');
+  }
+
   svg.append('g')
      .attr('class', 'axis axis--x')
-     .call(xAxis);
+     .call(customXAxis);
 
   svg.append('g')
      .attr('class', 'axis axis--y')
-     .call(yAxis);
+     .call(customYAxis);
+
+  const bar = svg.selectAll('#bar-container').data(data).enter().append('g');
 
   bar.append('rect')
      .attr('class', (data) => { return `bar ${data.type}`; })
-     .attr('rx', 5)
-     .attr('ry', 5)
      .attr('x', (data) => { return xScale(data.start); })
      .attr('y', (data) => { return yScale(data.name); })
      .attr('width', calculateWidth)
      .attr('height', calculateHeight);
 
+  bar.append('rect')
+     .attr('class', (data) => { return `bar-join ${data.type}`; })
+     .attr('x', (data) => { return xScale(data.start) - 1; })
+     .attr('y', (data) => { return yScale(data.name); })
+     .attr('width', 2)
+     .attr('height', calculateHeight)
+     .style('opacity', (data) => {
+       // Hack to hide on current and unstable
+       if ((data.type === 'unstable' || data.type === 'current') ||
+           xScale(data.start) <= 0) {
+         return 0;
+       }
+
+       return 1;
+     });
+
   bar.append('text')
      .attr('class', 'label')
      .attr('x', (data) => {
-       return xScale(data.start) + (calculateWidth(data) / 2);
+       return xScale(data.start) + 15;
      })
      .attr('y', (data) => {
-       return yScale(data.name) + (calculateHeight(data) / 2);
+        // + 2 is a small correction so the text fill is more centered.
+       return yScale(data.name) + (calculateHeight(data) / 2) + 2;
      })
      .text((data) => { return data.type; })
      .style('opacity', (data) => {