Skip to content

Instantly share code, notes, and snippets.

@nkabrown

nkabrown/index.html

Last active March 29, 2016 15:59
Show Gist options
  • Save nkabrown/4cc364b634fa421d93f5 to your computer and use it in GitHub Desktop.
Save nkabrown/4cc364b634fa421d93f5 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>
<style>
.dates {
margin-left: 200px;
}
}
.entry-date {
width: 52px;
height: 52px;
border-radius: 50%;
background-color: #e52f25;
}
.date {
color: #fff;
font-family: 'Avenir', sans-serif;
text-align: center;
}
</style>
<div class="dates"></div>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
const unixTime = Date.now();
const dateString = new Date(unixTime);
const format = d3.time.format('%m.%d');
const date = format(dateString);
const dateSizes = ['1x', '2x', '3x', '4x'];
const dates = d3.select('.dates')
.selectAll('.entry-date')
.data(dateSizes)
.enter().append('div')
.attr('class', 'entry-date')
.style('width', (d,i) => 52 * (i + 1) + 'px')
.style('height', (d,i) => 52 * (i + 1) + 'px')
.style('margin-bottom', '25px')
.style('margin-left', (d,i) => 50 * (i + 1) * i + 'px')
.style('background-color', '#e52f25')
.style('border-radius', '50%')
.append('p')
.attr('class', 'date')
.style('font-size', (d,i) => 18 * (i + 1) + 'px')
.style('padding', (d,i) => 14 * (i + 1) + 'px 0 0 0')
.text(date);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment