Skip to content

Instantly share code, notes, and snippets.

@LyssenkoAlex

LyssenkoAlex/README.md

Last active February 13, 2019 07:43
Show Gist options
  • Save LyssenkoAlex/a725b9a8abd726d83ed3fd7e0febe9e8 to your computer and use it in GitHub Desktop.
Save LyssenkoAlex/a725b9a8abd726d83ed3fd7e0febe9e8 to your computer and use it in GitHub Desktop.
Download ZIP
Week of year d3.js V5
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: sans-serif;
color: #444;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font-size: 10px;
}
</style>
<body>
<h4>Week of Year Example</h4>
<div id="svg"></div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var hEach = 40; // height for each axis
var width = 960,
height = 2*hEach;
var x = d3.scaleTime()
// month starts from 0!
.domain([new Date(2015, 11, 1), new Date(2016, 0, 30)])
.range([0, width]);
var xAxis = d3.axisBottom(x);
// Week of year
var xAxis_woy = d3.axisBottom(x).tickFormat(d3.timeFormat("Week %V"));
var svg = d3.select("#svg").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
var gx = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (5) + ")")
.call(xAxis);
var gx_woy = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (hEach) + ")")
.call(xAxis_woy);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment