JSFiddle - React, Tailwind, and code Playground

by mrcactu5

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://raw.github.com/fkling/JSNetworkX/master/jsnetworkx.js"></script>
<h2>Diagram of Patients and Symptoms</h2>
<p>Move the graph around to explore which patients and symptoms are closely related. [The list of symptoms have has been anonymized.]</p>
<p>Patients are in <span class='g'>green</span>, symptoms are in <span class='r'>red</span>.  Nodes and their neighbors turn gray when you hilight them.  Nodes that are close together are <em>similar</em>.  Notice that this graph is <a href="http://mathworld.wolfram.com/BipartiteGraph.html">bipartite</a>.
<div id="info"></div>
<div id="chart3"></div>

CSS

body {font-family:Helvetica;}
.g {color: #33FF33;}
.r {color: #FF2255;}

JavaScript

var G3 = jsnx.Graph();

// patients are green
v = [];
for(var i = 1; i < 21; i++){
    v.push([i, {name: i}]);
}
G3.add_nodes_from(v, {group:0, color: '#33FF33'});
// symptoms are red
G3.add_nodes_from(
[[21,	{name:"A"}],
[22,	{name:"B"}],
[23,	{name:"C"}],
[24,	{name:"D"}],
[25,	{name:"E"}],
[26,	{name:"F"}],
[27,	{name:"G"}],
[28,	{name:"H"}],
[29,	{name:"I"}],
[30,	{name:"J"}],
[31,	{name:"K"}],
[32,	{name:"L"}],
[33,	{name:"M"}],
[34,	{name:"N"}],
[35,	{name:"O"}]]
    , {group:1, color: '#FF2255'});


edges = [];
edges.push([[1,	23],
[1,	25],
[1,	21],
[1,	25],
[2,	30],
[2,	22],
[2,	21],
[3,	21],
[4,	21],
[4,	27],
[5,	31],
[5,	28],
[5,	32],
[5,	29],
[5,	22],
[5,	25],
[6,	24],
[6,	33],
[7,	22],
[7,	24],
[7,	26],
[8,	34],
[8,	35],
[9,	24],
[9,	22],
[9,	25],
[10,	26],
[11,	22],
[11,	25],
[12,	26],
[13,	27],
[13,	22],
[13,	23],
[13,	25],
[14,	27],
[14,	28],
[14,	23],
[15,	22],
[15,	27],
[16,	22],
[16,	26],
[17,	22],
[17,	27],
[17,	25],
[18,	22],
[18,	29],
[19,	22],
[20,	25],
[20,	22],
[20,	21]] );

G3.add_edges_from(edges[0]);

var color = d3.scale.category20();
jsnx.draw(G3, {
    element: '#chart3',
    with_labels: true,
    labels: function(d) { 
        console.log(parseInt(d.node) + 1   );
        if(parseInt(d.node) < 21){ return d.node;}
        else {return '';}},
    layout_attr: {
        charge: -150,
        linkDistance: 50
    },
    node_attr: {
        r: 10,
        title: function(d) { return d.label;},
        id: function(d) {
            return 'node-' + d.node;
        }
    },
    node_style: {
        fill: function(d) { 
            return d.data.color; 
        },
        stroke: 'black'
    },
    edge_style: {
        stroke: '#999'
    }
}, true);

function highlight_nodes(nodes, on) {
    nodes.forEach(function(n) {
        d3.select('#node-' + n).style('fill', function(d) {
            return on ? '#EEE' : d.data.color;
        });
    });
}
tag =...