Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;top:0;right:0; }
svg { width: 100%; height: 100%; }
</style>
</head>
<body>
<script>
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 800 - margin.left - margin.right;
var height = 800 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var nodeNums = 40;
var ignoreApi = ['d3.select', 'd3.selectAll'];
var force = d3.layout.force()
.size([width, height])
.charge(-800)
.linkDistance(400)
.on('tick', update);
var nodes = [];
var links = [];
var circle, path, text;
var nodeSizeScale = d3.scale.linear().range([5, 50]);
var nodesColor = d3.scale.category20();
var linkSizeScale = d3.scale.linear().range([1, 10]);
function enter() {
path = svg.selectAll('line')
.data(links).enter().append('line')
.attr('stroke', '#999')
.attr('opacity', .25);
circle = svg.selectAll('circle')
.data(nodes).enter().append('circle')
.call(force.drag);
text = svg.selectAll('text')
.data(nodes)
.enter().append('text')
.attr('text-anchor', 'middle')
.attr('dy', '.35em')
.style({
'font-size': '12px',
'font-family': 'Helvetica',
'font-weight': 600,
'pointer-events': 'none'
});
};
function update() {
circle.attr('r', function(d) {return d.size})
.attr('fill', function(d) {return d.fill})
.attr('cx', function(d) {return d.x})
.attr('cy', function(d) {return d.y});
text.attr('x', function(d) {return d.x})
.attr('y', function(d) {return d.y})
.text(function(d) {return d.name});
path.attr('stroke-width', function(d) {return d.size})
.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});
};
d3.json('nodes.json', function(nodesObj) {
d3.json('edges.json', function(edgesObj) {
var minSize = _.min(nodesObj, function(node) {return node.count}).count;
var maxSize = _.max(nodesObj, function(node) {return node.count}).count;
nodeSizeScale.domain([minSize, maxSize]);
_.chain(nodesObj)
.sortBy(function(node) {return -node.count})
.each(function(node, i) {
if (i >= nodeNums || _.contains(ignoreApi, node.name)) {
delete nodesObj[node.name];
} else {
node.fill = nodesColor(node.name);
node.size = nodeSizeScale(node.count);
nodes.push(node);
}
}).value();
var minSize = _.min(edgesObj, function(edge) {return edge.count}).count;
var maxSize = _.max(edgesObj, function(edge) {return edge.count}).count;
linkSizeScale.domain([minSize, maxSize]);
_.each(edgesObj, function(edge) {
if (!nodesObj[edge.source] || !nodesObj[edge.target]) return;
edge.source = nodesObj[edge.source];
edge.target = nodesObj[edge.target];
edge.size = linkSizeScale(edge.count);
links.push(edge);
});
console.log(nodes, links)
force.nodes(nodes).links(links)
.start();
enter();
});
});
</script>
</body>
{"d3.ascending":{"name":"d3.ascending","count":131},"d3.behavior.drag":{"name":"d3.behavior.drag","count":275},"d3.behavior":{"name":"d3.behavior","count":437},"d3.behavior.zoom":{"name":"d3.behavior.zoom","count":202},"d3.bisect":{"name":"d3.bisect","count":81},"d3.bisectLeft":{"name":"d3.bisectLeft","count":27},"d3.bisectRight":{"name":"d3.bisectRight","count":27},"d3.bisector":{"name":"d3.bisector","count":56},"d3.box":{"name":"d3.box","count":8},"d3.bullet":{"name":"d3.bullet","count":10},"d3.chart":{"name":"d3.chart","count":15},"d3.chernoff":{"name":"d3.chernoff","count":1},"d3.csv.format":{"name":"d3.csv.format","count":12},"d3.csv":{"name":"d3.csv","count":542},"d3.csv.parse":{"name":"d3.csv.parse","count":17},"d3.csv.parseRows":{"name":"d3.csv.parseRows","count":9},"d3.descending":{"name":"d3.descending","count":132},"d3.deviation":{"name":"d3.deviation","count":11},"d3.dispatch":{"name":"d3.dispatch","count":190},"d3.dsv":{"name":"d3.dsv","count":22},"d3.ease":{"name":"d3.ease","count":92},"d3.entries":{"name":"d3.entries","count":89},"d3.event":{"name":"d3.event","count":665},"d3.event.keyCode":{"name":"d3.event.keyCode","count":52},"d3.extent":{"name":"d3.extent","count":513},"d3.fisheye":{"name":"d3.fisheye","count":31},"d3.force_labels":{"name":"d3.force_labels","count":3},"d3.format":{"name":"d3.format","count":364},"d3.formatPrefix":{"name":"d3.formatPrefix","count":30},"d3.functor":{"name":"d3.functor","count":104},"d3.geo.airy":{"name":"d3.geo.airy","count":8},"d3.geo.aitoff":{"name":"d3.geo.aitoff","count":21},"d3.geo.albers":{"name":"d3.geo.albers","count":198},"d3.geo.albersUsa":{"name":"d3.geo.albersUsa","count":117},"d3.geo.area":{"name":"d3.geo.area","count":23},"d3.geo.armadillo":{"name":"d3.geo.armadillo","count":9},"d3.geo.august":{"name":"d3.geo.august","count":12},"d3.geo.azimuthalEqualArea":{"name":"d3.geo.azimuthalEqualArea","count":42},"d3.geo.azimuthalEqualArea.raw":{"name":"d3.geo.azimuthalEqualArea.raw","count":6},"d3.geo.azimuthalEquidistant":{"name":"d3.geo.azimuthalEquidistant","count":46},"d3.geo.azimuthalEquidistant.raw":{"name":"d3.geo.azimuthalEquidistant.raw","count":6},"d3.geo.baker":{"name":"d3.geo.baker","count":12},"d3.geo.berghaus":{"name":"d3.geo.berghaus","count":9},"d3.geo.boggs":{"name":"d3.geo.boggs","count":17},"d3.geo.bonne":{"name":"d3.geo.bonne","count":21},"d3.geo.bounds":{"name":"d3.geo.bounds","count":42},"d3.geo.bromley":{"name":"d3.geo.bromley","count":12},"d3.geo.centroid":{"name":"d3.geo.centroid","count":62},"d3.geo.chamberlin":{"name":"d3.geo.chamberlin","count":8},"d3.geo.circle":{"name":"d3.geo.circle","count":49},"d3.geo.clipExtent":{"name":"d3.geo.clipExtent","count":23},"d3.geo.collignon":{"name":"d3.geo.collignon","count":15},"d3.geo.conicConformal":{"name":"d3.geo.conicConformal","count":35},"d3.geo.conicEqualArea":{"name":"d3.geo.conicEqualArea","count":28},"d3.geo.conicEqualArea.raw":{"name":"d3.geo.conicEqualArea.raw","count":1},"d3.geo.conicEquidistant":{"name":"d3.geo.conicEquidistant","count":29},"d3.geo.craig":{"name":"d3.geo.craig","count":9},"d3.geo.craster":{"name":"d3.geo.craster","count":16},"d3.geo.cylindricalEqualArea":{"name":"d3.geo.cylindricalEqualArea","count":23},"d3.geo.cylindricalStereographic":{"name":"d3.geo.cylindricalStereographic","count":12},"d3.geo.distance":{"name":"d3.geo.distance","count":21},"d3.geo.eckert1":{"name":"d3.geo.eckert1","count":19},"d3.geo.eckert2":{"name":"d3.geo.eckert2","count":15},"d3.geo.eckert3":{"name":"d3.geo.eckert3","count":19},"d3.geo.eckert4":{"name":"d3.geo.eckert4","count":19},"d3.geo.eckert5":{"name":"d3.geo.eckert5","count":19},"d3.geo.eckert6":{"name":"d3.geo.eckert6","count":15},"d3.geo.eisenlohr":{"name":"d3.geo.eisenlohr","count":12},"d3.geo.equirectangular":{"name":"d3.geo.equirectangular","count":117},"d3.geo.fahey":{"name":"d3.geo.fahey","count":12},"d3.geo.foucaut":{"name":"d3.geo.foucaut","count":10},"d3.geo.gilbert":{"name":"d3.geo.gilbert","count":6},"d3.geo.ginzburg4":{"name":"d3.geo.ginzburg4","count":8},"d3.geo.ginzburg5":{"name":"d3.geo.ginzburg5","count":8},"d3.geo.ginzburg6":{"name":"d3.geo.ginzburg6","count":8},"d3.geo.ginzburg8":{"name":"d3.geo.ginzburg8","count":12},"d3.geo.ginzburg9":{"name":"d3.geo.ginzburg9","count":8},"d3.geo.gnomonic":{"name":"d3.geo.gnomonic","count":41},"d3.geo.gnomonic.raw":{"name":"d3.geo.gnomonic.raw","count":6},"d3.geo.graticule":{"name":"d3.geo.graticule","count":332},"d3.geo.greatArc":{"name":"d3.geo.greatArc","count":32},"d3.geo.gringorten":{"name":"d3.geo.gringorten","count":9},"d3.geo.guyou":{"name":"d3.geo.guyou","count":11},"d3.geo.hammer":{"name":"d3.geo.hammer","count":33},"d3.geo.hammerRetroazimuthal":{"name":"d3.geo.hammerRetroazimuthal","count":9},"d3.geo.healpix":{"name":"d3.geo.healpix","count":8},"d3.geo.hill":{"name":"d3.geo.hill","count":13},"d3.geo.homolosine":{"name":"d3.geo.homolosine","count":17},"d3.geo.interpolate":{"name":"d3.geo.interpolate","count":32},"d3.geo":{"name":"d3.geo","count":1096},"d3.geo.kavrayskiy7":{"name":"d3.geo.kavrayskiy7","count":31},"d3.geo.lagrange":{"name":"d3.geo.lagrange","count":12},"d3.geo.larrivee":{"name":"d3.geo.larrivee","count":20},"d3.geo.laskowski":{"name":"d3.geo.laskowski","count":12},"d3.geo.length":{"name":"d3.geo.length","count":22},"d3.geo.littrow":{"name":"d3.geo.littrow","count":7},"d3.geo.loximuthal":{"name":"d3.geo.loximuthal","count":12},"d3.geo.mercator":{"name":"d3.geo.mercator","count":235},"d3.geo.miller":{"name":"d3.geo.miller","count":19},"d3.geo.modifiedStereographic":{"name":"d3.geo.modifiedStereographic","count":6},"d3.geo.mollweide":{"name":"d3.geo.mollweide","count":32},"d3.geo.mtFlatPolarParabolic":{"name":"d3.geo.mtFlatPolarParabolic","count":12},"d3.geo.mtFlatPolarQuartic":{"name":"d3.geo.mtFlatPolarQuartic","count":12},"d3.geo.mtFlatPolarSinusoidal":{"name":"d3.geo.mtFlatPolarSinusoidal","count":16},"d3.geo.naturalEarth":{"name":"d3.geo.naturalEarth","count":19},"d3.geo.nellHammer":{"name":"d3.geo.nellHammer","count":19},"d3.geo.orthographic":{"name":"d3.geo.orthographic","count":106},"d3.geo.path":{"name":"d3.geo.path","count":820},"d3.geo.peirceQuincuncial":{"name":"d3.geo.peirceQuincuncial","count":7},"d3.geo.polyconic":{"name":"d3.geo.polyconic","count":15},"d3.geo.polyhedron.butterfly":{"name":"d3.geo.polyhedron.butterfly","count":3},"d3.geo.polyhedron":{"name":"d3.geo.polyhedron","count":6},"d3.geo.polyhedron.waterman":{"name":"d3.geo.polyhedron.waterman","count":6},"d3.geo.projection":{"name":"d3.geo.projection","count":262},"d3.geo.projectionMutator":{"name":"d3.geo.projectionMutator","count":27},"d3.geo.rectangularPolyconic":{"name":"d3.geo.rectangularPolyconic","count":8},"d3.geo.robinson":{"name":"d3.geo.robinson","count":20},"d3.geo.rotation":{"name":"d3.geo.rotation","count":26},"d3.geo.satellite":{"name":"d3.geo.satellite","count":26},"d3.geo.sinuMollweide":{"name":"d3.geo.sinuMollweide","count":13},"d3.geo.sinusoidal":{"name":"d3.geo.sinusoidal","count":21},"d3.geo.stereographic":{"name":"d3.geo.stereographic","count":32},"d3.geo.stream":{"name":"d3.geo.stream","count":29},"d3.geo.tile":{"name":"d3.geo.tile","count":34},"d3.geo.times":{"name":"d3.geo.times","count":9},"d3.geo.transform":{"name":"d3.geo.transform","count":38},"d3.geo.transverseMercator":{"name":"d3.geo.transverseMercator","count":26},"d3.geo.twoPointAzimuthal":{"name":"d3.geo.twoPointAzimuthal","count":6},"d3.geo.twoPointEquidistant":{"name":"d3.geo.twoPointEquidistant","count":8},"d3.geo.vanDerGrinten":{"name":"d3.geo.vanDerGrinten","count":23},"d3.geo.vanDerGrinten2":{"name":"d3.geo.vanDerGrinten2","count":8},"d3.geo.vanDerGrinten3":{"name":"d3.geo.vanDerGrinten3","count":8},"d3.geo.vanDerGrinten4":{"name":"d3.geo.vanDerGrinten4","count":12},"d3.geo.wagner4":{"name":"d3.geo.wagner4","count":12},"d3.geo.wagner6":{"name":"d3.geo.wagner6","count":19},"d3.geo.wagner7":{"name":"d3.geo.wagner7","count":16},"d3.geo.wiechel":{"name":"d3.geo.wiechel","count":10},"d3.geo.winkel3":{"name":"d3.geo.winkel3","count":21},"d3.geodesic":{"name":"d3.geodesic","count":6},"d3.geom.contour":{"name":"d3.geom.contour","count":6},"d3.geom.delaunay":{"name":"d3.geom.delaunay","count":44},"d3.geom.hull":{"name":"d3.geom.hull","count":28},"d3.geom":{"name":"d3.geom","count":245},"d3.geom.polygon":{"name":"d3.geom.polygon","count":67},"d3.geom.quadtree":{"name":"d3.geom.quadtree","count":98},"d3.geom.voronoi":{"name":"d3.geom.voronoi","count":135},"d3.graph":{"name":"d3.graph","count":2},"d3.hcl":{"name":"d3.hcl","count":48},"d3.hexbin":{"name":"d3.hexbin","count":22},"d3.hive":{"name":"d3.hive","count":2},"d3.horizon":{"name":"d3.horizon","count":12},"d3.hsl":{"name":"d3.hsl","count":93},"d3.html":{"name":"d3.html","count":35},"d3.interpolate":{"name":"d3.interpolate","count":714},"d3.interpolateArray":{"name":"d3.interpolateArray","count":29},"d3.interpolateHcl":{"name":"d3.interpolateHcl","count":119},"d3.interpolateHsl":{"name":"d3.interpolateHsl","count":269},"d3.interpolateLab":{"name":"d3.interpolateLab","count":82},"d3.interpolateNumber":{"name":"d3.interpolateNumber","count":154},"d3.interpolateObject":{"name":"d3.interpolateObject","count":27},"d3.interpolateRgb":{"name":"d3.interpolateRgb","count":128},"d3.interpolateRound":{"name":"d3.interpolateRound","count":31},"d3.interpolateString":{"name":"d3.interpolateString","count":47},"d3.interpolateTransform":{"name":"d3.interpolateTransform","count":30},"d3.interpolateZoom":{"name":"d3.interpolateZoom","count":20},"d3.interpolators":{"name":"d3.interpolators","count":27},"d3.json":{"name":"d3.json","count":1135},"d3.keys":{"name":"d3.keys","count":262},"d3.lab":{"name":"d3.lab","count":36},"d3.layout.bundle":{"name":"d3.layout.bundle","count":33},"d3.layout.chord":{"name":"d3.layout.chord","count":60},"d3.layout.cluster":{"name":"d3.layout.cluster","count":46},"d3.layout.force":{"name":"d3.layout.force","count":274},"d3.layout.hierarchy":{"name":"d3.layout.hierarchy","count":33},"d3.layout.histogram":{"name":"d3.layout.histogram","count":52},"d3.layout":{"name":"d3.layout","count":728},"d3.layout.pack":{"name":"d3.layout.pack","count":64},"d3.layout.partition":{"name":"d3.layout.partition","count":62},"d3.layout.pie":{"name":"d3.layout.pie","count":155},"d3.layout.stack":{"name":"d3.layout.stack","count":90},"d3.layout.tree":{"name":"d3.layout.tree","count":130},"d3.layout.treemap":{"name":"d3.layout.treemap","count":57},"d3.locale":{"name":"d3.locale","count":13},"d3.longscroll":{"name":"d3.longscroll","count":1},"d3.map":{"name":"d3.map","count":87},"d3.max":{"name":"d3.max","count":816},"d3.mean":{"name":"d3.mean","count":72},"d3.median":{"name":"d3.median","count":34},"d3.merge":{"name":"d3.merge","count":89},"d3.min":{"name":"d3.min","count":735},"d3.mouse":{"name":"d3.mouse","count":366},"d3.nest":{"name":"d3.nest","count":345},"d3.ns":{"name":"d3.ns","count":41},"d3.ns.prefix":{"name":"d3.ns.prefix","count":35},"d3.ns.qualify":{"name":"d3.ns.qualify","count":32},"d3.pairs":{"name":"d3.pairs","count":25},"d3.permute":{"name":"d3.permute","count":28},"d3.qq":{"name":"d3.qq","count":4},"d3.quantile":{"name":"d3.quantile","count":43},"d3.random.bates":{"name":"d3.random.bates","count":3},"d3.random.irwinHall":{"name":"d3.random.irwinHall","count":15},"d3.random.logNormal":{"name":"d3.random.logNormal","count":1},"d3.random.normal":{"name":"d3.random.normal","count":60},"d3.range":{"name":"d3.range","count":1341},"d3.rebind":{"name":"d3.rebind","count":145},"d3.requote":{"name":"d3.requote","count":27},"d3.rgb":{"name":"d3.rgb","count":207},"d3.rollup":{"name":"d3.rollup","count":1},"d3.round":{"name":"d3.round","count":58},"d3.sankey":{"name":"d3.sankey","count":34},"d3.scale.category":{"name":"d3.scale.category","count":682},"d3.scale.identity":{"name":"d3.scale.identity","count":51},"d3.scale":{"name":"d3.scale","count":2654},"d3.scale.linear":{"name":"d3.scale.linear","count":1943},"d3.scale.log":{"name":"d3.scale.log","count":83},"d3.scale.ordinal":{"name":"d3.scale.ordinal","count":669},"d3.scale.pow":{"name":"d3.scale.pow","count":42},"d3.scale.quantile":{"name":"d3.scale.quantile","count":42},"d3.scale.quantize":{"name":"d3.scale.quantize","count":106},"d3.scale.sqrt":{"name":"d3.scale.sqrt","count":168},"d3.scale.threshold":{"name":"d3.scale.threshold","count":54},"d3.select":{"name":"d3.select","count":4621},"d3.selectAll":{"name":"d3.selectAll","count":673},"d3.selection":{"name":"d3.selection","count":115},"d3.set":{"name":"d3.set","count":42},"d3.shuffle":{"name":"d3.shuffle","count":40},"d3.sum":{"name":"d3.sum","count":117},"d3.superformula":{"name":"d3.superformula","count":8},"d3.svg.arc":{"name":"d3.svg.arc","count":330},"d3.svg.area":{"name":"d3.svg.area","count":154},"d3.svg.area.radial":{"name":"d3.svg.area.radial","count":30},"d3.svg.axis":{"name":"d3.svg.axis","count":853},"d3.svg.brush":{"name":"d3.svg.brush","count":194},"d3.svg.chord":{"name":"d3.svg.chord","count":61},"d3.svg.diagonal":{"name":"d3.svg.diagonal","count":94},"d3.svg.diagonal.radial":{"name":"d3.svg.diagonal.radial","count":40},"d3.svg":{"name":"d3.svg","count":1607},"d3.svg.line":{"name":"d3.svg.line","count":640},"d3.svg.line.radial":{"name":"d3.svg.line.radial","count":44},"d3.svg.symbol":{"name":"d3.svg.symbol","count":61},"d3.svg.symbolTypes":{"name":"d3.svg.symbolTypes","count":33},"d3.text":{"name":"d3.text","count":45},"d3.time.day":{"name":"d3.time.day","count":93},"d3.time.dayOfYear":{"name":"d3.time.dayOfYear","count":26},"d3.time.days":{"name":"d3.time.days","count":52},"d3.time.format.iso":{"name":"d3.time.format.iso","count":35},"d3.time.format":{"name":"d3.time.format","count":401},"d3.time.format.multi":{"name":"d3.time.format.multi","count":15},"d3.time.format.utc":{"name":"d3.time.format.utc","count":38},"d3.time.hour":{"name":"d3.time.hour","count":47},"d3.time.hours":{"name":"d3.time.hours","count":40},"d3.time.interval":{"name":"d3.time.interval","count":22},"d3.time":{"name":"d3.time","count":765},"d3.time.minute":{"name":"d3.time.minute","count":32},"d3.time.minutes":{"name":"d3.time.minutes","count":31},"d3.time.monday":{"name":"d3.time.monday","count":26},"d3.time.mondayOfYear":{"name":"d3.time.mondayOfYear","count":25},"d3.time.mondays":{"name":"d3.time.mondays","count":1},"d3.time.month":{"name":"d3.time.month","count":57},"d3.time.months":{"name":"d3.time.months","count":46},"d3.time.saturday":{"name":"d3.time.saturday","count":1},"d3.time.scale":{"name":"d3.time.scale","count":395},"d3.time.second":{"name":"d3.time.second","count":29},"d3.time.seconds":{"name":"d3.time.seconds","count":26},"d3.time.sunday":{"name":"d3.time.sunday","count":25},"d3.time.sundayOfYear":{"name":"d3.time.sundayOfYear","count":25},"d3.time.week":{"name":"d3.time.week","count":30},"d3.time.weekOfYear":{"name":"d3.time.weekOfYear","count":26},"d3.time.weeks":{"name":"d3.time.weeks","count":28},"d3.time.year":{"name":"d3.time.year","count":45},"d3.time.years":{"name":"d3.time.years","count":41},"d3.timer.flush":{"name":"d3.timer.flush","count":57},"d3.timer":{"name":"d3.timer","count":298},"d3.touch":{"name":"d3.touch","count":42},"d3.touches":{"name":"d3.touches","count":42},"d3.transform":{"name":"d3.transform","count":44},"d3.transition":{"name":"d3.transition","count":91},"d3.transpose":{"name":"d3.transpose","count":31},"d3.tsv.format":{"name":"d3.tsv.format","count":7},"d3.tsv":{"name":"d3.tsv","count":157},"d3.tsv.parse":{"name":"d3.tsv.parse","count":1},"d3.values":{"name":"d3.values","count":83},"d3.variance":{"name":"d3.variance","count":8},"d3.xhr":{"name":"d3.xhr","count":34},"d3.xml":{"name":"d3.xml","count":46},"d3.zip":{"name":"d3.zip","count":41}}