D3.js Template

by k_sav

CSS

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

JavaScript

const width = 400;
const height = 200;


const domain = ["Mon 12:00", "Mon 18:00", "Tue 12:00", "Tue 18:00", "Wed 12:00", "Wed 18:00"]

const data = [10, 20, 30, 40, 50, 60]


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

const ordinalAxis = vis.append("g")

const x = d3.scale.ordinal()
  .domain(domain)
  .rangeBands([0, width]);

const xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

vis.append("g")
  .attr("class", "x axis")
  .call(xAxis);