Forces of Attraction
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.
Project Structure
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 theViewclass.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.
Tasks to Complete
Please see the issues page for a list of tasks that still need to be done.
Data
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).
References
Project-Wide
- Built skeleton structure based off of previous programming assignment boilerplate
Force-Directed Graph
- 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.
Matrix
- Used this case study for tooltip style and techniques.
- https://bl.ocks.org/mbostock/4403522
- https://stackoverflow.com/a/32658330
Line Chart
- Used these references as guides to create linechart and its area component
Misc.
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.