Skip to content

Instantly share code, notes, and snippets.

@mojaie
Last active August 25, 2017 06:39
Show Gist options
  • Save mojaie/89293ef2f946ecb43dd3cdd73fdd64ac to your computer and use it in GitHub Desktop.
Save mojaie/89293ef2f946ecb43dd3cdd73fdd64ac to your computer and use it in GitHub Desktop.
Chemical structure similarity network 1
license: mit
function resume(snapshot) {
if (snapshot.hasOwnProperty('fieldTransform')) {
const tf = snapshot.fieldTransform;
const transform = d3.zoomIdentity.translate(tf.x, tf.y).scale(tf.k);
d3.select('#graph-contents').attr('transform', transform);
d3.select('#graph-field').call(kwgraph.interaction.zoom.transform, transform);
}
if (snapshot.hasOwnProperty('nodePositions')) {
d3.selectAll('.node').each((d, i) => {
d.x = snapshot.nodePositions[i].x;
d.y = snapshot.nodePositions[i].y;
});
}
kwgraph.control.updateNodeImage(snapshot);
}
function render(g) {
g.nodes.records.forEach(e => { delete e._mol; });
const edgesToDraw = g.edges.records
.filter(e => e.weight >= g.edges.networkThreshold);
kwgraph.component.graphEdges(d3.select('#graph-contents'), edgesToDraw);
kwgraph.component.graphNodes(d3.select('#graph-contents'), g.nodes.records);
kwgraph.force.setForce(
g.nodes.records, edgesToDraw, kwgraph.force.tick, kwgraph.force.end);
resume(g.edges.snapshot);
kwgraph.interaction.stickNodes();
d3.select('#graph-contents').style('opacity', 1e-6)
.transition()
.duration(1000)
.style('opacity', 1);
}
d3.select('#graph-field')
.attr('viewBox', `0 0 800 600`)
.call(kwgraph.interaction.zoom);
d3.request("https://mojaie.github.io/kiwiii-client/resources/ApprovedFiltered_GLS10.json.gz")
.responseType("arraybuffer")
.get(data => {
render(JSON.parse(pako.inflate(data.response, {to: 'string'})))
});
<!DOCTYPE html>
<title>Similarity network</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://unpkg.com/dexie@latest/dist/dexie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.5/pako.min.js"></script>
<script src="https://mojaie.github.io/kiwiii-client/kwgraph.js"></script>
<svg id="graph-field" preserveAspectRatio="xMidYMid meet" pointer-events="all">
<g id="graph-contents"></g>
</svg>
<script src="graphview.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment