Last active
June 2, 2017 22:45
-
-
Save beemyfriend/f53ffedd873d5009f7b1f4126df964c7 to your computer and use it in GitHub Desktop.
Bioethics Primer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <style> | |
| div#tooltip{ | |
| position: absolute; | |
| text-align: left; | |
| width: 250px; | |
| height: 90px; | |
| padding: 5px; | |
| font-size: 14px; | |
| background: white; | |
| border: 0px; | |
| border-radius: 8px; | |
| pointer-events: none; | |
| } | |
| div#info{ | |
| position: absolute; | |
| width: 0; | |
| height: 0; | |
| padding: 10px; | |
| font-size: 20px; | |
| background: white; | |
| border: 0px; | |
| z-index: 0; | |
| } | |
| div#chart{ | |
| z-index: 1; | |
| } | |
| </style> | |
| </head> | |
| <body></body> | |
| <script src = 'https://d3js.org/d3.v4.min.js'></script> | |
| <script src = 'https://rawgit.com/gka/d3-jetpack/master/build/d3v4%2Bjetpack.js'></script> | |
| <script> | |
| var bioethics = [ | |
| {name: 'Nuremburg Trials', begin: 1934, end: 1946, description: 'Lorem Ipsum', type: 'Research Ethics', id: 1}, | |
| {name: 'Tuskagee Syphalis Studies', begin: 1932, end: 1972, description: 'Lorem Ipsum', type: 'Research Ethics', id: 2}, | |
| {name: 'Roe v Wade', begin: 1969, end: 1973, description: 'Lorem Ipsum', type: 'Reproductive Ethics', id: 3}, | |
| {name: 'Belmont Report', begin: 1974, end: 1978, description: 'Lorem Ipsum', type: 'Research Ethics', id: 4}, | |
| {name: 'DAX', begin: 1973, end: 1974, description: 'Lorem Ipsum', type: 'End of Life Ethics', id: 5}, | |
| {name: 'Terry Schiavo', begin: 1990, end: 2005, description: 'Lorem Ipsum', type: 'End of Life Ethics', id: 6}, | |
| {name: 'Willbrook State School', begin: 1950, end: 1972, description: 'Lorem Ipsum', type: 'Research Ethics', id: 7}, | |
| {name: 'MKULTRA', begin: 1953, end: 1973, description: 'Lorem Ipsum', type: 'Research Ethics', id: 8}, | |
| {name: 'Octomom', begin: 1997, end: 2011, description: 'Lorem Ipsum', type: 'Reproductive Ethics', id: 9}, | |
| {name: 'Johnson v. Calvert', begin: 1990, end: 1993, description: 'Lorem Ipsum', type: 'Reproductive Ethics', id: 10}, | |
| {name: 'Doctor Kavorkian', begin: 1989, end: 1998, description: 'Lorem Ipsum', type: 'End of Life Ethics', id: 11}, | |
| ] | |
| var links= [ | |
| {source: 1, target: 2}, | |
| {source: 1, target: 4}, | |
| {source: 1, target: 7}, | |
| {source: 1, target: 8}, | |
| {source: 2, target: 4}, | |
| {source: 7, target: 4}, | |
| {source: 8, target: 4}, | |
| {source: 3, target: 9}, | |
| {source: 3, target: 10}, | |
| {source: 5, target: 6}, | |
| {source: 5, target: 11} | |
| ] | |
| var tooltip = d3.select('body') | |
| .append('div#tooltip') | |
| .st({opacity: 0}); | |
| var info = d3.select('body') | |
| .append('div#info') | |
| .st({opacity: 0}); | |
| var svg = d3.select('body') | |
| .append('div#chart') | |
| .append('svg') | |
| .at({width: 1000, height: 700}); | |
| var color = d3.scaleOrdinal() | |
| .range(['#66c2a5', '#fc8d62', '#8da0cb']) | |
| .domain(['Reproductive Ethics', 'Research Ethics', 'End of Life Ethics']); | |
| function network(){ | |
| var nodeHash = bioethics.reduce((hash, node) => {hash[node.id] = node; return hash}, {}); | |
| links.forEach(edge => { | |
| edge.source = nodeHash[edge.source]; | |
| edge.target = nodeHash[edge.target]; | |
| }) | |
| var linkForce = d3.forceLink(); | |
| var simulation = d3.forceSimulation() | |
| .force('charge', d3.forceManyBody().strength(-40)) | |
| .force('center', d3.forceCenter().x(500).y(350)) | |
| .force('link', linkForce) | |
| .nodes(bioethics) | |
| .on('tick', forceTick); | |
| simulation.force('link').links(links); | |
| svg.appendMany(links, 'line.link') | |
| .st({opacity: .5, 'stroke-width': 2, stroke: 'black'}); | |
| var nodeEnter = svg.appendMany(bioethics, 'g.node'); | |
| nodeEnter.append('circle') | |
| .at({r: 5, id: d => 'b' + d.id}) | |
| .st({fill: d => color(d.type), stroke: 'black', 'stroke-width': 1}) | |
| .on('mouseover', handleMouseOver) | |
| .on('mouseout', handleMouseOut) | |
| .on('click', handleNodeClick); | |
| function forceTick(){ | |
| d3.selectAll('line.link') | |
| .at({x1: d => d.source.x, | |
| x2: d => d.target.x, | |
| y1: d => d.source.y, | |
| y2: d => d.target.y}); | |
| d3.selectAll('g.node') | |
| .translate(d => [d.x, d.y]) | |
| } | |
| function handleMouseOver(d, i){ | |
| svg.select('circle#b' + d.id) | |
| .at({r: 10}) | |
| .st({'stroke-width': 4}); | |
| tooltip.st({opacity: .7, left: d3.event.pageX, top: d3.event.pageY}) | |
| .html(d.name + '<br>Began in ' + d.begin + ' and ended in ' + d.end); | |
| } | |
| function handleMouseOut(d, i){ | |
| svg.select('circle#b' + d.id) | |
| .at({r: 5}) | |
| .st({'stroke-width': 1}) | |
| tooltip.st({opacity: 0}) | |
| } | |
| function handleNodeClick(d, i){ | |
| info.st({'z-index': 2, opacity: .9, width: 1000, height: 700}) | |
| .html('<h1>'+d.name+'</h1><br><p>' +d.description + ' borume no ideum whyum not worklj;dfjspoi jbflishdfljs skdjf;lskjdf <p>'); | |
| } | |
| info.on('click', handleInfoClick); | |
| function handleInfoClick(){ | |
| info.st({'z-index': 0, opacity: 0, width: 0, height: 0}); | |
| } | |
| } | |
| network(); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment