Network Visualization with D3.js

Force-direct graph of document similarity between US State Constitution preambles

This article shows how to generate a force-directed graph for the purpose of visualizing network-based data (i.e. nodes and edges). D3.js is a fun tool to explore the visualization of network-based data.

Data

There are plenty of examples out there which show how to generate force-directed graphs with D3. But I wanted to explore whether the similarity between state constitutions would expose any real-world similarities between those states. For simplicity, I chose to use the preambles of each state’s constitution rather than the full text. One downside to this choice is that two U.S. states do not have preambles to their constitution (i.e. New Hampshire and Vermont). I decided this was an acceptable limitation as I could simply ignore those two states.

A detailed description of how the graph data was generated is detailed in a previous article, but here is a quick overview:

Downloaded the US state preambles
Constructed a JSON of the preambles along with some useful state identifiers
Generated a document similarity matrix using the sklearn Python library
Reformatted the similarity matrix into the final JSON graph object describing the network

Here is a sample of the graph object for context:

{
  "nodes": [
    {
      "name": "AL"
    },
    {
      "name": "AK"
    },
    ...
  ],
  "links": [
    {
      "source": "AL",
      "target": "AK",
      "similarity": 0.2330767830582499
    },
    {
      "source": "AL",
      "target": "AZ",
      "similarity": 0.3580449463374264
    },
    ...
  ]
}

Creating the Visualization

We start with just a simple SVG container:

Comment on pruning the links with a “low” similarity

And finally, some default styling for the SVG elements:

US State Preamble Similarity Visualization

Preamble Similarity Explanation

The Expected

What’s interesting is that there are indeed state node connections which seem to make sense in this visualization. It makes sense that Rhode Island and New Jersey would be so strongly connected. Looking at the text of the preambles also explains this similarity (though document similarity effectively removes common words, I’m highlighting the similar sections in bold):

We, the people of the State of Rhode Island and Providence Plantations, grateful to Almighty God for the civil and religious liberty which He hath so long permitted us to enjoy, and looking to Him for a blessing upon our endeavors to secure and to transmit the same, unimpaired, to succeeding generations, do ordain and establish this Constitution of government.
Preamble of the Rhode Island Constitution

We, the people of the State of New Jersey, grateful to Almighty God for the civil and religious liberty which He hath so long permitted us to enjoy, and looking to Him for a blessing upon our endeavors to secure and transmit the same unimpaired to succeeding generations, do ordain and establish this Constitution.
Preamble of the New Jersey Constitution

The Unexpected

Other connections don’t make as much intuitive sense. Take New York and California as an example. Though not as strongly connected as Rhode Island and New Jersey, their connection is strong enough that I had to look at the preambles to make sense of it:

We The People of the State of New York, grateful to Almighty God for our Freedom, in order to secure its blessings, DO ESTABLISH THIS CONSTITUTION.
Preamble of the New York Constitution

We, the People of the State of California, grateful to Almighty God for our freedom, in order to secure and perpetuate its blessings, do establish this Constitution.
Preamble of the California Constitution

Many of the state constitutions borrow heavily from the US Constitution. New York and California were added to the Union at different times, but both decided on very similar verbiage. Though many states decided to get a little more creative, such as Hawaii:

We, the people of Hawaii, grateful for Divine Guidance, and mindful of our Hawaiian heritage and uniqueness as an island State, dedicate our efforts to fulfill the philosophy decreed by the Hawaii State motto, “Ua mau ke ea o ka aina i ka pono.”
We reserve the right to control our destiny, to nurture the integrity of our people and culture, and to preserve the quality of life that we desire.
We reaffirm our belief in a government of the people, by the people and for the people, and with an understanding and compassionate heart toward all the peoples of the earth, do hereby ordain and establish this constitution for the State of Hawaii.
Preamble of the Hawaii Constitution

This helps to explain why in our disjoint graph visualization, Hawaii is completely disconnected from any other state.

Resources

If you haven’t already, be sure to check out the basic examples of creating a force-directed graph in D3: