This demonstrates the basic usage of d3-milestones
. https://www.npmjs.com/package/d3-milestones
Last active
January 3, 2018 16:32
-
-
Save walterra/385f914c4f38e42fab740860ca22db16 to your computer and use it in GitHub Desktop.
Quentin Tarantino Movie Timeline
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: Apache-2.0 | |
border: no | |
height: 200 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
width: 960px; | |
height: 500px; | |
position: relative; | |
} | |
</style> | |
<link rel="stylesheet" href="https://unpkg.com/d3-milestones@1.0.0-alpha8/build/d3-milestones.css"> | |
<script src="https://unpkg.com/d3-milestones@1.0.0-alpha8/build/d3-milestones.min.js"></script> | |
<div id="timeline"></div> | |
<script> | |
milestones('#timeline') | |
.mapping({ | |
'timestamp': 'year', | |
'text': 'title' | |
}) | |
.parseTime('%Y') | |
.aggregateBy('year') | |
.render([ | |
{ year: 1983, title: 'Love Birds in Bondage' }, | |
{ year: 1987, title: 'My Best Friend\'s Birthday' }, | |
{ year: 1991, title: 'Reservoir Dogs: Sundance Institue 1991 June Film Lab' }, | |
{ year: 1992, title: 'Reservoir Dogs' }, | |
{ year: 1994, title: 'Pulp Fiction' }, | |
{ year: 1995, title: 'ER (Motherhood Episode)' }, | |
{ year: 1995, title: 'Four Rooms' }, | |
{ year: 1997, title: 'Jackie Brown' }, | |
{ year: 2003, title: 'Kill Bill: Vol. 1' }, | |
{ year: 2004, title: 'Kill Bill: Vol. 2' }, | |
{ year: 2004, title: 'Jimmy Kimmel Live! (#3.75 Episode)' }, | |
{ year: 2005, title: 'Sin City' }, | |
{ year: 2005, title: 'CSI: Crime Scene Ingestivation (2 Episodes)' }, | |
{ year: 2007, title: 'Grindhouse (segment "Death Proof")' }, | |
{ year: 2007, title: 'Death Proof' }, | |
{ year: 2009, title: 'Inglourious Basterds' }, | |
{ year: 2011, title: 'Kill Bill: The Whole Bloody Affair' }, | |
{ year: 2012, title: 'Django Unchained' }, | |
{ year: 2015, title: 'The Hateful Eight' }, | |
{ year: 2019, title: 'Untitled Manson Family Project (announced)' } | |
]); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment