A site to visualize the results of a Speed Dating experiment. Can be viewed in a browser with no additional steps. Optimal size is 1280x1280px, so feel free to zoom in or out depending on your display.

Our file layout is virtually identical to the templates provided throughout the course for the assignments. The js directory contains the majority of our logic and visualization definitions, index.html contains the layout, and styles/style.css contains some additional styling directives. The components are organized as follows:

• main.js: The entrypoint of our project. Includes main data processing functions.
• barChart.js: Contains the Bar Chart.
• View.js: A reusable superclass that abstracts away some of the common component patterns. Used by the force-directed graph.
• forceDirectedGraph.js: Contains the Graph View. Extends the View class.
• Legend.js: The group color legend.
• matrix.js: The matrix.
• utils.js: Random utility functions that are commonly used by all components and the data processing.

We have also initialized our js directory as an NPM module, in order to use eslint as a code-quality checker.

Please see the issues page for a list of tasks that still need to be done.

Dataset is from experimental speed dating events by Columbia Business School professors Ray Fisman and Sheena Iyengar for their paper Gender Differences in Mate Selection: Evidence From a Speed Dating Experiment (​https://www.kaggle.com/annavictoria/speed-dating-experiment​).

• Built skeleton structure based off of previous programming assignment boilerplate

• Basic structure based on this example from the Advanced Concepts tutorial.
• Learned how to update the force-simulation from Modifying a Force-Directed Graph by Mike Bostock.
• Learned how to make nodes draggable in this notebook.
• Used this case study for tooltip style and techniques.
• Learned how to make and include slider from d3-simple-slider.

• Used this case study for tooltip style and techniques.
• https://bl.ocks.org/mbostock/4403522
• https://stackoverflow.com/a/32658330

• Used these references as guides to create linechart and its area component
  • line: https://github.com/UBC-InfoVis/2021-436V-examples/tree/master/d3-annotated-line-chart
  • area: https://bl.ocks.org/d3noob/119a138ef9bd1d8f0a8d57ea72355252

Other small aspects of our code have their source of inspiration or direct reference cited as inline links in our source-code. Doing this allows quick navigation to sources from within the code and allows us to manage references through version control more easily.