Created
December 11, 2015 01:13
-
-
Save mtaptich/2ad053fe479373e34012 to your computer and use it in GitHub Desktop.
Molecules (Pt1)
This file contains hidden or 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
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .link line { | |
| stroke: #696969; | |
| } | |
| .link { | |
| stroke: #696969; | |
| } | |
| .link line.separator { | |
| stroke: #fff; | |
| stroke-width: 2.5px; | |
| } | |
| .node circle { | |
| stroke: #000; | |
| stroke-width: 0.5px; | |
| } | |
| .node text { | |
| font: 9px sans-serif; | |
| pointer-events: none; | |
| } | |
| body{ | |
| font: 9px sans-serif; | |
| font-color: #fff; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v2.js?2.9.3"></script> | |
| <script> | |
| var color = d3.scale.category20(); | |
| var exhaust = (function(){ | |
| var width = 960, | |
| height = 500, | |
| interval = 2000, | |
| t=0, | |
| node_sum = 0; | |
| var radius = d3.scale.sqrt() | |
| .range([0, 5]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var force = d3.layout.force() | |
| .friction(.99) | |
| .gravity(0.02) | |
| .charge(-20) | |
| .size([width, height]); | |
| var CO2 = [{"source": "O1","target": "C2"},{"source": "C2","target": "O3"}] | |
| exhaust(CO2) | |
| function exhaust(links){ | |
| var links_temp = links | |
| var nodesByName = {}; | |
| links_temp.forEach(function(link) { | |
| link.source = nodeByName(link.source); | |
| link.target = nodeByName(link.target); | |
| }); | |
| var nodes = d3.values(nodesByName); | |
| var link = svg.selectAll(".link") | |
| .data(links_temp) | |
| .enter().append("line") | |
| .attr("class", "link"); | |
| var node = svg.selectAll(".node") | |
| .data(nodes) | |
| .enter().append("circle") | |
| .attr("class", "node") | |
| .attr("px", function(d){console.log(d); return 3}) | |
| .attr("r", function(d) { return (d.name[0]=="C" )? radius(6):radius(8);} ) | |
| .style("fill", function(d) { return color(d.name[0]);} ) | |
| .style("stroke", function(d) { return "#eee"; }) | |
| .call(force.drag); | |
| force | |
| .nodes(nodes) | |
| .links(links_temp) | |
| .on("tick", tick) | |
| .start(); | |
| function tick() { | |
| link.attr("x1", function(d) { if(d3.select(this).attr("x1") >width){ d3.select(this).remove()}; return d.source.x; }) | |
| .attr("y1", function(d) { return d.source.y; }) | |
| .attr("x2", function(d) { if(d3.select(this).attr("x2") >width){ d3.select(this).remove()}; return d.target.x; }) | |
| .attr("y2", function(d) { return d.target.y; }); | |
| node.attr("cx", function(d) { if(d3.select(this).attr("cx") >width){ d3.select(this).remove()}; return (d.name[0]=="C" )? d.x = d.x+0.1: d.x = d.x-.05 }) | |
| .attr("cy", function(d) { return (d.name[0]=="C" )? d.y = Math.max(4.5, Math.min(height - 4.5, d.y)) : d.y = d.y-.05; }); | |
| } | |
| function nodeByName(name) { | |
| return nodesByName[name] || (nodesByName[name] = {name: name}); | |
| } | |
| //Start the loop! | |
| var carbons = 0; | |
| refreshIntervalId = setInterval(function(){ | |
| t = t + interval*0.009; | |
| if(Math.random() > 0.1){ | |
| links.push( {"source": nodeByName("O"+(t+1)),"target": nodeByName("C"+(t+2))}) | |
| links.push( {"source": nodeByName("C"+(t+2)),"target": nodeByName("O"+(t+3))}) | |
| links.push( {"source": nodeByName("O"+(t+4)),"target": nodeByName("C"+(t+5))}) | |
| links.push( {"source": nodeByName("C"+(t+5)),"target": nodeByName("O"+(t+6))}) | |
| links.push( {"source": nodeByName("O"+(t+7)),"target": nodeByName("C"+(t+8))}) | |
| links.push( {"source": nodeByName("C"+(t+8)),"target": nodeByName("O"+(t+9))}) | |
| carbons = carbons + 3; | |
| }else{ | |
| links.push( {"source": nodeByName("O"+(t+1)),"target": nodeByName("C"+(t+2))}) | |
| links.push( {"source": nodeByName("O"+(t+4)),"target": nodeByName("C"+(t+5))}) | |
| links.push( {"source": nodeByName("O"+(t+7)),"target": nodeByName("C"+(t+8))}) | |
| links.push( {"source": nodeByName("C"+(t+8)),"target": nodeByName("O"+(t+9))}) | |
| carbons = carbons + 3; | |
| } | |
| nodes = d3.values(nodesByName); | |
| link = link.data(links) | |
| link.enter().append("line") | |
| .attr("class", "link") | |
| node = node.data(nodes); | |
| node.enter().append("circle") | |
| .attr("class", "node") | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }) | |
| .attr("r", function(d) { return (d.name[0]=="C" )? radius(6):radius(8);} ) | |
| .style("fill", function(d) { return color(d.name[0]);} ) | |
| .style("stroke", function(d) { return "#eee"; }) | |
| .call(force.drag) | |
| force | |
| .nodes(nodes) | |
| .links(links) | |
| .on("tick", tick) | |
| .start(); | |
| if(carbons>50){ | |
| t = 0; | |
| nodesByName = {}; | |
| links = []; | |
| carbons = 0 | |
| d3.selectAll("circle").transition().duration(200).attr("r", 0.2).remove() | |
| d3.selectAll("line").remove() | |
| } | |
| }, 1000); | |
| } | |
| return exhaust | |
| }) | |
| var molecule = (function(){ | |
| var width = 960, | |
| height = 500; | |
| var radius = d3.scale.sqrt() | |
| .range([0, 5]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| svg.append("text") | |
| .attr("class", "title") | |
| .attr("x", function(){ return window.innerWidth*0.05}) | |
| .attr("y", function(){ return window.innerHeight*0.05}) | |
| .text("Propane in Oxygen") | |
| .style("font-size", 24) | |
| var force = d3.layout.force() | |
| .size([width, height]) | |
| .charge(-100) | |
| .linkDistance(function(d, i) { return radius(d.source.size) + radius(d.target.size) + 20; }); | |
| molecule("molecule.json", "Propane") | |
| function molecule(filename){ | |
| d3.json(filename, function(graph) { | |
| force | |
| .nodes(graph.nodes) | |
| .links(graph.links) | |
| .on("tick", tick) | |
| .start(); | |
| var link = svg.selectAll(".link") | |
| .data(graph.links) | |
| .enter().append("g") | |
| .attr("class", "link"); | |
| link.append("line") | |
| .style("stroke-width", function(d) { return (d.bond * 2 - 1) * 2 + "px"; }); | |
| link.filter(function(d) { return d.bond > 1; }).append("line") | |
| .attr("class", "separator"); | |
| var node = svg.selectAll(".node") | |
| .data(graph.nodes) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| .call(force.drag); | |
| node.append("circle") | |
| .attr("r", function(d) { return (d.atom=="H" )? 6:radius(d.size/2); }) | |
| .style("fill", function(d) { return (d.atom=="H" )? "#fff":color(d.atom); }) | |
| .style("stroke", function(d) { return (d.atom=="H" )? "#fff":"#eee"; }) | |
| node.append("text") | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "middle") | |
| .text(function(d) { return d.atom; }) | |
| .style("font-size", function(d){ return (d.atom=="H" )? 12:9;}) | |
| resize(); | |
| d3.select(window).on("resize", resize); | |
| function tick() { | |
| link.selectAll("line") | |
| .attr("x1", function(d) { return d.source.x; }) | |
| .attr("y1", function(d) { return d.source.y; }) | |
| .attr("x2", function(d) { return d.target.x; }) | |
| .attr("y2", function(d) { return d.target.y; }); | |
| node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); | |
| } | |
| function resize() { | |
| width = window.innerWidth, height = window.innerHeight; | |
| svg.attr("width", width).attr("height", height); | |
| force.size([width, height]).resume(); | |
| d3.select(".title").remove() | |
| svg.append("text") | |
| .attr("class", "title") | |
| .attr("x", function(){ return window.innerWidth*0.05}) | |
| .attr("y", function(){ return window.innerHeight*0.15}) | |
| .text("Propane in Oxygen") | |
| .style("font-size", 24) | |
| } | |
| }); | |
| } | |
| return molecule | |
| })() | |
| </script> |
This file contains hidden or 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
| {"nodes": [{"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 12, "atom": "C"}, {"size": 12, "atom": "C"}, {"size": 12, "atom": "C"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 12, "atom": "C"}, {"size": 12, "atom": "C"}, {"size": 12, "atom": "C"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 12, "atom": "C"}, {"size": 12, "atom": "C"}, {"size": 12, "atom": "C"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 12, "atom": "C"}, {"size": 12, "atom": "C"}, {"size": 12, "atom": "C"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 12, "atom": "C"}, {"size": 12, "atom": "C"}, {"size": 12, "atom": "C"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 1, "atom": "H"}, {"size": 16, "atom": "O"}, {"size": 16, "atom": "O"}, {"size": 16, "atom": "O"}, {"size": 16, "atom": "O"}, {"size": 16, "atom": "O"}, {"size": 16, "atom": "O"}, {"size": 16, "atom": "O"}, {"size": 16, "atom": "O"}, {"size": 16, "atom": "O"}, {"size": 16, "atom": "O"}, {"size": 16, "atom": "O"}, {"size": 16, "atom": "O"}, {"size": 16, "atom": "O"}, {"size": 16, "atom": "O"}], "links": [{"source": 0, "target": 3, "bond": 1}, {"source": 1, "target": 3, "bond": 1}, {"source": 2, "target": 3, "bond": 1}, {"source": 3, "target": 4, "bond": 1}, {"source": 4, "target": 5, "bond": 1}, {"source": 5, "target": 4, "bond": 1}, {"source": 6, "target": 5, "bond": 1}, {"source": 7, "target": 5, "bond": 1}, {"source": 8, "target": 5, "bond": 1}, {"source": 9, "target": 4, "bond": 1}, {"source": 10, "target": 4, "bond": 1}, {"source": 11, "target": 14, "bond": 1}, {"source": 12, "target": 14, "bond": 1}, {"source": 13, "target": 14, "bond": 1}, {"source": 14, "target": 15, "bond": 1}, {"source": 15, "target": 16, "bond": 1}, {"source": 16, "target": 15, "bond": 1}, {"source": 17, "target": 16, "bond": 1}, {"source": 18, "target": 16, "bond": 1}, {"source": 19, "target": 16, "bond": 1}, {"source": 20, "target": 15, "bond": 1}, {"source": 21, "target": 15, "bond": 1}, {"source": 22, "target": 25, "bond": 1}, {"source": 23, "target": 25, "bond": 1}, {"source": 24, "target": 25, "bond": 1}, {"source": 25, "target": 26, "bond": 1}, {"source": 26, "target": 27, "bond": 1}, {"source": 27, "target": 26, "bond": 1}, {"source": 28, "target": 27, "bond": 1}, {"source": 29, "target": 27, "bond": 1}, {"source": 30, "target": 27, "bond": 1}, {"source": 31, "target": 26, "bond": 1}, {"source": 32, "target": 26, "bond": 1}, {"source": 33, "target": 36, "bond": 1}, {"source": 34, "target": 36, "bond": 1}, {"source": 35, "target": 36, "bond": 1}, {"source": 36, "target": 37, "bond": 1}, {"source": 37, "target": 38, "bond": 1}, {"source": 38, "target": 37, "bond": 1}, {"source": 39, "target": 38, "bond": 1}, {"source": 40, "target": 38, "bond": 1}, {"source": 41, "target": 38, "bond": 1}, {"source": 42, "target": 37, "bond": 1}, {"source": 43, "target": 37, "bond": 1}, {"source": 44, "target": 47, "bond": 1}, {"source": 45, "target": 47, "bond": 1}, {"source": 46, "target": 47, "bond": 1}, {"source": 47, "target": 48, "bond": 1}, {"source": 48, "target": 49, "bond": 1}, {"source": 49, "target": 48, "bond": 1}, {"source": 50, "target": 49, "bond": 1}, {"source": 51, "target": 49, "bond": 1}, {"source": 52, "target": 49, "bond": 1}, {"source": 53, "target": 48, "bond": 1}, {"source": 54, "target": 48, "bond": 1}, {"source": 55, "target": 56, "bond": 1}, {"source": 56, "target": 55, "bond": 1}, {"source": 57, "target": 58, "bond": 1}, {"source": 58, "target": 57, "bond": 1}, {"source": 59, "target": 60, "bond": 1}, {"source": 60, "target": 59, "bond": 1}, {"source": 61, "target": 62, "bond": 1}, {"source": 62, "target": 61, "bond": 1}, {"source": 63, "target": 64, "bond": 1}, {"source": 64, "target": 63, "bond": 1}, {"source": 65, "target": 66, "bond": 1}, {"source": 66, "target": 65, "bond": 1}, {"source": 67, "target": 68, "bond": 1}, {"source": 68, "target": 67, "bond": 1}]} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment