Skip to content

Instantly share code, notes, and snippets.

@nkabrown

nkabrown/index.html

Last active March 15, 2016 19:42
Show Gist options
  • Save nkabrown/35b89db14b9dade66871 to your computer and use it in GitHub Desktop.
Save nkabrown/35b89db14b9dade66871 to your computer and use it in GitHub Desktop.
Download ZIP
d3 date icons
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>D3 date</title>
<link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>
<style>
.date-row {
margin-left: 100px;
}
.date-area {
display: inline-block;
margin-top: 100px;
margin-right: 50px;
background-color: #656555;
border-radius: 50%;
}
.list-date {
color: #fff;
font-family: 'Fira Sans', sans-serif;
}
.month {
display: block;
float: right;
}
.day {
float: right;
}
</style>
<body>
<div class="date-row"></div>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
const month = new Date().toDateString().slice(4,7);
const day = new Date().toDateString().slice(8,10);
const dateSizes = ['1x', '2x', '3x', '4x'];
const dates = d3.select('.date-row')
.selectAll('.date-area')
.data(dateSizes)
.enter().append('div')
.attr('class', 'date-area')
.style('width', (d,i) => (51 * (i + 1)) + 'px')
.style('height', (d,i) => (51 * (i + 1)) + 'px')
.style('background-color', '#656555')
.style('border-radius', '50%');
const date = d3.selectAll('.date-area')
.append('span')
.attr('class', 'list-date');
date.append('span')
.attr('class', 'month')
.style('font-size', (d,i) => (12 * (i + 1)) + 'pt')
.style('line-height', (d,i) => (24 * (i + 1)) + 'px')
.style('padding', (d,i) => (3 * (i + 1)) + 'px ' + (11 * (i + 1)) + 'px 0 0')
.text(month);
date.append('span')
.attr('class', 'day')
.style('font-size', (d,i) => (20 * (i + 1)) + 'pt')
.style('line-height', (d,i) => (17 * (i + 1)) + 'px')
.style('padding', (d,i) => (1 * (i + 1)) + 'px ' + (3 * (i + 1)) + 'px ' + (10 * (i + 1)) + 'px ' + (15 * (i + 1)) + 'px')
.text(day);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment