Skip to content

Instantly share code, notes, and snippets.

@githubjeka

githubjeka/.block

Created October 28, 2016 11:32
Show Gist options
  • Save githubjeka/ed40ce6bc1591b306977ba5ba27d06fd to your computer and use it in GitHub Desktop.
Save githubjeka/ed40ce6bc1591b306977ba5ba27d06fd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<meta charset="utf-8">
<style>
svg > g:first-child {
transform: translateX(300px)
}
svg > g:nth-child(2) {
transform: translate(10px, 20px)
}
svg > g:nth-child(3) {
transform: translate(10px, 50px)
}
svg > g:nth-child(4) {
transform: translate(300px, 50px)
}
svg > g:last-child {
transform: translate(10px, 300px)
}
</style>
</head>
<body>
<script>
var linearScale = d3.scaleLinear()
.domain([0, 100])
.range([0, 200])
;
var svg = d3.select("body")
.attr('class', 'axis')
.append("svg")
.attr('width', 960)
.attr('height', 500);
var newGroupForAxis = function (axis) {
svg.append("g").call(axis)
};
newGroupForAxis(d3.axisBottom(linearScale));
newGroupForAxis(d3.axisTop(linearScale));
newGroupForAxis(d3.axisRight(linearScale));
newGroupForAxis(d3.axisLeft(linearScale));
var timeScale = d3.scaleTime()
.domain([new Date(), (new Date()).setDate((new Date).getDate() + 3)])
.range([0, 500])
;
newGroupForAxis(
d3.axisBottom(timeScale)
.ticks(d3.timeHour.every(12))
.tickSizeInner(15)
.tickSizeOuter(5)
.tickPadding([6])
);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment