Design Rationale

• We opted to go with a random sample of 500 individuals from the original dataset, because any more bubbles than that would have made the graph 'explode' and look confusing.

• We also wanted to include victim age somehow, and opted to encode this in the circle radius. We decided to represent younger victims by larger bubbles, and vice versa. In a way, there is a feeling that the crime is even more attrocious for young victims who have yet to live a life, and so highlighting these with larger circles seems right. This was a design choice.

• We initially started with visualizing the bubbles on the screen -- creating the svg, the circles, etc. Then implemented forces to have the bubbles move around the screen without overlapping. We used forceCollide(), forceManybody(), and forceX() and forceY() for positioning the bubbles. We then initially tried to get one variable grouping (relationship) to work, then moved on to the other two.

• In order to include several 'states' [multiple boxes ticked] we used an array currentStates that, when checking a box, appends it to the list, and the data grouping functions are called depending on which states are in the array (i.e., which boxes are ticked).

• Once the groupings worked, we added the labels, and "axis". There was quite a bit of fineaggling with the force strengths and alpha values to allow the bubbles to form into natural groupings using D3's simulation engine.

• Lastly, we included tooltips. For these, we have showTooltip() and hideTooltip() which are triggered on mouseover and mouseout event for the nodes (bubbles).