Skip to content

Instantly share code, notes, and snippets.

@vasanthk

vasanthk/electrode.json

Last active August 15, 2017 10:35
Show Gist options
  • Save vasanthk/8463aa5bd52394e6a489007faba2b4fd to your computer and use it in GitHub Desktop.
Save vasanthk/8463aa5bd52394e6a489007faba2b4fd to your computer and use it in GitHub Desktop.
Download ZIP
Electrode Viz
Raw
electrode.json
{
"name": "Electrode",
"children": [
{
"name": "Core",
"children": [
{
"name": "electrode-wml-server",
"children": [
{
"name": "electrode-server",
"size": 10000000
},
{
"name": "electrode-logging",
"size": 75000000
},
{
"name": "Hapi.js Plugins",
"children": [
{
"name": "electrode-appconfig",
"size": 4000000
},
{
"name": "wl-soa-esb-bug-patch",
"size": 2000000
},
{
"name": "electrode-logging-plugin",
"size": 3000000
},
{
"name": "electrode-log-consumer",
"size": 25000000
},
{
"name": "electrode-service-initializer",
"size": 5000000
},
{
"name": "electrode-ccm-initializer",
"size": 5000000
},
{
"name": "electrode-fetch/lib/hapi-plugin",
"size": 5000000
},
{
"name": "electrode-cookies/hapi-plugin",
"size": 5000000
},
{
"name": "electrode-health",
"size": 2000000
},
{
"name": "electrode-ui-config/hapi-plugin",
"size": 4000000
},
{
"name": "electrode-static-path",
"size": 3000000
}
]
}
]
},
{
"name": "electrode-confippet",
"size": 90000000
},
{
"name": "electrode-config",
"size": 70000000
},
{
"name": "electrode-swapi",
"size": 90000000
},
{
"name": "redux-router-engines",
"size": 90000000
}
]
},
{
"name": "Archetypes",
"children": [
{
"name": "electrode-archetype-react-app",
"size": 8000000
},
{
"name": "electrode-archetype-react-app-dev",
"size": 8000000
},
{
"name": "electrode-archetype-react-component",
"size": 8000000
},
{
"name": "electrode-archetype-njs-module-dev",
"size": 5000000
}
]
},
{
"name": "Libraries",
"children": [
{
"name": "electrode-cookies",
"size": 75000000
},
{
"name": "electrode-fetch",
"size": 75000000
},
{
"name": "electrode-metrics",
"size": 5000000
},
{
"name": "electrode-ui-logger",
"size": 6000000
},
{
"name": "lithe",
"size": 6000000
},
{
"name": "tempo-core",
"size": 75000000
}
]
},
{
"name": "Utils",
"children": [
{
"name": "cdn-file-loader",
"size": 25000000
},
{
"name": "electrode-check-dependencies",
"size": 15000000
},
{
"name": "electrode-explorer",
"size": 4000000
},
{
"name": "electrode-gulp-helper",
"size": 3000000
},
{
"name": "electrode-npm-singleton",
"size": 25000000
},
{
"name": "electrode-seo-metadata",
"size": 4000000
},
{
"name": "electrode-static-paths",
"size": 3000000
},
{
"name": "electrode-ui-config",
"size": 5000000
},
{
"name": "electrode-wml-ssr-cache-config",
"size": 25000000
},
{
"name": "electrode-wml-soa",
"size": 3000000
},
{
"name": "interval-worker",
"size": 2000000
},
{
"name": "npm-proxy",
"size": 3000000
},
{
"name": "s2s-auth-signature",
"size": 3000000
},
{
"name": "ssr-wrap-react",
"size": 4000000
},
{
"name": "stylus-loader",
"size": 5000000
},
{
"name": "tempo-support",
"size": 5000000
},
{
"name": "wl-soa-esb-bug-patch",
"size": 4000000
}
]
},
{
"name": "Onboarding",
"children": [
{
"name": "electrode-logging-examples",
"size": 3000000
},
{
"name": "generator-wml-electrode",
"size": 75000000
},
{
"name": "react-dev-guide",
"size": 5000000
}
]
},
{
"name": "Front End",
"children": [
{
"name": "demo-index",
"size": 5000000
},
{
"name": "electrode-react-context",
"size": 3000000
},
{
"name": "electrode-react-esi",
"size": 25000000
},
{
"name": "electrode-react-ssr-profiler",
"size": 4000000
},
{
"name": "react-component-cache",
"size": 6000000
},
{
"name": "skip-server-render",
"size": 6000000
}
]
},
{
"name": "Other Hapi.js Plugins",
"children": [
{
"name": "electrode-affiliate-cookies",
"size": 3000000
},
{
"name": "electrode-cls-provider",
"size": 4000000
},
{
"name": "electrode-csrf-jwt",
"size": 7000000
},
{
"name": "electrode-location-provider",
"size": 5000000
},
{
"name": "electrode-react-webapp",
"size": 8000000
},
{
"name": "electrode-react-webapp2",
"size": 8000000
},
{
"name": "electrode-sso-plugin",
"size": 3000000
}
]
}
]
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css">
text {
font-size: 11px;
pointer-events: none;
}
text.parent {
fill: #1f77b4;
}
circle {
fill: #ccc;
stroke: #999;
pointer-events: all;
}
circle.parent {
fill: #1f77b4;
fill-opacity: .1;
stroke: steelblue;
}
circle.parent:hover {
stroke: #ff7f0e;
stroke-width: .5px;
}
circle.child {
pointer-events: none;
}
</style>
</head>
<body>
<h2>
Electrode Modules
</h2>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
<script type="text/javascript">
var w = 1280,
h = 800,
r = 720,
x = d3.scale.linear().range([0, r]),
y = d3.scale.linear().range([0, r]),
node,
root;
var pack = d3.layout.pack()
.size([r, r])
.value(function(d) { return d.size; })
var vis = d3.select("body").insert("svg:svg", "h2")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");
d3.json("electrode.json", function(data) {
node = root = data;
var nodes = pack.nodes(root);
vis.selectAll("circle")
.data(nodes)
.enter().append("svg:circle")
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; })
.on("click", function(d) { return zoom(node == d ? root : d); });
vis.selectAll("text")
.data(nodes)
.enter().append("svg:text")
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
.text(function(d) { return d.name; });
d3.select(window).on("click", function() { zoom(root); });
});
function zoom(d, i) {
var k = r / d.r / 2;
x.domain([d.x - d.r, d.x + d.r]);
y.domain([d.y - d.r, d.y + d.r]);
var t = vis.transition()
.duration(d3.event.altKey ? 7500 : 750);
t.selectAll("circle")
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.attr("r", function(d) { return k * d.r; });
t.selectAll("text")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.style("opacity", function(d) { return k * d.r > 20 ? 1 : 0; });
node = d;
d3.event.stopPropagation();
}
</script>
</body>
</html>
Raw
style.css
body {
font: 300 36px "Helvetica Neue";
height: 640px;
margin: 80px 160px 80px 160px;
overflow: hidden;
position: relative;
width: 960px;
}
a:link, a:visited {
color: #777;
text-decoration: none;
}
a:hover {
color: #666;
}
blockquote {
margin: 0;
}
blockquote:before {
content: "“";
position: absolute;
left: -.4em;
}
blockquote:after {
content: "”";
position: absolute;
}
body > ul {
margin: 0;
padding: 0;
}
h1 {
font-size: 64px;
}
h1, h2, h3 {
font-weight: inherit;
margin: 0;
}
h2, h3 {
text-align: right;
font-size: inherit;
position: absolute;
bottom: 0;
right: 0;
}
h2 {
font-size: 24px;
position: absolute;
}
h3 {
bottom: -20px;
font-size: 18px;
}
.invert {
background: #1f1f1f;
color: #dcdccc;
}
.invert h2, .invert h3 {
color: #7f9f7f;
}
.string, .regexp {
color: #f39;
}
.keyword {
color: #00c;
}
.comment {
color: #777;
font-style: oblique;
}
.number {
color: #369;
}
.class, .special {
color: #1181B8;
}
body > svg {
position: absolute;
top: -80px;
left: -160px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment