/DVIA-Final

Primary LanguageJavaScript

DVIA Final

The uncertainty of the Superbowl

url: https://madhat5.github.io/DVIA-Final/DEV/

Setup (fix)

  1. npm install
  2. node fileName.js
  3. open local server to index:html

============================================================

Reqs & output

  • Reqs

Theme: "Uncertanties" https://canvas.newschool.edu/courses/1525001/assignments/8214568 https://canvas.newschool.edu/courses/1525001/pages/dvia-final-project-overview

proposal link: https://docs.google.com/document/d/1TN6jKburhzMQtglane7kCpJStGc9U8LrgKLgSS3hiuU/edit

  • Output:

url screenshot title

============================================================

Concept & build

  1. Types of data
  1. Questions
  • does spread measure the rate of uncertainty? (eg higher spread = higher uncertainty)
  1. Audience
  • Target:
    • sports enthusiats/analysts
    • sports team managers?
  • What factors influence championship wining seasons?
  • have an interactive report, with a drop down for years (+ all)?
  1. Tools
    • d3 (circle packing)
    • JS/CSS/HTML (custom)
    • Adobe Photoshop/Illustrator

next

  • position + radius based on spread & over/under (x)
  • add .gitignore (x)
  • encoding (ox)
    • tooltips (x)
    • radius legend (x)
    • x axis (x)
    • summary (x)
    • titles (x)
    • color legend (o)
  • clean up
  • color (x)
  • size/svg responsiveness
  • host on github pages
  • further exploration

encoded summary

  • define
    • uncertainty
    • spread
    • over/under
    • project math (radius, position)
  • prof notes:
    • (x) What does the line on the bottom indicate to us? Translate those values into something that an audience can understand while trying to decode your visualization
    • (x) Make sure to translate the labels into something digestible for the audience. All the variables might not been needed - direct our attention to the key pieces of information we need.
    • (x) Incorporate a way for us to understand how you are using color - (ox) add a legend or other to help us make those determinations quickly
    • (ox) I like the “About” section that gives some details about the methodology and how to understand the radius of the circle but consider…Could you perhaps create some “examples” or takeaways from this visualization to showcase the details in the second half? This would help the methodology/explanation be understood in context. - It would also help answer the question - what did you uncover from this visualization? did anything interesting stand out that you want to narrate to us?
    • (ox) This maybe get’s to the contextual pieces surrounding the visualization!

quick notes

  • Data

    • (sports-reference?)

      1. how sports odds/betting measures even uncertainty? (odds vs result)
      • factors that go in to odds include:
        • win/loss rates; winning streaks
        • individual player acquisitions
        • previous record agains team x
      1. championship coin toss vs game winner?
      • probability of winning game with coin toss?
    • 3. a complete evaluation report of championship uncertainty in sports?
      • frequency framing of coin toss
      • distribution chart of win/loss
      • error bar of points scored?
      • chart for odds from (1.)

  • likely visuals

    • error bars, confidence bands (more technical user friendly)
    • frequency framing (more lay user friendly)
      • visualizing a probability as a frequency
    • quantile dot plot?
    • multi chart?
      • pick team > odds team winning > odds division winning > odds conference winning

============================================================

Project refs

https://clauswilke.com/dataviz/visualizing-uncertainty.html ! https://d-nb.info/1138284831/34 ! https://www.betfirm.com/point-spreads-for-every-super-bowl/ ! https://www.thelines.com/super-bowl-coin-toss-history/ ! https://www.3cs.ch/visualizing-uncertainty/ https://flowingdata.com/2018/01/08/visualizing-the-uncertainty-in-data/ https://medium.com/multiple-views-visualization-research-explained/uncertainty-visualization-explained-67e7a73f031b https://www.researchgate.net/publication/290190992_Do_sports_fans_really_value_uncertainty_of_outcome_Evidence_from_the_English_Premier_League https://www.sportsoddshistory.com/nfl-odds/ https://www.sportingnews.com/us/nfl/news/super-bowl-weather-history-rain-wind-cold-snow/1diqsbswj63pg1u4rybj2snjw0 http://nbremer.github.io/occupationscanvas/

Code refs

https://bl.ocks.org/d3indepth/fee5ce57c3fc3e94c3332577d1415df4 https://www.d3indepth.com/force-layout/ https://stackoverflow.com/questions/60630895/what-does-d3-range-map-do http://bl.ocks.org/eesur/be2abfb3155a38be4de4 https://www.d3-graph-gallery.com/graph/custom_color.html http://jonathansoma.com/site/tutorials/d3/clicking-and-hovering/ https://www.d3-graph-gallery.com/graph/custom_axis.html https://medium.com/@kj_schmidt/show-data-on-mouse-over-with-d3-js-3bf598ff8fc2 http://bl.ocks.org/mmattozzi/7018021

Notes

  • Methodology influences:
    • Ben Fry, Amanda Cox, Alberto Cairo, Mike Bostock

============================================================

Project Approach

Answer project questions as you go along

  1. Audience questions + sketch
  2. Check + prep data (acquire, parse, filter)
  3. Mine/explore/sketch/iterate several simple graphics, re: stories (same or diff?), pick one
  4. Code initial draft (pseudo first?)
  5. Refine/declutter/clean/annotate/clarify (color, labels, titles, legend, summary, etc)
  6. Interactivity (more than tooltips, eg: scrolling)
  7. Share

===================== 1

  • Why are we doing this?

    • What are questions that you want to explore with this visualization?

  • What are you hoping to achieve?

    • What will I be looking at(title)?

  • Who are we targeting?

    • How is the end product going to be used?
    • How are we publishing?

  • Sketch summary:

    • sketch
    • Questions
    • Data set
    • Inspirations
    • Data vis method
    • Current problems

===================== 2

===================== 3-6

===================== 7

  • Who else is doing something similar?
  • Abstract/summary/about, re: methodolgy? (1-2 pars)
    • What were your considerations?
    • What tools did you explore?
    • What challenges did you run into?
    • How did you iterate?