https://www.ladata.mx/microplastics/

1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="UTF-8"/>
5		<title></title>	
6        <!-- Global site tag (gtag.js) - Google Analytics -->

6
7        <script async src="https://www.googletagmanager.com/gtag/js?id=

7UA-54725856-3

7"></script>
8        

8<script>
9          

9window.dataLayer = window.dataLayer || [];
10          function gtag(){dataLayer.push(arguments);}
11          gtag('js', new Date());
12
13          gtag('config', '

13UA-54725856-3

13');
14        

14</script>

14
15        	
16  		

16<script src="./js/d3/d3.js"></script>

16
17  		

17<script src="./js/p5/p5.js"></script>

17
18  		
19  		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
20		<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" media="screen" />
21		<link rel="stylesheet" href="./css/estilo.css" media="screen"/>
22		
23		<link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,700&display=swap" rel="stylesheet">
24
25        <meta property="og:title" content="Does beauty need microplastics" />
26
27        <meta property="og:type" content="article" />
28        <meta property="og:url" content="" />
29        <meta property="og:description" content="Plastic production has increased exponentially since the early 1960's and reached 322 million tonnes in 2015" />
30        <meta property="og:image" content="http://www.ladata.mx/microplastics/micro.png" />
31
32		

32<script src="./js/jQuery/jquery-2.1.3.js"></script>

32
33		
34   		

34<script src="./bootstrap/js/bootstrap.js"></script>

34
35   		

35<script type="text/javascript" src="./js/typeahead.js"></script>

35
36   		

36<script src="./js/d3v4+jetpack.js"></script>

36
37        
38        

38<script src="./js/graph-scroll.js"></script>

38
39        

39<script src="./js/Snap.svg-0.5.1/dist/snap.svg-min.js"></script>

39
40
41	   <meta http-equiv="Content-Type" content="text/html; charset=unicode-UTF-8" >
42    </head>
43
44	<body class="container-fluid">
45        <div class="modal fade" id="myModal" role="dialog">
46            <div class="modal-dialog modal-lg">
47                <div class="modal-content">
48                    <div class="row">
49                        <div class="col-sm-3"></div>
50                        <div class="col-sm-20">
51                        <button type="button" class="close" data-dismiss="modal">&times;</button>
52                        <h1 class="modal-title">Does beauty need microplastics?  </h1>
53                        <p>This data visualization is related to microplastics and how they contribute to the pollution of the oceans, this situation does not only affect marine species and their environment, it also affects human health. This datavis has four objectives: 1) Reflect the immense amount of beauty products that contain microplastics, 2) Show the producers and brands that create most products with microplastics, 3) That the user knows which of the products he uses daily contributes to the pollution of the oceans. 4) Influence the user's consumption habits.</p>
54                        <p>The database that we occupy has more than 3,000 beauty products that contain microplastics. Each figure represents a product that has microplastics. The symbol codifies the type of registered microplastic and the color, the type of use of the product in question.
55                        
56                        <h4>Why do we choose this design?</h4>
57                        <p>We chose to show all the elements together to represent the vastness of cosmetic products containing microplastics. The random composition and movement of each element try to symbolize the microplastic particles moving in the ocean.</p>
58
59                        <h5>Colour</h5>
60                        <p>The uses were categorized by color: green - “scrubs and peeling”, blue - “shower and bath”, purple - “facial cleanse”, orange - “skin care”, pink - “makeup”, white - “toothpaste” and yellow - “diverse products”.</p>
61                        <h5>Symbols</h5>
62
63                        <p>We use 28 symbols to code each of the microplastics found in the database. The symbols were generated randomly using "Mathematics" software, then they were selected by the team and finally optimized in Illustrator.</p>
64
65                        <p>The main typeface is related to the idea of ​​microplastic particles.</p>
66
67                        <p>We decided to do a scrolly telling to contextualize the problem, break down the coding of the data visualization and show some patterns found in the analysis of the database.</p>
68
69                        <h4> What dataset was used for visualization?</h4>
70                        <p>We used a database of more than 3000 products belonging to the cosmetics industry that contain microplastics, these data was raised by a joint effort of "The Plastic Soap Foundation" and NGOs from "The international Beat the Microbead coalition" (integrated by 92 NGOs in 38 countries) within the framework of the" Beat the Microbead "campaign, which seeks to raise awareness about the contamination of the oceans by microplastics, as well as modifying the production methods of the big producers of cosmetics.</p>
71                         <p > Original Source: <a href="https://www.beatthemicrobead.org/">https://www.beatthemicrobead.org/</a></p>
72                        <p ><a href="./datos/BaseFinalMicroplasticos.csv">Database for this visualization</a></p>
73
74                        <h4>Why do we choose this dataset?</h4>
75                        <p>We chose this database due to the proximity of the mentioned products to our daily life. We believe in order to change the habits of consumers, people must realize the role their daily actions play in the pollution of the oceans, such as using makeup or brushing their teeth.</p>
76
77                        <h4>Why the data set is accepted by the scientific and civil society community?</h4>
78                        <p>The database we used contains information of the products sold in 24 countries, the NGOs in each country were responsible for the collection of the data of each product. The size of this joint effort and the participation of dozens of organizations at the international level is what makes us believe in the rigor of the data collected.</p>
79                       
80                        <h4>For what audience is data visualization intended?</h4>
81                        <p>Our data visualization was made for an adult population that purchases its cosmetic products and cares about the environment and pollution of the oceans.</p>
82                        <h4>

82Why the data visualization is designed for the intended audience? </h4>
83                        <p>We transform the data base in a visualization that presents in a simple way those products that contain microplastics.  The search engine that we developed.
84offer the user a way to identify the products, brands and producers that he uses every day and pollute our oceans.</p>
85                        <h4>What the data visualization audience should learn or do?</h4>
86                        <p>We want that, through the exploration of this visualization, the public realizes that the products they buy and consume contribute to the crisis of ocean pollution and, at the same time, become aware of the role they play in solving the problem to finally change the cosmetics consumed by products that do not contain microplastics.</p>
87                        <h4>Datavis improvements</h4>
88                        <p>For future developments, we consider performing an acuter data cleansing and a thorough analysis to obtain more accurate results, as well as a deeper analysis of the different edges of the problem, through narrative, visualization and data analysis.</p>
89                        </div>
90                    </div>
91                    <div class="row">
92                      <div class="col-sm-3"></div>
93                        <div class="col-sm-20">
94                         
95                        </div>
96                    </div>
97                    <div class="row">
98                      <div class="col-sm-3"></div>
99                        <div class="col-sm-20">
100                        <h4 >Credits</h4>
101                        <p>Information design : Mariana López</p>
102                        <p >Analysis and writing: Erandi Flores Romero </p>
103                        <p >Development and interactivity: Daniel Gómez  </p>
104                        <p >Editing and coordination: Oliver Morales</p>
105                        <a class="ingles" target="_blank" href="http://www.ladata.mx/"> 
106                            <img class="logoladata final" src="./imgs/logoenblanco.svg">
107                        </a>
108                        </div>
109                      
110                    </div>
111                    </div>
112            </div>
113        </div>	
114		<div  class='row' id="elcanvas">
115
116		</div>	
117		
118        <div  class=' row'>  
119            <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#myModal">More info</button>
120        </div>
121		<div  class='container-1 row'>
122
123			<div class ="row titulo">
124				<div class="col-sm-6"></div>
125				<div class="col-sm-12">
126					<div class ="row">
127						<h1>Does beauty need</h1>
128					</div>
129					<div class ="row">
130						<img class="imgport" src="./imgs/microplastics.svg">
131					</div>
132					<div class ="row bullet">
133                        <div class="col-sm-3"></div>
134                        <div class="col-sm-18">
135						  <p>Plastic production has increased exponentially since the early 1960's and reached 322 million tonnes in 2015</p>
136                        </div>
137					</div>
138				</div>
139				<div class="col-sm-6"></div>
140				
141			</div>
142            
143            <div id='sections' class="row">
144            	<div class="row  scrolly0">
145            		<div class="col-sm-6"></div>
146            		<div class="col-sm-12" id="circ0">
147                    	
148                    </div>
149  
150                </div>
151                <div class="row  scrolly1">
152                    <div class="col-sm-6"></div>
153                    <div class="col-sm-12" id="circ1">
154                   
155
156                    </div>
157                </div>
158                <div class="row  scrolly2">
159                    <div class="col-sm-6"></div>
160                    <div class="col-sm-12" id="circ2">
161                    
162
163                    </div>                    
164                </div>
165                <div class="row  scrollyusoScrubs">
166                    <div class="col-sm-6"></div>
167                    <div class="col-sm-12" id="circ3">
168                    
169                    </div>
170                     
171                </div>
172                <div class="row  scrollyusoShower">
173                    <div class="col-sm-6"></div>
174                    <div class="col-sm-12" id="circ4">
175                    
176                    </div>
177                     
178                </div>
179                <div class="row  scrollyusoFacial">
180                    <div class="col-sm-6"></div>
181                    <div class="col-sm-12" id="circ5">
182                    
183                    </div>
184                     
185                </div>
186                <div class="row  scrollyusoSkincare">
187                    <div class="col-sm-6"></div>
188                    <div class="col-sm-12" id="circ6">
189                    
190                    </div>
191                     
192                </div>
193                <div class="row  scrollyusoMake">
194                    <div class="col-sm-6"></div>
195                    <div class="col-sm-12" id="circ7">
196                    
197                    </div>
198                     
199                </div>
200                <div class="row  scrollyusoTooth">
201                    <div class="col-sm-6"></div>
202                    <div class="col-sm-12" id="circ8">
203                    
204                    </div>
205
206                </div>
207                <div class="row  scrollyusoDiverse">
208                    <div class="col-sm-6"></div>
209                    <div class="col-sm-12" id="circ9">
210                    
211                    </div>
212                </div>
213                <div class="row  scrolly4">
214                   <div class="col-sm-6"></div>
215                    <div class="col-sm-12" id="circ10" >
216                    
217                    </div>
218                </div>
219
220                <div class="row  scrolly5">
221                    <div class="col-sm-6"></div>
222                    <div class="col-sm-12" id="circ11">
223                    
224                    </div>
225                </div>
226
227                <div class="row  scrolly6">
228                    <div class="col-sm-6"></div>
229                    <div class="col-sm-12" id="circ12">
230                    
231                    </div>
232                </div>
233                <div class="row  scrolly7">
234                	<div class="col-sm-6"></div>
235                    <div class="col-sm-12" id="circ13">
236                    
237                    </div>
238                </div>
239               
240                <div class="row  scrolly9">
241                	<div  class='row' >
242						<div  class="col-xs-2 col-sm-4 col-md-4"></div>
243						<div  class="col-xs-2 col-sm-4 col-md-4">
244							<input type="text" id="buscador" placeholder="Productors and brands" class="typeahead" name="brands">
245						</div>
246
247					</div>
248                    <div  class='row' >
249                        <div class="col-sm-8"></div>
250                        <div class="col-sm-8" id="circ14">
251                    </div>	
252                     </div>
253                </div>
254                
255                
256
257
258
259            </div>
260        </div>
261
262
263		

263<script src="./js/scriptacirculos.js"></script>

263
264		

264<script src="./js/scripta.js"></script>

264
265
266	</body>
267</html>