Skip to content

Instantly share code, notes, and snippets.

@da1fujimoto

da1fujimoto/.block

Last active June 24, 2020 00:18
Show Gist options
  • Save da1fujimoto/dc8e9143f9106979e98c850c664a77fc to your computer and use it in GitHub Desktop.
Save da1fujimoto/dc8e9143f9106979e98c850c664a77fc to your computer and use it in GitHub Desktop.
Download ZIP
clock
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Japan TopoJSON</title>
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-radial-axis@1.6.4/dist/d3-radial-axis.min.js" charset="utf-8"></script>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<div id="clock"></div>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
const width = 300;
const height = 300;
const r = Math.min(width, height) / 2;
const secMinScale = d3.scaleLinear().domain([0, 60]).range([0, 360]);
const hourScale = d3.scaleLinear().domain([0, 12]).range([0, 360]);
const pointersRelDimensions = [
{ class: 'hour', width: 0.06, height: 0.55 },
{ class: 'min', width: 0.05, height: 0.85 },
{ class: 'sec', width: 0.02, height: 0.85 }
]
const svg = d3.select('#clock').append('svg')
.attr('width', r * 2)
.attr('height', r * 2)
.attr('viewBox', `${-r} ${-r} ${r*2} ${r*2}`)
svg.append('circle').classed('background', true)
.attr('cx', 0)
.attr('cy', 0)
.attr('r', r)
svg.append('g').classed('axis', true)
.call(
d3.axisRadialInner(
hourScale.copy().range([0, 2 * Math.PI]),
r - 1
)
.ticks(12)
.tickSize(12)
)
svg.append('g').classed('minor-ticks', true)
.call(
d3.axisRadialInner(
secMinScale.copy().range([0, 2 * Math.PI]),
r - 1
)
.ticks(60)
.tickSize(6)
)
svg.append('g').classed('pointers', true)
.attr('transform', `scale(${r})`)
.selectAll('rect')
.data(pointersRelDimensions)
.enter()
.append('rect')
.attr('class', d=> d.class)
.attr('x', d => -d.width/2)
.attr('y', d => -d.height + d.width/2)
.attr('width', d => d.width)
.attr('height', d => d.height)
.attr('rx', 0.02)
.attr('ry', 0.03)
svg.select('.pointers')
.append('circle').classed('center', true)
.attr('r', 0.05)
const dt = new Date('2000-01-01T18:45:55');
const setTime = (dt) => {
const ms = dt.getMilliseconds(),
secs = dt.getSeconds() + ms/1000,
mins = dt.getMinutes() + secs/60,
hours = dt.getHours()%12 + mins/60
d3.select('.pointers .hour').attr('transform', `rotate(${hourScale(hours)})`)
d3.select('.pointers .min').attr('transform', `rotate(${secMinScale(mins)})`)
d3.select('.pointers .sec').attr('transform', `rotate(${secMinScale(secs)})`)
}
setTime(dt);
Raw
style.css
body {
text-align: center;
font-family: Sans-serif;
margin: 0 auto;
}
.background {
stroke-width: 0;
fill: white;
fill-opacity: 0.3;
}
.axis .domain, .axis .tick line {
stroke-width: 3px;
stroke: black;
}
.axis .tick:first-of-type {
display: none;
}
.axis .tick text {
font-size: 20px;
}
.minor-ticks text, .minor-ticks path {
display: none;
}
.pointers rect {
fill-opacity: 0.7;
}
.pointers .hour, .pointers .min {
fill: black;
}
.pointers .sec {
fill: darkgrey;
}
.pointers .center {
fill: darkgrey;
}
.sec {
display: none;
}
LICENSE
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment