{"id":23,"date":"2017-08-16T01:29:16","date_gmt":"2017-08-16T01:29:16","guid":{"rendered":"http:\/\/lanimcleod.com\/?p=23"},"modified":"2019-01-09T09:35:24","modified_gmt":"2019-01-09T09:35:24","slug":"23","status":"publish","type":"post","link":"https:\/\/lanimcleod.com\/?p=23","title":{"rendered":"NYC Subway System as a Network"},"content":{"rendered":"<h1>Skill Summary<\/h1>\n<table width=\"540\">\n<tbody>\n<tr style=\"background-color: #dd9933; color: #fff;\">\n<td style=\"width: 60; padding: 0 5px;\"><strong>Language<\/strong><\/td>\n<td width=\"78\"><strong>Method<\/strong><\/td>\n<\/tr>\n<tr>\n<td width=\"60\">D3<\/td>\n<td width=\"78\">Mapping with D3<\/td>\n<\/tr>\n<tr>\n<td width=\"60\">D3<\/td>\n<td width=\"78\">Force-directed graph\/td&gt;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<section id=\"viz\">I was part of a group of students who sought to identify and measure the effect of multiple simultaneous disruptions on the NYC Subway system as an example of urban vulnerability. We constructed a network model based on train schedule information for a typical weekday rush hour and estimate demand distribution from origin-destination data derived from census data in order to assess the cumulative delay caused by first a single, then a pair of simultaneous disruptions to the network. In particular, we analyzed the scenario in which a pair of simultaneous disruptions caused an effect greater than the effect of the single disruptions together.<\/section>\n<div class=\"ui-widget\">\n<div class=\"wpd3-23-0\"><script type=\"text\/javascript\">function wpd3_23_0 () {\/\/___________________________________CONSTANTS_______________________________________________________\nvar svg = d3.select(\".wpd3-23-0\").append(\"svg\").attr(\"width\",900).attr(\"height\",750),\n    width = 900,\n    height = 750;\n    svg.append(\"defs\").selectAll(\"marker\")\n    .data([\"suit\", \"licensing\", \"resolved\"])\n  .enter().append(\"marker\")\n    .attr(\"id\", function(d) { return d; })\n    .attr(\"viewBox\", \"0 -5 10 10\")\n    .attr(\"refX\", 25)\n    .attr(\"refY\", 0)\n    .attr(\"markerWidth\", 2)\n    .attr(\"markerHeight\", 2)\n    .attr(\"orient\", \"auto\")\n  .append(\"path\")\n    .attr(\"d\", \"M0,-5L10,0L0,5 L10,0 L0, -5\")\n    .style(\"stroke\", \"#4679BD\")\n    .style(\"opacity\", \"0.6\");\nvar searchn = d3.select('#search');\nvar color = d3.scaleOrdinal(d3.schemeCategory20);\nvar critscale = d3.scaleLinear().range([6,12]).domain([0,326405791.4])\nvar simulation = d3.forceSimulation()\n    .force(\"charge\", d3.forceManyBody().strength(-9))\n    .force(\"link\", d3.forceLink().id(function(d) { return d.id; }))\n    .force(\"X\",d3.forceX().x(function(d) { return d.lng }))\n    .force(\"Y\",d3.forceY().y(function(d) { return d.lat }))\n    .force(\"center\", d3.forceCenter(width \/ 2, height \/ 2));\n    \/\/_____________PULL IN DATA_____CREATE NODES AND LINKS___________________\nd3.json(\"\/wp-content\/themes\/no-sidebar-pro\/visdata\/mastersubnodelinkdata_2.json\", function(error, graph) {\n  if (error) throw error;\n  var link = svg.append(\"g\")\n      .attr(\"class\", \"links\")\n    .selectAll(\"line\")\n    .data(graph.links)\n    .enter().append(\"line\")\n      .attr(\"stroke-width\", function(d) { return Math.sqrt(d.weight)\/6; })\n       ;\n  var node = svg.append(\"g\")\n      .attr(\"class\", \"nodes\")\n    .selectAll(\"circle\")\n    .data(graph.nodes)\n    .enter().append(\"circle\")\n      .attr(\"r\", function(d) { if (d.master_node == \"Yes\") {return critscale(d.criticality)} else {return 4};})\n      .attr(\"class\", \"node\")\n      .attr(\"fill\", function(d) { return color(d.master_node); })\n      .call(d3.drag()\n          .on(\"start\", dragstarted)\n          .on(\"drag\", dragged)\n          .on(\"end\", dragended))\n      .on(\"click\", connectedNodes)\n      .on(\"mouseover\", function(d){\n                d3.select(\"h2\").text(d.id);\n            })\n      .on(\"mouseout\", function(d){\n                d3.select(\"h2\").text(\"\");\n            }) ;\n  node.append(\"title\")\n      .text(function(d) { return d.id; });\n  simulation\n      .nodes(graph.nodes)\n      .on(\"tick\", ticked);\n  simulation.force(\"link\")\n      .links(graph.links);\n  function ticked() {\n    link\n       .attr(\"x1\", function(d) { return d.source.x; })\n       .attr(\"y1\", function(d) { return d.source.y; })\n       .attr(\"x2\", function(d) { return d.target.x; })\n       .attr(\"y2\", function(d) { return d.target.y; });\n    node\n        .attr(\"cx\", function(d) { return d.x; })\n        .attr(\"cy\", function(d) { return d.y; });\n  }\n    \/\/___________________________________NEIGHBORS_______________________________________________________\n    \/\/Toggle stores whether the highlighting is on\nvar toggle = 0;\n\/\/Create an array logging what is connected to what\nvar linkedByIndex = {};\nfor (i = 0; i < graph.nodes.length; i++) {\n    linkedByIndex[i + \",\" + i] = 1;\n};\ngraph.links.forEach(function (d) {\n    linkedByIndex[d.source.index + \",\" + d.target.index] = 1;\n});\n\/\/This function looks up whether a pair are neighbours\nfunction neighboring(a, b) {\n    return linkedByIndex[a.index + \",\" + b.index];\n}\nfunction connectedNodes() {\n    if (toggle == 0) {\n        \/\/Reduce the opacity of all but the neighbouring nodes\n        d = d3.select(this).node().__data__;\n        node.style(\"opacity\", function (o) {\n            return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;\n        });\n        link.style(\"opacity\", function (o) {\n            return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;\n        });\n        \/\/Reduce the op\n        toggle = 1;\n    } else {\n        \/\/Put them back to opacity=1\n        node.style(\"opacity\", 1);\n        link.style(\"opacity\", 1);\n        toggle = 0;\n    }\n};\n    \/\/___________________________________SEARCH_______________________________________________________\n    var optArray = [];\n    for (var i = 0; i < graph.nodes.length - 1; i++) {\n    optArray.push(graph.nodes[i].id);\n    }\n    optArray = optArray.sort();\n    $(function () {\n    $(\"#search\").autocomplete({\n        source: optArray\n        });\n    });\n});\n\/\/___________________________________FUNCTIONS_______________________________________________________\nfunction addtext(d) {\n}\nfunction dragstarted(d) {\n  if (!d3.event.active) simulation.alphaTarget(0.6).restart();\n  d.fx = d.x;\n  d.fy = d.y;\n}\nfunction dragged(d) {\n  d.fx = d3.event.x;\n  d.fy = d3.event.y;\n}\nfunction dragended(d) {\n  if (!d3.event.active) simulation.alphaTarget(0);\n  d.fx = null;\n  d.fy = null;\n}\nfunction searchNode() {\n    \/\/find the node\n    var selectedVal = searchn.property(\"value\");\n    var node = svg.selectAll(\".node\");\n    if (selectedVal == \"none\") {\n        node.style(\"stroke\", \"white\").style(\"stroke-width\", \"1\");} \n    else {\n        var selected = node.filter(function (d, i) { console.log('val',selectedVal,'match',d.id);\n            return d.id != selectedVal;\n        });\n        selected.style(\"opacity\", \"0\");\n        var link = svg.selectAll(\".link\")\n        link.style(\"opacity\", \"0\");\n        d3.selectAll(\".node, .link\").transition()\n            .duration(5000)\n            .style(\"opacity\", 1);\n        }\n    }; }; wpd3_23_0();<\/script><\/div>\n<\/div>\n<h2><\/h2><p><input id=\"search\" type=\"text\"><br \/>\n<button type=\"button\">Search<\/button><\/p>\n<h2><\/h2>\n<h3>This Visualization<\/h3>\n<ul>\n<li>The graph represents our model of the subway system as a directed, weighted network; with nodes representing subway stations and edges representing the connections between stations, characterized by the route attributes.<\/li>\n<li>Each dark blue master node in the network represents a subway station and each light blue sub node represents a line at each station. The purpose of separating lines and stations is so that we keep open the possibility modeling disruptions of varying capacities and proportions.<\/li>\n<li>Double click on a node to view its neighbors. Search for a station by name to isolate it on the graph.<\/li>\n<li>Each master node is sized according to its criticality: total time needed to transfer between each pair of destinations in the network once the node if removed.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Skill Summary Language Method D3 Mapping with D3 D3 Force-directed graph\/td&gt; I was part of a group of students who sought to identify and measure the effect of multiple simultaneous disruptions on the NYC Subway system as an example of urban vulnerability. We constructed a network model based on train schedule information for a typical [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":26,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[4,9,2],"tags":[],"class_list":["post-23","post","type-post","status-publish","format-standard","has-post-thumbnail","category-analysis","category-graphic-design","category-visualization","entry"],"_links":{"self":[{"href":"https:\/\/lanimcleod.com\/index.php?rest_route=\/wp\/v2\/posts\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lanimcleod.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lanimcleod.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lanimcleod.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lanimcleod.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=23"}],"version-history":[{"count":20,"href":"https:\/\/lanimcleod.com\/index.php?rest_route=\/wp\/v2\/posts\/23\/revisions"}],"predecessor-version":[{"id":512,"href":"https:\/\/lanimcleod.com\/index.php?rest_route=\/wp\/v2\/posts\/23\/revisions\/512"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lanimcleod.com\/index.php?rest_route=\/wp\/v2\/media\/26"}],"wp:attachment":[{"href":"https:\/\/lanimcleod.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=23"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lanimcleod.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=23"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lanimcleod.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}