Skip to content

Instantly share code, notes, and snippets.

@Jennyandhuang

Jennyandhuang/index.html

Last active January 8, 2021 21:24
Show Gist options
  • Save Jennyandhuang/25ba811ef09a1185bc54bc564e5084f6 to your computer and use it in GitHub Desktop.
Save Jennyandhuang/25ba811ef09a1185bc54bc564e5084f6 to your computer and use it in GitHub Desktop.
Download ZIP
Text Transition with D3
Raw
index.html
<!doctype html>
<html>
<head>
<!-- Load d3 source scripts -->
<script src="https://d3js.org/d3.v4.min.js" type="text/JavaScript"></script>
<!-- style section-->
<style>
.axis path{
stroke:rgba(240, 255, 240, 0);
}
.axis text{
fill:#414d52;
font-size: 14px;
font-family:"Arial Black", Gadget, sans-serif;
}
.rank{
font-family:"Arial Black", Gadget, sans-serif;
font-size: 14px;
}
.title{
fill:#414d52;
font-weight: bold;
font-size: 14px;
font-family:"Arial Black", Gadget, sans-serif;
padding: 10px;
}
.year{
fill:#21242427;
font-size: 18px;
font-family:"Arial Black", Gadget, sans-serif;
}
.source{
fill:#8b8b8b;
font-size: 8px;
font-family:"Arial Black", Gadget, sans-serif;
}
.subtitle{
fill:#646464;
font-size: 10px;
font-style: italic;
font-family:"Arial Black", Gadget, sans-serif;
}
</style>
</head>
<body onload="animatedText()">
<!-- svg canvas-->
<svg width="1000" height="600">
</svg>
</body>
<script>
function animatedText() {
var data = [
{ year: 1997, rank: "No.1", word: "customer" },
{ year: 1997, rank: "No.2", word: "investments" },
{ year: 1997, rank: "No.3", word: "continue" },
{ year: 1997, rank: "No.4", word: "Amazon" },
{ year: 1997, rank: "No.5", word: "market" },
{ year: 1998, rank: "No.1", word: "customers" },
{ year: 1998, rank: "No.2", word: "Amazon" },
{ year: 1998, rank: "No.3", word: "build" },
{ year: 1998, rank: "No.4", word: "working" },
{ year: 1998, rank: "No.5", word: "new" },
{ year: 1999, rank: "No.1", word: "customers" },
{ year: 1999, rank: "No.2", word: "Amazon" },
{ year: 1999, rank: "No.3", word: "business" },
{ year: 1999, rank: "No.4", word: "store" },
{ year: 1999, rank: "No.5", word: "continue" },
{ year: 2000, rank: "No.1", word: "customer" },
{ year: 2000, rank: "No.2", word: "company" },
{ year: 2000, rank: "No.3", word: "Amazon" },
{ year: 2000, rank: "No.4", word: "sales" },
{ year: 2000, rank: "No.5", word: "time" },
{ year: 2001, rank: "No.1", word: "customers" },
{ year: 2001, rank: "No.2", word: "cash" },
{ year: 2001, rank: "No.3", word: "flows" },
{ year: 2001, rank: "No.4", word: "shares" },
{ year: 2001, rank: "No.5", word: "company" },
{ year: 2002, rank: "No.1", word: "customer" },
{ year: 2002, rank: "No.2", word: "price" },
{ year: 2002, rank: "No.3", word: "Amazon" },
{ year: 2002, rank: "No.4", word: "books" },
{ year: 2002, rank: "No.5", word: "experience" },
{ year: 2003, rank: "No.1", word: "customer" },
{ year: 2003, rank: "No.2", word: "term" },
{ year: 2003, rank: "No.3", word: "cost" },
{ year: 2003, rank: "No.4", word: "long" },
{ year: 2003, rank: "No.5", word: "Amazon" },
{ year: 2004, rank: "No.1", word: "cash" },
{ year: 2004, rank: "No.2", word: "flow" },
{ year: 2004, rank: "No.3", word: "earnings" },
{ year: 2004, rank: "No.4", word: "capital" },
{ year: 2004, rank: "No.5", word: "free" },
{ year: 2005, rank: "No.1", word: "decisions" },
{ year: 2005, rank: "No.2", word: "customers" },
{ year: 2005, rank: "No.3", word: "prices" },
{ year: 2005, rank: "No.4", word: "make" },
{ year: 2005, rank: "No.5", word: "term" },
{ year: 2006, rank: "No.1", word: "businesses" },
{ year: 2006, rank: "No.2", word: "new" },
{ year: 2006, rank: "No.3", word: "Amazon" },
{ year: 2006, rank: "No.4", word: "grow" },
{ year: 2006, rank: "No.5", word: "culture" },
{ year: 2007, rank: "No.1", word: "book" },
{ year: 2007, rank: "No.2", word: "Kindle" },
{ year: 2007, rank: "No.3", word: "reading" },
{ year: 2007, rank: "No.4", word: "change" },
{ year: 2007, rank: "No.5", word: "tools" },
{ year: 2008, rank: "No.1", word: "customer" },
{ year: 2008, rank: "No.2", word: "Amazon" },
{ year: 2008, rank: "No.3", word: "Kindle" },
{ year: 2008, rank: "No.4", word: "new" },
{ year: 2008, rank: "No.5", word: "sellers" },
{ year: 2009, rank: "No.1", word: "customers" },
{ year: 2009, rank: "No.2", word: "goals" },
{ year: 2009, rank: "No.3", word: "Amazon" },
{ year: 2009, rank: "No.4", word: "experience" },
{ year: 2009, rank: "No.5", word: "new" },
{ year: 2010, rank: "No.1", word: "data" },
{ year: 2010, rank: "No.2", word: "Amazon" },
{ year: 2010, rank: "No.3", word: "services" },
{ year: 2010, rank: "No.4", word: "systems" },
{ year: 2010, rank: "No.5", word: "technology" },
{ year: 2011, rank: "No.1", word: "Amazon" },
{ year: 2011, rank: "No.2", word: "authors" },
{ year: 2011, rank: "No.3", word: "get" },
{ year: 2011, rank: "No.4", word: "KDP" },
{ year: 2011, rank: "No.5", word: "publishing" },
{ year: 2012, rank: "No.1", word: "customers" },
{ year: 2012, rank: "No.2", word: "Amazon" },
{ year: 2012, rank: "No.3", word: "price" },
{ year: 2012, rank: "No.4", word: "Prime" },
{ year: 2012, rank: "No.5", word: "proactively" },
{ year: 2013, rank: "No.1", word: "Amazon" },
{ year: 2013, rank: "No.2", word: "customers" },
{ year: 2013, rank: "No.3", word: "team" },
{ year: 2013, rank: "No.4", word: "Prime" },
{ year: 2013, rank: "No.5", word: "new" },
{ year: 2014, rank: "No.1", word: "customers" },
{ year: 2014, rank: "No.2", word: "Amazon" },
{ year: 2014, rank: "No.3", word: "service" },
{ year: 2014, rank: "No.4", word: "sellers" },
{ year: 2014, rank: "No.5", word: "one" },
{ year: 2015, rank: "No.1", word: "customers" },
{ year: 2015, rank: "No.2", word: "Amazon" },
{ year: 2015, rank: "No.3", word: "service" },
{ year: 2015, rank: "No.4", word: "sellers" },
{ year: 2015, rank: "No.5", word: "one" },
{ year: 2016, rank: "No.1", word: "customer" },
{ year: 2016, rank: "No.2", word: "decision" },
{ year: 2016, rank: "No.3", word: "day" },
{ year: 2016, rank: "No.4", word: "process" },
{ year: 2016, rank: "No.5", word: "Amazon" },
{ year: 2017, rank: "No.1", word: "Amazon" },
{ year: 2017, rank: "No.2", word: "high" },
{ year: 2017, rank: "No.3", word: "standards" },
{ year: 2017, rank: "No.4", word: "Prime" },
{ year: 2017, rank: "No.5", word: "customers" }
]
var yScale = d3.scaleBand().domain(data.map(d => d.rank)).range([40, 200])
var yAxis = d3.axisLeft().scale(yScale)
var svg = d3.select("svg")
//axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(100,20)")
.call(yAxis)
//source
svg.append("text")
.attr("class","source")
.text("Source: HBR - Amazon’s Priorities Over the Years, Based on Jeff Bezos’s Letters to Shareholders")
.attr("x",10)
.attr("y",250)
//subtitle
svg.append("text")
.attr("class","subtitle")
.text('"Customer(s)" and "Amazon" lead the pack')
.attr("x",10)
.attr("y",40)
//Initial title and chart
svg.append("text")
.classed("title", true)
.text("The Most Commonly Used Words in Amazon's Letter to Shareholders")
.attr("x", 10)
.attr("y", 20)
//initial year
svg.selectAll("text.year")
.data(data.filter(d => d.year == 1997))
.enter().append("text")
.attr("x", 220)
.attr("y", 145)
.classed("year", true)
.html(d=>("Year "+d.year))
//initial chart
svg.selectAll("text.rank")
.data(data.filter(d => d.year == 1997))
.enter()
.append("text")
.attr("x", 105)
.attr("y", d => (yScale(d.rank)+40))
.classed("rank", true)
.text(d => d.word)
.attr("fill", d => d.word == "customers" || d.word == "customer" ? "#f6ae2d" : "#5c6b73" && d.word == "Amazon" ? "#55a630" : "#5c6b73")
function transitionText(data) {
//year transition
var title=svg.selectAll("text.year").data(data,d=>d.year)
//exit
title.exit()
.style("fill", "white")
.remove();
//enter
var enter_title = title.enter().append("text")
.attr("x", 220)
.attr("y", 145)
.classed("year", true)
.html(d=>("Year " + d.year))
//text transition
var text = svg.selectAll("text.rank").data(data,d=>d.year)
//exit
text.exit()
.transition()
.duration(1000)
.style("fill", "white")
.remove();
//enter
var enter = text.enter().append("text")
.attr("x", 105)
.attr("y", d => (yScale(d.rank)) + 40)
.classed("rank", true)
.text(d => d.word)
.attr("fill", d => d.word == "customers" || d.word == "customer" ? "#f6ae2d" : "#5c6b73" && d.word == "Amazon" ? "#55a630" : "#5c6b73")
}
//set up loop
var yearCounter = 1998
yearLoop = setInterval(() => {
if (yearCounter == 2017) {
clearInterval(yearLoop)
}
transitionText(data.filter(d => d.year == yearCounter))
yearCounter += 1
}, 2000);
}
</script>
</html>
Raw
styles.css
/* todo: add styles */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment