JavaScript D3

Given two nodes A and B (e.g., two people in a social network), an analyst wants to explore how

similar they are, and based on their similarity, the analyst will make different decisions in future.

The analyst cares about three similarity value-ranges: 0.5, less than 0.5, and greater than 0.5.

Your task is to design interactions on two nodes to show their similarity. You design should cover

the three situations (0.5, <0.5, and >0.5). The two nodes should be displayed as two circles. Each

circle has one or more states, as we discussed in lectures. The similarity between the nodes should

be displayed by using different combinations of their states.

As a simple example, a user clicks on node A, the color of node A changes from white to yellow,

and node B moves closer to node A. The distance between the two nodes changes from 500px (at

the beginning before user click) to 75px, which indicates their similarity score is around 0.75.

You need to think of TWO designs and can NOT use the example above. Implement your designs

with D3.js and in your implementation, you need to use good software engineering practices (e.g.,

separating content, style, and behavior).

Write a summary document to describe your two designs. Your description should clearly cover:

1) The state(s) on each node

2) Interactions leading to state transitions

3) How is the similarity between two nodes displayed?

4) How to run your program.

CSS Dthreejs HTML HTML5 JavaScript

Project ID: #18812284

About the project