# Project-Pudding-Scrollytelling

a planning doc!

## Laura and JK's questions:

1. will this scrollytelling website thing we build live on github? probably...
2. what languages do we need to learn in order to learn how to make a scrollytelling website
3. what story are we trying to tell that will scroll? Is there something related to one of our projects that would be useful?
4. how closely (if at all) do we want to follow the pudding "instruction manual" for how to make dope s*%@

## Some tutorials we have found:

* this [medium article](https://medium.com/nightingale/from-storytelling-to-scrollytelling-a-short-introduction-and-beyond-fbda32066964) to read
* the Pudding articles how to make dope s@*# [part 1](https://pudding.cool/process/how-to-make-dope-shit-part-1/) and [part 2](https://pudding.cool/process/how-to-make-dope-shit-part-2)
* this [scrollytelling implementation](https://pudding.cool/process/how-to-implement-scrollytelling/) how-to in six deifferent libraries
* this aritcle on [best scrollytelling practices](https://pudding.cool/process/responsive-scrollytelling/)
* background on [how to make](https://pudding.cool/process/weighted-pivot-scatter-plot/) a sick scatter plot
* an [introduction](https://pudding.cool/process/introducing-scrollama/) to Scrollama (fun name)
* [making data viz](https://pudding.cool/process/flexbox-layout/) without SVG using D3 and Flexbox (what do these words mean?)

## Week 0 Progress:

### JK goes down a rabbit hole:

#### Read the [article on storytelling to scrollytelling](https://medium.com/nightingale/from-storytelling-to-scrollytelling-a-short-introduction-and-beyond-fbda32066964)
It proposes 3 basic types of scrollytelling:
1. as **steps** where you have discrete animations of the visuals,
2. as **continuous** where the animations of visuals happen more fluidly, and
3. as **triggers** where you "activate" animations/videos/highlights.

Ofc you can mix all of these together. It made me think that a cool way to push the envelope a bit here would be to have scrolly in multiple directions with an embedded/overlayed "map" to show you the whole terrain so to speak...kind of like Patrick's unfolding journal--but in a digital adventure scrolly format. That will be my ambition lighting my learning fire for a bit at least! Out of curiostity I'm oing to follow links from this article on the [pudding's six libraries](https://pudding.cool/process/how-to-implement-scrollytelling/), [how to make annotations in d3](https://d3-annotation.susielu.com/), and [how to make a pretty tool tip with d3](https://www.d3-graph-gallery.com/graph/interactivity_tooltip.html)

#### read the article on [how to make a pretty tool tip with d3](https://www.d3-graph-gallery.com/graph/interactivity_tooltip.html)

I *really* want to try this! It seems pretty easy...some questions I have though:

1. can we start from the very beginning...(a very good place to start) where we set up our atom environment with I'm guessing files of html, css, and js?
2. is d3 a cool thing? is it going to be around for a while and worth learning a lot about? What's the react version of d3? Do we have/ can we make a simple post on d3 as a tool?

This whole site is pretty cool--I could explore it for a while! It has a section on chosing the right type of visualization for your data. For example, you start with what type of data you have (numeric, categorical, map, network, etc)then it offers appropriate graphic choices. So I checked out [map--story--connection map](https://www.data-to-viz.com/#connection), and found a short blurb about connection maps, some tips, and then a bank of code to choose from to make it!! the code choices were R, Python, D3, and Flourish! We could use this site to help us make components of our scrollytelling site!

Annnnd I found the answer to the last part of my second question: [What is d3.js?](https://www.d3-graph-gallery.com/about.html)

Wow, I really love this site!!! I have now spent way too long exploring it, but it's fantastic and I have no regrets!

#### read the article on how to make annotations in d3

quick side note: is it "d3" or "D3"? and do you need to put the ".js" or is that always implied? Just want to make sure I know the cool coding kids slang so I can be cool too!

Overall, I'm not as excited about this as the above site I explored...but I did come across this potentiall cool bit if code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>

    <style>
     body{
        background-color: whitesmoke;
     }

    :root {
      --accent-color: #E8336D;
    }

     svg {
        background-color: white;
        font-family: 'Lato';
     }

     path.line {
        fill: none;
        stroke: lightgrey;
        stroke-width: 1px;
      }

    .annotation path {
      stroke: var(--accent-color);
      fill: none;
    }

    .annotation path.connector-arrow, 
    .title text, .annotation text,
    .annotation.callout.circle .annotation-subject path{
      fill: var(--accent-color);
    }
    .annotation-note-bg {
      fill: rgba(255, 255, 255, 0);
    }

    .annotation-note-title {
      font-weight: bold;
    }

    .annotation.xythreshold {
      cursor: move;
    }

    .hidden {
      display: none;
    }

    text.hover {
      font-size: .7em;
    }

    text.title {
      font-size: 1.1em;
    }
    </style>
</head>
<body>
    <svg width=960 height=500>
      <text class="title" x=70 y=50>Hover over the dots to see more information</text>
      <text x=70 y=80>Uses d3.annotationCalloutCircle to make a tooltip</text>
    </svg>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

It lets you have hover triggered annotations! [Here's what it looks like](https://bl.ocks.org/susielu/63269cf8ec84497920f2b7ef1ac85039).

#### skimmed over the six libraries article

Basically, Marlon offered some insight that the scrollama article was written later by the a=same author this...I guess after he looked into these 6 libraries, he decided to make something more awesome

## LF is trying to make Progress:
* First, catching up on everything Jordan has added. There is some amazing info to look at here!!
* Reopened all of the summer-2020 folders and such on atom using the terminal, so that's a great first step
* Now looking at the scrollama code, separating it into what I *think* is index.html, script.js and sytle.css
* Tried to save it and open on localhost but the "site can't be reached" (my house also has no wifi right now so I'm hotspotting - could that be related?)
* The **goal** is to create a scrollytelling page to demonstrate all the amazing work llufs have been doing with Schell's 9 Venues... maybe scroll through a description of each of them (combining a little bit of everybody's infographics)
* Update... localhost still isn't working so I have no clue what I'm even working with... wondering if there's **another way to preview code created in atom?**