-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathchallenge_guide.html
More file actions
46 lines (42 loc) · 3.8 KB
/
challenge_guide.html
File metadata and controls
46 lines (42 loc) · 3.8 KB
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
---
layout: home
title: Imagine.Dat / Challenge Guide
permalink: /challenge_guide/
---
<div class="content">
<div class="divider"></div>
<div class="title">
<h3>BE PART OF THE CHALLENGE</h3>
<p class="description"><strong>NEXT MEETUP:</strong> THURSDAY SEPT 5TH 5:30PM</p>
<p class="description">REZA'S - 438 Wayne Ave, Dayton, OH 45410</p>
<p class="description"><strong>THEME:</strong> FITNESS</p>
</div>
<div class="divider2"></div>
<div class="text_area">
<h3 class="question">Who are you?</h3>
<div class="answer">We are a group of <strong>creative visualizers of collected data!</strong> If you enjoy presenting data in a creative and impassioned way, you are in the right place. We meet once every two months to share our work and discuss our ideas.</div>
<h3 class="question">Ok… cool. What is “The Challenge”?</h3>
<div class="answer">We have a list of themes for each month of the year. To participate in “The Challenge”, you need to attend our MeetUp and submit an illustration/hand-drawn or an R derived graph that is somehow related to the monthly theme. Get creative! </div>
<h3 class="question">Where do I get my data?</h3>
<div class="answer">You can gather it yourself or you can search for data available online.</div>
<h3 class="question">What tool should I use?</h3>
<div class="answer">Go nuts! You can use whatever you want… from fancy colored pens to sophisticated code. However, we will need you to submit a CodePen link, JPG, or PDF in order to participate. </div>
<h3 class="question">So… What if I don’t have time to put anything together?</h3>
<div class="answer">That’s Okay! Join us anyways and be part of the conversation. </div>
<h3 class="question">I kind of get it, but I need an example.</h3>
<div class="answer">Check out the following CodePens made by Ren and Milu.</div>
<div class="answer expanded_answer">Using the DarkSky weather Api, Ren visualized the likely percentage of cloudiness per day in the daily forecast. The forecast is local to Dayton, Ohio and is updated everyday for the present day and the seven following.</div>
<div>
<img src="/img/Screen Shot 2019-07-18 at 9.05.53 AM.png" />
<a href="https://codepen.io/ren_estep/full/MLoyOq" target="_blank"> Check out the pen here</a>
</div>
<div class="answer expanded_answer">Milu collected the daily temperature average of the month of January. She also collected her mood score average along with the temperature. The following data representation helped her identify if the weather had any effect on her happiness level. The x axis represents the days of January and the y axis represents the temperatures in Dayton, Oh. The size of the dots depend on her mood average (large to small): happy, indiferent, not so happy. The results were not as clear, it looks like Milu is moody on cold and warm days! This data representation was done using React JS and D3.</div>
<p class="codepen" data-height="565" data-theme-id="dark" data-default-tab="js,result" data-user="Milu5489" data-slug-hash="gqGWmY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Imagine Dat Weather Challenge">
<span>See the Pen <a href="https://codepen.io/Milu5489/pen/gqGWmY/">
Imagine Dat Weather Challenge</a> by Milu (<a href="https://codepen.io/Milu5489">@Milu5489</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<div class="answer expanded_answer">Not a fan of code? Check the hand-drawn representations published in the book <a href="http://www.dear-data.com/thebook">Dear Data</a> by Georgia Lupi and Stefanie Posavec.</div>
</div>
</div>