Skip to content

Instantly share code, notes, and snippets.

@ps23

ps23/.gitignore

Last active August 4, 2017 23:06
Show Gist options
  • Save ps23/7b13ad6f40d852f87e1cc6acbe4a90b2 to your computer and use it in GitHub Desktop.
Save ps23/7b13ad6f40d852f87e1cc6acbe4a90b2 to your computer and use it in GitHub Desktop.
Download ZIP
valcri-entity-graph
Raw
.gitignore
# Compiled source #
###################
*.com
*.class
*.dll
*.exe
*.o
*.so
# Packages #
############
# it's better to unpack these files and commit the raw source
# git has its own built in compression methods
*.7z
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip
# Logs and databases #
######################
*.log
*.sql
*.sqlite
# OS generated files #
######################
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db
Raw
README.md

Description

=======

Reusable Chart component for D3 - Using factories

Raw
data.json
{
"defs": {
"highlight": {
"color1": "#22929E",
"color2": "#22929E",
"label": "H"
},
"nominal": {
"color1": "#8DA0CB",
"color2": "#FC8D62",
"label": "N"
},
"crime": {
"color1": "#66C2A5",
"color2": "#FC8D62",
"label": "CR"
},
"locationrecord": {
"color1": "#D870AD",
"color2": "#D870AD",
"label": "L"
},
"comctrl": {
"color1": "#EBC24F",
"color2": "#FC8D62",
"label": "CO"
},
"intel": {
"color1": "#B2DF8A",
"color2": "#FC8D62",
"label": "I"
},
"cam": {
"color1": "#9BA37E",
"color2": "#FC8D62",
"label": "CA"
}
},
"nodes": [
{
"level": "lev1",
"id": "170135094",
"type": "crime"
},
{
"level": "lev1",
"id": "151390617",
"type": "crime"
},
{
"level": "lev1",
"id": "181013990",
"type": "crime"
},
{
"level": "lev1",
"id": "246866328",
"type": "crime"
},
{
"level": "lev1",
"id": "248643355",
"type": "crime"
},
{
"level": "lev1",
"id": "247687095",
"type": "crime"
},
{
"level": "lev1",
"id": "199034696",
"type": "crime"
},
{
"level": "lev1",
"id": "237148781",
"type": "crime"
},
{
"level": "lev1",
"id": "169599424",
"type": "crime"
},
{
"level": "lev1",
"id": "171776080",
"type": "crime"
},
{
"level": "lev1",
"id": "249115457",
"type": "crime"
},
{
"level": "lev1",
"id": "244037963",
"type": "crime"
},
{
"level": "lev1",
"id": "247481321",
"type": "crime"
},
{
"level": "lev1",
"id": "241249876",
"type": "crime"
},
{
"level": "lev1",
"id": "165925084",
"type": "crime"
},
{
"level": "lev1",
"id": "240137299",
"type": "crime"
},
{
"level": "lev1",
"id": "240137162",
"type": "crime"
},
{
"level": "lev1",
"id": "197404396",
"type": "crime"
},
{
"level": "lev1",
"id": "231180787",
"type": "crime"
},
{
"level": "lev1",
"id": "245082862",
"type": "crime"
},
{
"level": "lev1",
"id": "169004159",
"type": "crime"
},
{
"level": "lev1",
"id": "195340354",
"type": "crime"
},
{
"level": "lev1",
"id": "DOE_PARK-CARSINGTON",
"type": "locationrecord"
},
{
"level": "lev1",
"id": "247740388",
"type": "crime"
},
{
"level": "lev1",
"id": "237314688",
"type": "crime"
},
{
"level": "lev1",
"id": "156923636",
"type": "crime"
},
{
"level": "lev1",
"id": "246850984",
"type": "crime"
},
{
"level": "lev1",
"id": "233248939",
"type": "crime"
},
{
"level": "lev1",
"id": "171428100",
"type": "crime"
},
{
"level": "lev1",
"id": "247112380",
"type": "crime"
},
{
"level": "lev1",
"id": "244623638",
"type": "crime"
},
{
"level": "lev1",
"id": "23571299T",
"type": "nominal"
},
{
"level": "lev1",
"id": "238573307",
"type": "crime"
},
{
"level": "lev1",
"id": "233312507",
"type": "crime"
},
{
"level": "lev1",
"id": "243422559",
"type": "crime"
},
{
"level": "lev1",
"id": "183278463",
"type": "crime"
},
{
"level": "lev1",
"id": "238492751",
"type": "crime"
},
{
"level": "lev1",
"id": "145384537",
"type": "crime"
},
{
"level": "lev1",
"id": "180971246",
"type": "crime"
},
{
"level": "lev1",
"id": "249641537",
"type": "crime"
},
{
"level": "lev1",
"id": "246709463",
"type": "crime"
},
{
"level": "lev1",
"id": "232703405",
"type": "crime"
},
{
"level": "lev1",
"id": "166652691",
"type": "crime"
},
{
"level": "lev1",
"id": "WELLGREEN_ROAD-CARSINGTON",
"type": "locationrecord"
},
{
"level": "lev1",
"id": "205400264",
"type": "crime"
},
{
"level": "lev1",
"id": "234934587",
"type": "crime"
},
{
"level": "lev1",
"id": "169220208",
"type": "crime"
},
{
"level": "lev1",
"id": "245839513",
"type": "crime"
},
{
"level": "lev1",
"id": "230235761",
"type": "crime"
},
{
"level": "lev1",
"id": "249389320",
"type": "crime"
},
{
"level": "lev1",
"id": "185286609",
"type": "crime"
},
{
"level": "lev1",
"id": "239263239",
"type": "crime"
},
{
"level": "lev1",
"id": "244928052",
"type": "crime"
}
],
"links": [
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link0",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "205400264"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link1",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "169599424"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link2",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "232703405"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link3",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "245082862"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link4",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "246866328"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link5",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "195340354"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link6",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "246850984"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link7",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "233312507"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link8",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "145384537"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link9",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "249641537"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link10",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "246709463"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link11",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "244623638"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link12",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "249389320"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link13",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "197404396"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link14",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "185286609"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link15",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "199034696"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link16",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "170135094"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link17",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "243422559"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link18",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "233248939"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link19",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "169220208"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link20",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "166652691"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link21",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "165925084"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link22",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "230235761"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link23",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "240137162"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link24",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "244928052"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link25",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "247481321"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link26",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "171428100"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link27",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "244037963"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link28",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "231180787"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link29",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "181013990"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link30",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "237148781"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link31",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "247112380"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link32",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "241249876"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link33",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "169004159"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link34",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "171776080"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link35",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "249115457"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link36",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "247687095"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link37",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "238573307"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link38",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "239263239"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link39",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "247740388"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link40",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "183278463"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link41",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "237314688"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link42",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "240137299"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link43",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "238492751"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link44",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "234934587"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link45",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "180971246"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link46",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "248643355"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link47",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "151390617"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link48",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "156923636"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "crime",
"id": "link49",
"source": "23571299T",
"type": "http://example.org#inCrime",
"target": "245839513"
},
{
"sourceType": "crime",
"level": "lev1",
"targetType": "locationrecord",
"id": "link50",
"source": "170135094",
"type": "http://example.org#hasLocation",
"target": "DOE_PARK-CARSINGTON"
},
{
"sourceType": "nominal",
"level": "lev1",
"targetType": "locationrecord",
"id": "link51",
"source": "23571299T",
"type": "http://example.org#hasHome",
"target": "WELLGREEN_ROAD-CARSINGTON"
}
]
}
Raw
graph.css
#vis {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow-x: hidden;
overflow-y: hidden;
}
.node .selected {
stroke: black;
}
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Entity Graph</title>
<meta name="description" content="Entity Graph">
<meta name="author" content="Patrick Seidler">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="graph.css">
<script type="text/javascript">
window.onload = function() {
var chart;
var defs;
var avatars = {};
var id = "170135094";
var custNodeDrawCallback = function(selection, d)
{
var def = defs[d.type]
if(d.id == id) {
avatar.draw(def.color1, def.color2, def.label, d.id, 20, false, selection);
return;
}
else if(!avatars.hasOwnProperty(d.type))
{
avatars[d.type] = avatar.draw(def.color1, def.color2, def.label, d.id, 10, false, null);
}
var a = avatars[d.type]
var i;
for(i = 0; i < a.length; i++) {
selection.appendChild(a[i].cloneNode(true));
}
}
var custLinkDrawCallback = function(selection, d)
{
var line = d3.select(selection).insert("line", ".node");
line.attr("class", "link")
.attr("stroke", function(d) { return d.color || '#999'; })
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
if(d.level == 'level2')
line.attr("stroke-dasharray", "5 5");
}
function display(data) {
defs = data.defs;
chart = EntityGraph
.instanceOf(d3)
.data(data)
.custnodedraw(custNodeDrawCallback)
.custlinkdraw(custLinkDrawCallback);
//Or like this
//var graph = Chart.instanceOf( { width : 500 } );
var svg = d3.select("#vis")
.call(chart.render);
}
d3.interval(function() {
datalev2 = {},
a = {
"id": "a",
"level": "level2",
"type": "nominal"
};
b = {
"id": "b",
"level": "level2",
"type": "crime"
};
nodes = [a, b],
links = [{"level": "level2", source: b, target: "170135094"},
{"level": "level2", source: a, target: b}];
datalev2.nodes = nodes;
datalev2.links = links;
chart.datalev2(datalev2)
}, 3000, d3.now());
d3.json('data.json', display);
};
</script>
</head>
<body>
<div class="container">
<div id="vis"></div>
<div class="footer">
</div>
</div>
<script src="d3_4_8_0.min.js"></script>
<script src="d3v4-brush-lite.js"></script>
<script src="avatar.js"></script>
<script src="graph.js"></script>
</body>
</html>
Raw
reset.css
/* HTML5 ✰ Boilerplate
* ==|== normalize ==========================================================
*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* ==|== primary styles =====================================================
Author:
========================================================================== */
/* ==|== non-semantic helper classes ======================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* ==|== media queries ====================================================== */
@media only screen and (min-width: 480px) {
}
@media only screen and (min-width: 768px) {
}
/* ==|== print styles ======================================================= */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment