-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (95 loc) · 9.55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-136102323-1', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Competition After Competition</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Haries Ramdhani">
<meta name="description" content="Breaking into Indonesia's entertainment industry and trying to make it big after the talent shows">
<link rel="shortcut icon" type="image/png" href="/src/assets/img/favicon.png" />
<meta property="og:image" content="https://raw.githubusercontent.com/hariesramdhani/competition-after-competition/master/handle.png">
<meta property="og:description" content="Breaking into Indonesia's entertainment industry and trying to make it big after the talent shows.">
<meta property="og:title" content="Competition After Competition">
<!--Twitter-->
<meta name="twitter:title" content="Competition After Competition">
<meta name="twitter:description" content="Breaking into Indonesia's entertainment industry and trying to make it big after the talent shows">
<meta name="twitter:image" content="https://raw.githubusercontent.com/hariesramdhani/competition-after-competition/master/handle.png">
<meta name="twitter:card" content="summary_large_image">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="src/css/main.css">
<!-- Scripts -->
<script type="text/javascript" src="src/assets/scripts/d3.min.js"></script>
<script type="text/javascript" src="src/assets/scripts/ScrollMagic.min.js"></script>
</head>
<body>
<div class="main-story">
<div id="title-intro">
<div id="story-prose-airdate">
<div class="title-container">
<h1>COMPETITION After Competition</h1>
<h2>Breaking into Indonesia's entertainment industry and trying to make it big after the talent shows</h2>
<h3>By <a href="https://twitter.com/Harieesss">Haries Ramdhani</a></h3>
</div>
<p id="par1" style="margin-bottom: 50px; text-align: justify;">Since its first appearance on the local TV in the 90s, talent shows successfully bud, grew and attracted many Indonesian tv audiences. Its impact became more prominent the day AFI (Fantasy Academy of Indosiar), a weekly singing competition premiered in Indosiar in 2003. It was a stepping stone for other talent shows like Indonesian Idol, Indonesia Dangdut Competition (KDI) to come into view. Even in 2019, talent shows still continue to exist with various names and different competition mechanics.</p>
<div id="airdate-fade"></div>
</div>
</div>
<div id="story">
<div id="story-heatmap">
</div>
<div id="story-prose">
<p id="par2" style="margin-top: 6vw;">Every year, thousands of people from diverse background auditioned for a seat in the Top 12 to Top 20 of the shows. In which they will walk through several elimination process until a winner is selected at the end and becomes the newly born "Indonesian Idol".<span id="legend-fade"></span> The harsh truth is, eventhough it connotes the end of the competition, it is actually also the start of the competition, a competition of breaking into the entertainment industry and of making it big. </p>
<p id="par3">Of the <span style="color: #CCCCCC"><strong>310 contenders</strong></span> that made it to the top 12 of 31 different seasons of competitions <span style="color: #8AE49C"><strong>only 150 of them</strong></span> were able to break into the industry after the competition. Whether it is as a solo artist, band member, TV soap opera actor or even TV host.</p>
<p id="par4">Getting an "entertainer" predicate isn't the end of the journey, having faithful listeners will keep the stars shine. Only <span style="color: #FFDA4A"><strong>48 contenders</strong></span> successfully attracted <span style="color: #17D662"><strong>more than 1000 monthly listeners</strong></span> on <span style="color: #17D662"><strong>Spotify</strong></span>.</p>
<p id="par5">The sense of competition is discerned more when it came to awards, as this time they did not only compete with their fellow contenders but also with other singers, some who had established well reputation in the entertainment industry. Only <span style="color: #FF914A"><strong>14 contenders</strong></span> had been nominated for an award or more during their career.</p>
<p id="par6">At the end, it shrinked to only <span style="color: #D55154"><strong>10 (roughly 3%) of them</strong></span> got the recognitions they deserve and won the awards they were nominated for.<span id="heatmap-fade"></span></p>
<p id="par7"></p>
</div>
</div>
</div>
<div id="additional-story">
<h2>JOURNEY TO THE FIRST AWARD</h2>
<div class="additional-story-prose">
<p>While it only took 5 months for <a href="https://en.wikipedia.org/wiki/Fatin_Shidqia">Fatin Shidqia</a> to win her <span style="color: #D55154"><strong>first award</strong></span> as the Rising Star of the Year, the roads that the other contenders had to cross were not as smooth as the one that Fatin took. Only four of the contenders won their <span style="color: #D55154"><strong>first award</strong></span> in no more than a year after their competition and among these four only one person (Fatin Shidqia) was the winner of the talent show they were competing.</p>
<p>For <a href="https://id.wikipedia.org/wiki/Kunto_Aji">Kunto Aji</a> —eliminated during the Top 4 Spectacular Show of Indonesian Idol—, the journey was a whole lot different. Took him almost 7 years to win his <span style="color: #D55154"><strong>first award</strong></span>. This was due to the fact that he didnt start off releasing <span style="color: #8AE49C"><strong>single</strong></span> after the competition, instead he starred in a movie before releasing his <span style="color: #8AE49C"><strong>single</strong></span>, 5 years 10 months later after the competition.</p>
</div>
<div id="story-timeline">
</div>
</div>
<div id="additional-story-two">
<!-- <h2>JOURNEY TO THE FIRST AWARD</h2> -->
<div class="additional-story-prose">
<p>While there are many other factors that affect the popularity of the contenders, in terms of making successfull entertainers —ones who were able to <span style="color: #8AE49C">penetrate the industry</span>—, <span style="color: #3B5090">Indonesian Idol</span> and <span style="color: #965552">The Voice Indonesia</span> appear to be on top, followed by <span style="color: #E3B449">Rising Star Indonesia</span>. In the other hand, you're unlikely to penetrate into the industry (getting an on air job) if you're a contender of <span style="color: #354B95">Indonesia Mencari Bakat</span>. Also, <span style="color: #3B5090">Indonesian Idol</span> has the highest rate of grandfinalists (ranked 1st to 3rd during the competition) who were able to penetrate the industry, compared to the other shows.</p>
</div>
<div id="story-comparison">
</div>
<div class="additional-story-prose">
<p>To play with the interactive data visualization above, click the rectangle button with the round corner, each button represents a condition. For example when button Male and ENT are clicked it will show you the number of contenders that are male and succesfully entered the industry, out of overall contenders. Once the button is clicked, its color will become lighter.</p>
<p style="font-size: 1vw; color: grey;">ENT (Get into the entertainment industry), SPO (Have more than 1000 monthly listeners), NOM (Nominated in one award or more), WON (Won an award or more).</p>
</div>
</div>
<div id="methods">
<h2>METHODS</h2>
<div class="additional-story-prose">
<p>Most of the data were scrapped from Wikipedia, validations from news were done to prove that the data are correct. Some data were incomplete and missing also the fact that the contenders sometimes don't use their real names as their 'artist' names, manual search had to be performed. Monthly listeners data were collected from Spotify. Visit the GitHub repository for more information about the methods and how the charts/graphs were generated.</p>
<p style="font-size: 1vw; text-align: center; margin-top: 4vw;">Inspired by pudding.cool. Haries Ramdhani © 2019 .</p>
</div>
<div id="story-timeline">
</div>
</div>
</div>
<h1 id="sorry">You need to rotate your phone (change it to landscape mode) in order for this to work. For better experience please use browser.</h1>
<script type="module" src="src/js/main.js"></script>
</body>
</html>