{"id":620,"date":"2015-04-28T01:38:59","date_gmt":"2015-04-28T07:38:59","guid":{"rendered":"http:\/\/www.harrysurden.com\/wordpress\/?p=620"},"modified":"2015-05-07T00:31:04","modified_gmt":"2015-05-07T06:31:04","slug":"visualizing-us-law-force-directed-graph","status":"publish","type":"post","link":"https:\/\/www.harrysurden.com\/wordpress\/archives\/620","title":{"rendered":"Visualizing US Law – Force Directed Graph"},"content":{"rendered":"
\n

\"circleExploded\"<\/a><\/p>\n<\/div>

I have created a new experimental app for visualizing and exploring U.S. Law <\/a> using a force-directed graph. \u00a0You can click on the picture above to launch it.\u00a0This force-directed visualization is more\u00a0intended to be\u00a0visually interesting rather than a full-fledged U.S. law navigation tool.<\/p>

This is the second in a series of data visualizations of US Federal Law that I am creating using the d3 data visualization framework and javascript. \u00a0The first data visualization is located here.<\/a><\/p>\n

Explore the Copyright Code or the Patent Code<\/h3>

This app allows you to explore two titles of the US Code.<\/p>\n

Title 17 – The Copyright Code<\/h3>

\"Copyright<\/a><\/p>\n

Title 35 – The Patent Code<\/h3>

\"Patent<\/a><\/p>\n

Hub and Spoke Representation of US Code Hierarchy<\/h3>

The chart uses a “hub and spoke” layout to represent the hierarchy of a given Title of the U.S. Code such as Title 35. \u00a0The center<\/strong> circle represents a\u00a0“parent” portion of the code – a portion with sub-portions under it (e.g. Chapter 10) and the surrounding circles on the edge<\/strong> represent the “children” portions that belong to\u00a0that parent (Section 100, Section 101, section 103..).<\/p>

\"Screen<\/a><\/p>

You can click on an outer circle to open up the “children” parts that reside under that circle. \u00a0If a circle has “children” parts, the circle border will be a thick grey. \u00a0The selected circle will then be the new “parent”, and its “children” portions will be displayed.<\/p>\n

<\/h3>\n

Force Directed Graph<\/h3>

The\u00a0app uses a “force directed graph<\/a>” engine\u00a0to display\u00a0the titles of the U.S. Code. \u00a0Force directed graphs are often used to model\u00a0interactions between physical objects, such as molecules reacting to gravity. \u00a0Because force directed graphs such as this simulate\u00a0physical forces such as gravity, using this framework to display data means that\u00a0various parts can tend to move around somewhat randomly.
\n
\nThus, you may notice that the layout of the different sections and subsections are not necessarily always in numerical order, or that the first section in a group of sections is located in the bottom of the circle, rather than at the top. \u00a0 This is is simply an unavoidable byproduct of using a force directed graph – the various portions sometimes drift around in unexpected places due to the force simulation. \u00a0Thus, the layout is not entirely stable, but that’s the tradeoff of using a force-directed layout.<\/p>

Also, when there is a section with multiple sub-parts (as in Chapter 13 of the Copyright code below), the force directed layout can get a little crowded.<\/p>

\"Copyright<\/a><\/p>

For this reason, the force-directed graph may not be quite as useful for actually navigating\u00a0the U.S. code as the Tree Layout visualization that I created previously<\/a>. \u00a0Rather, it is more intended as a aesthetically pleasing visualization of the U.S. code\u00a0more\u00a0than as a utilitarian law browser.<\/p>

If you click on a circle that represents a “Part” or a “Chapter” of the title, the sub-parts expand, and the text of the law that is associated with that section appears in the grey bar on the side.<\/p>

\"Patent<\/a><\/p>

 <\/p>

 <\/p>

You can use the grey arrows in the upper right left hand corner to navigate back to through the hierarchy. \u00a0The up arrow brings you to the top of the hierarchy (e.g. Title 17), and the left arrow brings you up one level, to the “parent” of the currently open circle. You can also click on an open circle to bring it back to it’s parent.<\/p>\n

D3, Javascript, and XML<\/h3>

This was created using the excellent\u00a0d3 data visualization<\/strong><\/a>\u00a0framework and javascript. \u00a0 I used Mike Bostock’s d3 force-directed layout<\/a>.<\/p>

Visualizations like this are now possible ever since the U.S. House of representatives released the U.S. federal law in structured .xml format. \u00a0To read more about how the U.S. law became structured, you can read this blog post here.<\/a><\/p>

I will have a follow up post explaining in more depth what I did, but in short, I wrote a parser in python to read through the US Code xml files and extract\u00a0the law\u00a0hierarchy from\u00a0the titles. \u00a0I then exported the structure in .json format.<\/p>

More data visualizations of the law will be available in the future on my Project Page<\/a>.<\/p>\n

Caveat<\/h3>

Please note \u2013 this is merely a beta version of this visualization. \u00a0Neither the computer code, nor the US code, have been thoroughly tested. \u00a0Please do not rely on this app for the law\u00a0as there may be errors or omissions.<\/p>

There are a few kinks still to work out in terms of color display and layout of the circles.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

I have created a new experimental app for visualizing and exploring U.S. Law using a force-directed graph. \u00a0You can click on the picture above to launch it.\u00a0This force-directed visualization is more\u00a0intended to be\u00a0visually interesting rather than a full-fledged U.S. law navigation tool.This is the second in a series of data visualizations of US Federal Law […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[15,4,6,12],"tags":[],"_links":{"self":[{"href":"https:\/\/www.harrysurden.com\/wordpress\/wp-json\/wp\/v2\/posts\/620"}],"collection":[{"href":"https:\/\/www.harrysurden.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.harrysurden.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.harrysurden.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.harrysurden.com\/wordpress\/wp-json\/wp\/v2\/comments?post=620"}],"version-history":[{"count":10,"href":"https:\/\/www.harrysurden.com\/wordpress\/wp-json\/wp\/v2\/posts\/620\/revisions"}],"predecessor-version":[{"id":712,"href":"https:\/\/www.harrysurden.com\/wordpress\/wp-json\/wp\/v2\/posts\/620\/revisions\/712"}],"wp:attachment":[{"href":"https:\/\/www.harrysurden.com\/wordpress\/wp-json\/wp\/v2\/media?parent=620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.harrysurden.com\/wordpress\/wp-json\/wp\/v2\/categories?post=620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.harrysurden.com\/wordpress\/wp-json\/wp\/v2\/tags?post=620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}