Skip to content

Instantly share code, notes, and snippets.

@josiahdavis

josiahdavis/.DS_Store

Forked from mbostock/.block
Last active September 18, 2015 21:56
Show Gist options
  • Save josiahdavis/f6bec201adcb3001b6da to your computer and use it in GitHub Desktop.
Save josiahdavis/f6bec201adcb3001b6da to your computer and use it in GitHub Desktop.
Download ZIP
Correlation Coefficient Force Layout
Raw
README.md
Raw
d3-legend.js
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var helper = require('./legend');
module.exports = function(){
var scale = d3.scale.linear(),
shape = "rect",
shapeWidth = 15,
shapeHeight = 15,
shapeRadius = 10,
shapePadding = 2,
cells = [5],
labels = [],
useClass = false,
labelFormat = d3.format(".01f"),
labelOffset = 10,
labelAlign = "middle",
labelDelimiter = "to",
orient = "vertical",
ascending = false,
path,
legendDispatcher = d3.dispatch("cellover", "cellout", "cellclick");
function legend(svg){
var type = helper.d3_calcType(scale, ascending, cells, labels, labelFormat, labelDelimiter);
var cell = svg.selectAll(".cell").data(type.data),
cellEnter = cell.enter().append("g", ".cell").attr("class", "cell").style("opacity", 1e-6);
shapeEnter = cellEnter.append(shape).attr("class", "swatch"),
shapes = cell.select("g.cell " + shape);
//add event handlers
helper.d3_addEvents(cellEnter, legendDispatcher);
cell.exit().transition().style("opacity", 0).remove();
helper.d3_drawShapes(shape, shapes, shapeHeight, shapeWidth, shapeRadius, path);
helper.d3_addText(svg, cellEnter, type.labels)
// sets placement
var text = cell.select("text"),
shapeSize = shapes[0].map( function(d){ return d.getBBox(); });
//sets scale
//everything is fill except for line which is stroke,
if (!useClass){
if (shape == "line"){
shapes.style("stroke", type.feature);
} else {
shapes.style("fill", type.feature);
}
} else {
shapes.attr("class", function(d){ return "swatch " + type.feature(d); });
}
var cellTrans,
textTrans,
textAlign = (labelAlign == "start") ? 0 : (labelAlign == "middle") ? 0.5 : 1;
//positions cells and text
if (orient === "vertical"){
cellTrans = function(d,i) { return "translate(0, " + (i * (shapeSize[i].height + shapePadding)) + ")"; };
textTrans = function(d,i) { return "translate(" + (shapeSize[i].width + shapeSize[i].x +
labelOffset) + "," + (shapeSize[i].y + shapeSize[i].height/2 + 5) + ")"; };
} else if (orient === "horizontal"){
cellTrans = function(d,i) { return "translate(" + (i * (shapeSize[i].width + shapePadding)) + ",0)"; }
textTrans = function(d,i) { return "translate(" + (shapeSize[i].width*textAlign + shapeSize[i].x) +
"," + (shapeSize[i].height + shapeSize[i].y + labelOffset + 8) + ")"; };
}
helper.d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign);
cell.transition().style("opacity", 1);
}
legend.scale = function(_) {
if (!arguments.length) return legend;
scale = _;
return legend;
};
legend.cells = function(_) {
if (!arguments.length) return legend;
if (_.length > 1 || _ >= 2 ){
cells = _;
}
return legend;
};
legend.shape = function(_, d) {
if (!arguments.length) return legend;
if (_ == "rect" || _ == "circle" || _ == "line" || (_ == "path" && (typeof d === 'string')) ){
shape = _;
path = d;
}
return legend;
};
legend.shapeWidth = function(_) {
if (!arguments.length) return legend;
shapeWidth = +_;
return legend;
};
legend.shapeHeight = function(_) {
if (!arguments.length) return legend;
shapeHeight = +_;
return legend;
};
legend.shapeRadius = function(_) {
if (!arguments.length) return legend;
shapeRadius = +_;
return legend;
};
legend.shapePadding = function(_) {
if (!arguments.length) return legend;
shapePadding = +_;
return legend;
};
legend.labels = function(_) {
if (!arguments.length) return legend;
labels = _;
return legend;
};
legend.labelAlign = function(_) {
if (!arguments.length) return legend;
if (_ == "start" || _ == "end" || _ == "middle") {
labelAlign = _;
}
return legend;
};
legend.labelFormat = function(_) {
if (!arguments.length) return legend;
labelFormat = _;
return legend;
};
legend.labelOffset = function(_) {
if (!arguments.length) return legend;
labelOffset = +_;
return legend;
};
legend.labelDelimiter = function(_) {
if (!arguments.length) return legend;
labelDelimiter = _;
return legend;
};
legend.useClass = function(_) {
if (!arguments.length) return legend;
if (_ === true || _ === false){
useClass = _;
}
return legend;
};
legend.orient = function(_){
if (!arguments.length) return legend;
_ = _.toLowerCase();
if (_ == "horizontal" || _ == "vertical") {
orient = _;
}
return legend;
};
legend.ascending = function(_) {
if (!arguments.length) return legend;
ascending = !!_;
return legend;
};
d3.rebind(legend, legendDispatcher, "on");
return legend;
};
},{"./legend":2}],2:[function(require,module,exports){
module.exports = {
d3_identity: function (d) {
return d;
},
d3_mergeLabels: function (gen, labels) {
if(labels.length === 0) return gen;
gen = (gen) ? gen : [];
var i = labels.length;
for (; i < gen.length; i++) {
labels.push(gen[i]);
}
return labels;
},
d3_linearLegend: function (scale, cells, labelFormat) {
var data = [];
if (cells.length > 1){
data = cells;
} else {
var domain = scale.domain(),
increment = (domain[domain.length - 1] - domain[0])/(cells - 1),
i = 0;
for (; i < cells; i++){
data.push(domain[0] + i*increment);
}
}
var labels = data.map(labelFormat);
return {data: data,
labels: labels,
feature: function(d){ return scale(d); }};
},
d3_quantLegend: function (scale, labelFormat, labelDelimiter) {
var labels = scale.range().map(function(d){
var invert = scale.invertExtent(d),
a = labelFormat(invert[0]),
b = labelFormat(invert[1]);
// if (( (a) && (a.isNan()) && b){
// console.log("in initial statement")
return labelFormat(invert[0]) + " " + labelDelimiter + " " + labelFormat(invert[1]);
// } else if (a || b) {
// console.log('in else statement')
// return (a) ? a : b;
// }
});
return {data: scale.range(),
labels: labels,
feature: this.d3_identity
};
},
d3_ordinalLegend: function (scale) {
return {data: scale.domain(),
labels: scale.domain(),
feature: function(d){ return scale(d); }};
},
d3_drawShapes: function (shape, shapes, shapeHeight, shapeWidth, shapeRadius, path) {
if (shape === "rect"){
shapes.attr("height", shapeHeight).attr("width", shapeWidth);
} else if (shape === "circle") {
shapes.attr("r", shapeRadius)//.attr("cx", shapeRadius).attr("cy", shapeRadius);
} else if (shape === "line") {
shapes.attr("x1", 0).attr("x2", shapeWidth).attr("y1", 0).attr("y2", 0);
} else if (shape === "path") {
shapes.attr("d", path);
}
},
d3_addText: function (svg, enter, labels){
enter.append("text").attr("class", "label");
svg.selectAll("g.cell text").data(labels).text(this.d3_identity);
},
d3_calcType: function (scale, ascending, cells, labels, labelFormat, labelDelimiter){
var type = scale.ticks ?
this.d3_linearLegend(scale, cells, labelFormat) : scale.invertExtent ?
this.d3_quantLegend(scale, labelFormat, labelDelimiter) : this.d3_ordinalLegend(scale);
type.labels = this.d3_mergeLabels(type.labels, labels);
if (ascending) {
type.labels = this.d3_reverse(type.labels);
type.data = this.d3_reverse(type.data);
}
return type;
},
d3_reverse: function(arr) {
var mirror = [];
for (var i = 0, l = arr.length; i < l; i++) {
mirror[i] = arr[l-i-1];
}
return mirror;
},
d3_placement: function (orient, cell, cellTrans, text, textTrans, labelAlign) {
cell.attr("transform", cellTrans);
text.attr("transform", textTrans);
if (orient === "horizontal"){
text.style("text-anchor", labelAlign);
}
},
d3_addEvents: function(cells, dispatcher){
var _ = this;
cells.on("mouseover.legend", function (d) { _.d3_cellOver(dispatcher, d, this); })
.on("mouseout.legend", function (d) { _.d3_cellOut(dispatcher, d, this); })
.on("click.legend", function (d) { _.d3_cellClick(dispatcher, d, this); });
},
d3_cellOver: function(cellDispatcher, d, obj){
cellDispatcher.cellover.call(obj, d);
},
d3_cellOut: function(cellDispatcher, d, obj){
cellDispatcher.cellout.call(obj, d);
},
d3_cellClick: function(cellDispatcher, d, obj){
cellDispatcher.cellclick.call(obj, d);
}
}
},{}],3:[function(require,module,exports){
var helper = require('./legend');
module.exports = function(){
var scale = d3.scale.linear(),
shape = "rect",
shapeWidth = 15,
shapePadding = 2,
cells = [5],
labels = [],
useStroke = false,
labelFormat = d3.format(".01f"),
labelOffset = 10,
labelAlign = "middle",
labelDelimiter = "to",
orient = "vertical",
ascending = false,
path,
legendDispatcher = d3.dispatch("cellover", "cellout", "cellclick");
function legend(svg){
var type = helper.d3_calcType(scale, ascending, cells, labels, labelFormat, labelDelimiter);
var cell = svg.selectAll(".cell").data(type.data),
cellEnter = cell.enter().append("g", ".cell").attr("class", "cell").style("opacity", 1e-6);
shapeEnter = cellEnter.append(shape).attr("class", "swatch"),
shapes = cell.select("g.cell " + shape);
//add event handlers
helper.d3_addEvents(cellEnter, legendDispatcher);
cell.exit().transition().style("opacity", 0).remove();
//creates shape
if (shape === "line"){
helper.d3_drawShapes(shape, shapes, 0, shapeWidth);
shapes.attr("stroke-width", type.feature);
} else {
helper.d3_drawShapes(shape, shapes, type.feature, type.feature, type.feature, path);
}
helper.d3_addText(svg, cellEnter, type.labels)
//sets placement
var text = cell.select("text"),
shapeSize = shapes[0].map(
function(d, i){
var bbox = d.getBBox()
var stroke = scale(type.data[i]);
if (shape === "line" && orient === "horizontal") {
bbox.height = bbox.height + stroke;
} else if (shape === "line" && orient === "vertical"){
bbox.width = bbox.width;
}
return bbox;
});
var maxH = d3.max(shapeSize, function(d){ return d.height + d.y; }),
maxW = d3.max(shapeSize, function(d){ return d.width + d.x; });
var cellTrans,
textTrans,
textAlign = (labelAlign == "start") ? 0 : (labelAlign == "middle") ? 0.5 : 1;
//positions cells and text
if (orient === "vertical"){
cellTrans = function(d,i) {
var height = d3.sum(shapeSize.slice(0, i + 1 ), function(d){ return d.height; });
return "translate(0, " + (height + i*shapePadding) + ")"; };
textTrans = function(d,i) { return "translate(" + (maxW + labelOffset) + "," +
(shapeSize[i].y + shapeSize[i].height/2 + 5) + ")"; };
} else if (orient === "horizontal"){
cellTrans = function(d,i) {
var width = d3.sum(shapeSize.slice(0, i + 1 ), function(d){ return d.width; });
return "translate(" + (width + i*shapePadding) + ",0)"; };
textTrans = function(d,i) { return "translate(" + (shapeSize[i].width*textAlign + shapeSize[i].x) + "," +
(maxH + labelOffset ) + ")"; };
}
helper.d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign);
cell.transition().style("opacity", 1);
}
legend.scale = function(_) {
if (!arguments.length) return legend;
scale = _;
return legend;
};
legend.cells = function(_) {
if (!arguments.length) return legend;
if (_.length > 1 || _ >= 2 ){
cells = _;
}
return legend;
};
legend.shape = function(_, d) {
if (!arguments.length) return legend;
if (_ == "rect" || _ == "circle" || _ == "line" ){
shape = _;
path = d;
}
return legend;
};
legend.shapeWidth = function(_) {
if (!arguments.length) return legend;
shapeWidth = +_;
return legend;
};
legend.shapePadding = function(_) {
if (!arguments.length) return legend;
shapePadding = +_;
return legend;
};
legend.labels = function(_) {
if (!arguments.length) return legend;
labels = _;
return legend;
};
legend.labelAlign = function(_) {
if (!arguments.length) return legend;
if (_ == "start" || _ == "end" || _ == "middle") {
labelAlign = _;
}
return legend;
};
legend.labelFormat = function(_) {
if (!arguments.length) return legend;
labelFormat = _;
return legend;
};
legend.labelOffset = function(_) {
if (!arguments.length) return legend;
labelOffset = +_;
return legend;
};
legend.labelDelimiter = function(_) {
if (!arguments.length) return legend;
labelDelimiter = _;
return legend;
};
legend.orient = function(_){
if (!arguments.length) return legend;
_ = _.toLowerCase();
if (_ == "horizontal" || _ == "vertical") {
orient = _;
}
return legend;
};
legend.ascending = function(_) {
if (!arguments.length) return legend;
ascending = !!_;
return legend;
};
d3.rebind(legend, legendDispatcher, "on");
return legend;
};
},{"./legend":2}],4:[function(require,module,exports){
var helper = require('./legend');
module.exports = function(){
var scale = d3.scale.linear(),
shape = "path",
shapeWidth = 15,
shapeHeight = 15,
shapeRadius = 10,
shapePadding = 5,
cells = [5],
labels = [],
useClass = false,
labelFormat = d3.format(".01f"),
labelAlign = "middle",
labelOffset = 10,
labelDelimiter = "to",
orient = "vertical",
ascending = false,
legendDispatcher = d3.dispatch("cellover", "cellout", "cellclick");
function legend(svg){
var type = helper.d3_calcType(scale, ascending, cells, labels, labelFormat, labelDelimiter);
var cell = svg.selectAll(".cell").data(type.data),
cellEnter = cell.enter().append("g", ".cell").attr("class", "cell").style("opacity", 1e-6);
shapeEnter = cellEnter.append(shape).attr("class", "swatch"),
shapes = cell.select("g.cell " + shape);
//add event handlers
helper.d3_addEvents(cellEnter, legendDispatcher);
//remove old shapes
cell.exit().transition().style("opacity", 0).remove();
helper.d3_drawShapes(shape, shapes, shapeHeight, shapeWidth, shapeRadius, type.feature);
helper.d3_addText(svg, cellEnter, type.labels)
// sets placement
var text = cell.select("text"),
shapeSize = shapes[0].map( function(d){ return d.getBBox(); });
var maxH = d3.max(shapeSize, function(d){ return d.height; }),
maxW = d3.max(shapeSize, function(d){ return d.width; });
var cellTrans,
textTrans,
textAlign = (labelAlign == "start") ? 0 : (labelAlign == "middle") ? 0.5 : 1;
//positions cells and text
if (orient === "vertical"){
cellTrans = function(d,i) { return "translate(0, " + (i * (maxH + shapePadding)) + ")"; };
textTrans = function(d,i) { return "translate(" + (maxW + labelOffset) + "," +
(shapeSize[i].y + shapeSize[i].height/2 + 5) + ")"; };
} else if (orient === "horizontal"){
cellTrans = function(d,i) { return "translate(" + (i * (maxW + shapePadding)) + ",0)"; };
textTrans = function(d,i) { return "translate(" + (shapeSize[i].width*textAlign + shapeSize[i].x) + "," +
(maxH + labelOffset ) + ")"; };
}
helper.d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign);
cell.transition().style("opacity", 1);
}
legend.scale = function(_) {
if (!arguments.length) return legend;
scale = _;
return legend;
};
legend.cells = function(_) {
if (!arguments.length) return legend;
if (_.length > 1 || _ >= 2 ){
cells = _;
}
return legend;
};
legend.shapePadding = function(_) {
if (!arguments.length) return legend;
shapePadding = +_;
return legend;
};
legend.labels = function(_) {
if (!arguments.length) return legend;
labels = _;
return legend;
};
legend.labelAlign = function(_) {
if (!arguments.length) return legend;
if (_ == "start" || _ == "end" || _ == "middle") {
labelAlign = _;
}
return legend;
};
legend.labelFormat = function(_) {
if (!arguments.length) return legend;
labelFormat = _;
return legend;
};
legend.labelOffset = function(_) {
if (!arguments.length) return legend;
labelOffset = +_;
return legend;
};
legend.labelDelimiter = function(_) {
if (!arguments.length) return legend;
labelDelimiter = _;
return legend;
};
legend.orient = function(_){
if (!arguments.length) return legend;
_ = _.toLowerCase();
if (_ == "horizontal" || _ == "vertical") {
orient = _;
}
return legend;
};
legend.ascending = function(_) {
if (!arguments.length) return legend;
ascending = !!_;
return legend;
};
d3.rebind(legend, legendDispatcher, "on");
return legend;
};
},{"./legend":2}],5:[function(require,module,exports){
d3.legend = {
color: require('./color'),
size: require('./size'),
symbol: require('./symbol')
};
},{"./color":1,"./size":3,"./symbol":4}]},{},[5]);
Raw
data.json
{
"nodes": [{"Category": "Furniture", "id": "Bookcases", "Sales": 114879.99629999997}, {"Category": "Furniture", "id": "Chairs", "Sales": 328449.10300000076}, {"Category": "Furniture", "id": "Furnishings", "Sales": 91705.16400000005}, {"Category": "Furniture", "id": "Tables", "Sales": 206965.5320000001}, {"Category": "Office Supplies", "id": "Appliances", "Sales": 107532.161}, {"Category": "Office Supplies", "id": "Art", "Sales": 27118.791999999954}, {"Category": "Office Supplies", "id": "Binders", "Sales": 203412.7330000001}, {"Category": "Office Supplies", "id": "Envelopes", "Sales": 16476.401999999995}, {"Category": "Office Supplies", "id": "Fasteners", "Sales": 3024.2799999999997}, {"Category": "Office Supplies", "id": "Labels", "Sales": 12486.312}, {"Category": "Office Supplies", "id": "Paper", "Sales": 78479.20600000002}, {"Category": "Office Supplies", "id": "Storage", "Sales": 223843.60800000012}, {"Category": "Office Supplies", "id": "Supplies", "Sales": 46673.538000000015}, {"Category": "Technology", "id": "Accessories", "Sales": 167380.3180000001}, {"Category": "Technology", "id": "Copiers", "Sales": 149528.02999999994}, {"Category": "Technology", "id": "Machines", "Sales": 189238.63099999996}, {"Category": "Technology", "id": "Phones", "Sales": 330007.0540000001}],
"links": [{"source": "Accessories", "target": "Appliances", "value": 0.06717047661774254}, {"source": "Accessories", "target": "Art", "value": -0.03395978204078759}, {"source": "Accessories", "target": "Binders", "value": -0.029153320918497466}, {"source": "Accessories", "target": "Bookcases", "value": 0.03716297544498744}, {"source": "Accessories", "target": "Chairs", "value": 0.05126411161433975}, {"source": "Accessories", "target": "Copiers", "value": -0.03265782237104213}, {"source": "Accessories", "target": "Envelopes", "value": 0.005072469330625707}, {"source": "Accessories", "target": "Fasteners", "value": -0.01627709377113126}, {"source": "Accessories", "target": "Furnishings", "value": 0.06565245008006229}, {"source": "Accessories", "target": "Labels", "value": -0.019181868916336893}, {"source": "Accessories", "target": "Machines", "value": -0.016040587426079264}, {"source": "Accessories", "target": "Paper", "value": 0.08091995169120984}, {"source": "Accessories", "target": "Phones", "value": 0.04023627980373417}, {"source": "Accessories", "target": "Storage", "value": -0.0031589441206442198}, {"source": "Accessories", "target": "Supplies", "value": -0.035282645410837414}, {"source": "Accessories", "target": "Tables", "value": 0.12835764638537472}, {"source": "Appliances", "target": "Accessories", "value": 0.06717047661774254}, {"source": "Appliances", "target": "Art", "value": 0.08049844212652647}, {"source": "Appliances", "target": "Binders", "value": -0.03648395404338882}, {"source": "Appliances", "target": "Bookcases", "value": 0.012217470302365606}, {"source": "Appliances", "target": "Chairs", "value": 0.06459612592769064}, {"source": "Appliances", "target": "Copiers", "value": -0.02601624786954852}, {"source": "Appliances", "target": "Envelopes", "value": 0.004641906598049593}, {"source": "Appliances", "target": "Fasteners", "value": -0.005270253218541547}, {"source": "Appliances", "target": "Furnishings", "value": 0.05134667212961029}, {"source": "Appliances", "target": "Labels", "value": -0.022621661268290124}, {"source": "Appliances", "target": "Machines", "value": 0.01230748048890281}, {"source": "Appliances", "target": "Paper", "value": 0.1182457909799471}, {"source": "Appliances", "target": "Phones", "value": 0.05022771212364857}, {"source": "Appliances", "target": "Storage", "value": 0.07724888947685656}, {"source": "Appliances", "target": "Supplies", "value": 0.018378453310653513}, {"source": "Appliances", "target": "Tables", "value": 0.02591868305339718}, {"source": "Art", "target": "Accessories", "value": -0.03395978204078759}, {"source": "Art", "target": "Appliances", "value": 0.08049844212652647}, {"source": "Art", "target": "Binders", "value": -0.003825849693796396}, {"source": "Art", "target": "Bookcases", "value": 0.009211837354836959}, {"source": "Art", "target": "Chairs", "value": 0.05669777864716646}, {"source": "Art", "target": "Copiers", "value": 0.06287105362048238}, {"source": "Art", "target": "Envelopes", "value": 0.05708304459926782}, {"source": "Art", "target": "Fasteners", "value": 0.01872186840919377}, {"source": "Art", "target": "Furnishings", "value": 0.00656529443098287}, {"source": "Art", "target": "Labels", "value": 0.0034140763330352034}, {"source": "Art", "target": "Machines", "value": 0.008733338364146116}, {"source": "Art", "target": "Paper", "value": 0.028825940175532232}, {"source": "Art", "target": "Phones", "value": 0.01766801096089819}, {"source": "Art", "target": "Storage", "value": 0.017097169684059076}, {"source": "Art", "target": "Supplies", "value": 0.0437817719019217}, {"source": "Art", "target": "Tables", "value": -0.0150682552161071}, {"source": "Binders", "target": "Accessories", "value": -0.029153320918497466}, {"source": "Binders", "target": "Appliances", "value": -0.03648395404338882}, {"source": "Binders", "target": "Art", "value": -0.003825849693796396}, {"source": "Binders", "target": "Bookcases", "value": -0.012217726998234268}, {"source": "Binders", "target": "Chairs", "value": 0.035040851004811725}, {"source": "Binders", "target": "Copiers", "value": -0.0013434003120023127}, {"source": "Binders", "target": "Envelopes", "value": 0.005020752221433211}, {"source": "Binders", "target": "Fasteners", "value": 0.05441402933540958}, {"source": "Binders", "target": "Furnishings", "value": 0.09925615059258437}, {"source": "Binders", "target": "Labels", "value": -0.024738336616131555}, {"source": "Binders", "target": "Machines", "value": 0.0011862635609686397}, {"source": "Binders", "target": "Paper", "value": 0.05547242519578933}, {"source": "Binders", "target": "Phones", "value": 0.010986490130302288}, {"source": "Binders", "target": "Storage", "value": 0.03272440134945958}, {"source": "Binders", "target": "Supplies", "value": 0.03929056596512371}, {"source": "Binders", "target": "Tables", "value": 0.060496522236958734}, {"source": "Bookcases", "target": "Accessories", "value": 0.03716297544498744}, {"source": "Bookcases", "target": "Appliances", "value": 0.012217470302365606}, {"source": "Bookcases", "target": "Art", "value": 0.009211837354836959}, {"source": "Bookcases", "target": "Binders", "value": -0.012217726998234268}, {"source": "Bookcases", "target": "Chairs", "value": 0.013320332449110437}, {"source": "Bookcases", "target": "Copiers", "value": -0.015721405258825986}, {"source": "Bookcases", "target": "Envelopes", "value": 0.022207001822855815}, {"source": "Bookcases", "target": "Fasteners", "value": 0.016284986485443045}, {"source": "Bookcases", "target": "Furnishings", "value": 0.03572684660448465}, {"source": "Bookcases", "target": "Labels", "value": 0.042978275101677364}, {"source": "Bookcases", "target": "Machines", "value": 0.0015201277640695524}, {"source": "Bookcases", "target": "Paper", "value": 0.06269075861246101}, {"source": "Bookcases", "target": "Phones", "value": 0.056186361362081653}, {"source": "Bookcases", "target": "Storage", "value": -0.016740517854738537}, {"source": "Bookcases", "target": "Supplies", "value": 0.00011181387036745229}, {"source": "Bookcases", "target": "Tables", "value": -0.02149225000338407}, {"source": "Chairs", "target": "Accessories", "value": 0.05126411161433975}, {"source": "Chairs", "target": "Appliances", "value": 0.06459612592769064}, {"source": "Chairs", "target": "Art", "value": 0.05669777864716646}, {"source": "Chairs", "target": "Binders", "value": 0.035040851004811725}, {"source": "Chairs", "target": "Bookcases", "value": 0.013320332449110437}, {"source": "Chairs", "target": "Copiers", "value": 0.002763107281678771}, {"source": "Chairs", "target": "Envelopes", "value": 0.024406546646864646}, {"source": "Chairs", "target": "Fasteners", "value": 0.07367791138732466}, {"source": "Chairs", "target": "Furnishings", "value": 0.04608583857991384}, {"source": "Chairs", "target": "Labels", "value": 0.0010231900354021408}, {"source": "Chairs", "target": "Machines", "value": 0.026233235478480776}, {"source": "Chairs", "target": "Paper", "value": 0.05733632296469042}, {"source": "Chairs", "target": "Phones", "value": 0.12259102593730058}, {"source": "Chairs", "target": "Storage", "value": 0.05925160003670266}, {"source": "Chairs", "target": "Supplies", "value": -0.027673276178811265}, {"source": "Chairs", "target": "Tables", "value": 0.042743928404467474}, {"source": "Copiers", "target": "Accessories", "value": -0.03265782237104213}, {"source": "Copiers", "target": "Appliances", "value": -0.02601624786954852}, {"source": "Copiers", "target": "Art", "value": 0.06287105362048238}, {"source": "Copiers", "target": "Binders", "value": -0.0013434003120023127}, {"source": "Copiers", "target": "Bookcases", "value": -0.015721405258825986}, {"source": "Copiers", "target": "Chairs", "value": 0.002763107281678771}, {"source": "Copiers", "target": "Envelopes", "value": 0.0420890453265009}, {"source": "Copiers", "target": "Fasteners", "value": -0.04791331053396437}, {"source": "Copiers", "target": "Furnishings", "value": -0.01495572721802506}, {"source": "Copiers", "target": "Labels", "value": -0.006268870173239609}, {"source": "Copiers", "target": "Machines", "value": -0.005979818281006594}, {"source": "Copiers", "target": "Paper", "value": -0.026558103714467842}, {"source": "Copiers", "target": "Phones", "value": 0.03138594457844788}, {"source": "Copiers", "target": "Storage", "value": 0.014515022976320482}, {"source": "Copiers", "target": "Supplies", "value": -0.005006421641717754}, {"source": "Copiers", "target": "Tables", "value": -0.02780788607275156}, {"source": "Envelopes", "target": "Accessories", "value": 0.005072469330625707}, {"source": "Envelopes", "target": "Appliances", "value": 0.004641906598049593}, {"source": "Envelopes", "target": "Art", "value": 0.05708304459926782}, {"source": "Envelopes", "target": "Binders", "value": 0.005020752221433211}, {"source": "Envelopes", "target": "Bookcases", "value": 0.022207001822855815}, {"source": "Envelopes", "target": "Chairs", "value": 0.024406546646864646}, {"source": "Envelopes", "target": "Copiers", "value": 0.0420890453265009}, {"source": "Envelopes", "target": "Fasteners", "value": -0.0008284379967939385}, {"source": "Envelopes", "target": "Furnishings", "value": -0.009827449255811879}, {"source": "Envelopes", "target": "Labels", "value": 0.09957797273027565}, {"source": "Envelopes", "target": "Machines", "value": -0.012077210137944256}, {"source": "Envelopes", "target": "Paper", "value": 0.059904981788340736}, {"source": "Envelopes", "target": "Phones", "value": -0.019199622264015077}, {"source": "Envelopes", "target": "Storage", "value": 0.07022101254865307}, {"source": "Envelopes", "target": "Supplies", "value": 0.06830904619894704}, {"source": "Envelopes", "target": "Tables", "value": -0.00403000855594258}, {"source": "Fasteners", "target": "Accessories", "value": -0.01627709377113126}, {"source": "Fasteners", "target": "Appliances", "value": -0.005270253218541547}, {"source": "Fasteners", "target": "Art", "value": 0.01872186840919377}, {"source": "Fasteners", "target": "Binders", "value": 0.05441402933540958}, {"source": "Fasteners", "target": "Bookcases", "value": 0.016284986485443045}, {"source": "Fasteners", "target": "Chairs", "value": 0.07367791138732466}, {"source": "Fasteners", "target": "Copiers", "value": -0.04791331053396437}, {"source": "Fasteners", "target": "Envelopes", "value": -0.0008284379967939385}, {"source": "Fasteners", "target": "Furnishings", "value": 0.019081524959241015}, {"source": "Fasteners", "target": "Labels", "value": -0.01490771398098695}, {"source": "Fasteners", "target": "Machines", "value": 0.02960490131801267}, {"source": "Fasteners", "target": "Paper", "value": 0.03925982010839479}, {"source": "Fasteners", "target": "Phones", "value": 0.04372627327687354}, {"source": "Fasteners", "target": "Storage", "value": 0.007706446688267303}, {"source": "Fasteners", "target": "Supplies", "value": -0.002799398348538348}, {"source": "Fasteners", "target": "Tables", "value": 0.0738655452691193}, {"source": "Furnishings", "target": "Accessories", "value": 0.06565245008006229}, {"source": "Furnishings", "target": "Appliances", "value": 0.05134667212961029}, {"source": "Furnishings", "target": "Art", "value": 0.00656529443098287}, {"source": "Furnishings", "target": "Binders", "value": 0.09925615059258437}, {"source": "Furnishings", "target": "Bookcases", "value": 0.03572684660448465}, {"source": "Furnishings", "target": "Chairs", "value": 0.04608583857991384}, {"source": "Furnishings", "target": "Copiers", "value": -0.01495572721802506}, {"source": "Furnishings", "target": "Envelopes", "value": -0.009827449255811879}, {"source": "Furnishings", "target": "Fasteners", "value": 0.019081524959241015}, {"source": "Furnishings", "target": "Labels", "value": 0.04506678495622714}, {"source": "Furnishings", "target": "Machines", "value": 0.07536270261964048}, {"source": "Furnishings", "target": "Paper", "value": 0.02777325446878438}, {"source": "Furnishings", "target": "Phones", "value": 0.0648514085452037}, {"source": "Furnishings", "target": "Storage", "value": 0.05793672255929407}, {"source": "Furnishings", "target": "Supplies", "value": 0.0693230725052757}, {"source": "Furnishings", "target": "Tables", "value": 0.004155124789765592}, {"source": "Labels", "target": "Accessories", "value": -0.019181868916336893}, {"source": "Labels", "target": "Appliances", "value": -0.022621661268290124}, {"source": "Labels", "target": "Art", "value": 0.0034140763330352034}, {"source": "Labels", "target": "Binders", "value": -0.024738336616131555}, {"source": "Labels", "target": "Bookcases", "value": 0.042978275101677364}, {"source": "Labels", "target": "Chairs", "value": 0.0010231900354021408}, {"source": "Labels", "target": "Copiers", "value": -0.006268870173239609}, {"source": "Labels", "target": "Envelopes", "value": 0.09957797273027565}, {"source": "Labels", "target": "Fasteners", "value": -0.01490771398098695}, {"source": "Labels", "target": "Furnishings", "value": 0.04506678495622714}, {"source": "Labels", "target": "Machines", "value": -0.022963939897071996}, {"source": "Labels", "target": "Paper", "value": 0.006263448010144081}, {"source": "Labels", "target": "Phones", "value": 0.027766206325274653}, {"source": "Labels", "target": "Storage", "value": 0.023579598680165112}, {"source": "Labels", "target": "Supplies", "value": -0.02129075743827456}, {"source": "Labels", "target": "Tables", "value": -0.009515662113876944}, {"source": "Machines", "target": "Accessories", "value": -0.016040587426079264}, {"source": "Machines", "target": "Appliances", "value": 0.01230748048890281}, {"source": "Machines", "target": "Art", "value": 0.008733338364146116}, {"source": "Machines", "target": "Binders", "value": 0.0011862635609686397}, {"source": "Machines", "target": "Bookcases", "value": 0.0015201277640695524}, {"source": "Machines", "target": "Chairs", "value": 0.026233235478480776}, {"source": "Machines", "target": "Copiers", "value": -0.005979818281006594}, {"source": "Machines", "target": "Envelopes", "value": -0.012077210137944256}, {"source": "Machines", "target": "Fasteners", "value": 0.02960490131801267}, {"source": "Machines", "target": "Furnishings", "value": 0.07536270261964048}, {"source": "Machines", "target": "Labels", "value": -0.022963939897071996}, {"source": "Machines", "target": "Paper", "value": 0.01272027364473091}, {"source": "Machines", "target": "Phones", "value": -0.019591363312799422}, {"source": "Machines", "target": "Storage", "value": 0.033543719707041536}, {"source": "Machines", "target": "Supplies", "value": 0.010499224644426415}, {"source": "Machines", "target": "Tables", "value": -0.004884267655832219}, {"source": "Paper", "target": "Accessories", "value": 0.08091995169120984}, {"source": "Paper", "target": "Appliances", "value": 0.1182457909799471}, {"source": "Paper", "target": "Art", "value": 0.028825940175532232}, {"source": "Paper", "target": "Binders", "value": 0.05547242519578933}, {"source": "Paper", "target": "Bookcases", "value": 0.06269075861246101}, {"source": "Paper", "target": "Chairs", "value": 0.05733632296469042}, {"source": "Paper", "target": "Copiers", "value": -0.026558103714467842}, {"source": "Paper", "target": "Envelopes", "value": 0.059904981788340736}, {"source": "Paper", "target": "Fasteners", "value": 0.03925982010839479}, {"source": "Paper", "target": "Furnishings", "value": 0.02777325446878438}, {"source": "Paper", "target": "Labels", "value": 0.006263448010144081}, {"source": "Paper", "target": "Machines", "value": 0.01272027364473091}, {"source": "Paper", "target": "Phones", "value": 0.19788045270974308}, {"source": "Paper", "target": "Storage", "value": 0.09413469361847596}, {"source": "Paper", "target": "Supplies", "value": 0.02318392416120428}, {"source": "Paper", "target": "Tables", "value": 0.059290883029695415}, {"source": "Phones", "target": "Accessories", "value": 0.04023627980373417}, {"source": "Phones", "target": "Appliances", "value": 0.05022771212364857}, {"source": "Phones", "target": "Art", "value": 0.01766801096089819}, {"source": "Phones", "target": "Binders", "value": 0.010986490130302288}, {"source": "Phones", "target": "Bookcases", "value": 0.056186361362081653}, {"source": "Phones", "target": "Chairs", "value": 0.12259102593730058}, {"source": "Phones", "target": "Copiers", "value": 0.03138594457844788}, {"source": "Phones", "target": "Envelopes", "value": -0.019199622264015077}, {"source": "Phones", "target": "Fasteners", "value": 0.04372627327687354}, {"source": "Phones", "target": "Furnishings", "value": 0.0648514085452037}, {"source": "Phones", "target": "Labels", "value": 0.027766206325274653}, {"source": "Phones", "target": "Machines", "value": -0.019591363312799422}, {"source": "Phones", "target": "Paper", "value": 0.19788045270974308}, {"source": "Phones", "target": "Storage", "value": 0.06099193443115547}, {"source": "Phones", "target": "Supplies", "value": 0.06188576417103802}, {"source": "Phones", "target": "Tables", "value": 0.013782991717438388}, {"source": "Storage", "target": "Accessories", "value": -0.0031589441206442198}, {"source": "Storage", "target": "Appliances", "value": 0.07724888947685656}, {"source": "Storage", "target": "Art", "value": 0.017097169684059076}, {"source": "Storage", "target": "Binders", "value": 0.03272440134945958}, {"source": "Storage", "target": "Bookcases", "value": -0.016740517854738537}, {"source": "Storage", "target": "Chairs", "value": 0.05925160003670266}, {"source": "Storage", "target": "Copiers", "value": 0.014515022976320482}, {"source": "Storage", "target": "Envelopes", "value": 0.07022101254865307}, {"source": "Storage", "target": "Fasteners", "value": 0.007706446688267303}, {"source": "Storage", "target": "Furnishings", "value": 0.05793672255929407}, {"source": "Storage", "target": "Labels", "value": 0.023579598680165112}, {"source": "Storage", "target": "Machines", "value": 0.033543719707041536}, {"source": "Storage", "target": "Paper", "value": 0.09413469361847596}, {"source": "Storage", "target": "Phones", "value": 0.06099193443115547}, {"source": "Storage", "target": "Supplies", "value": 0.01241151338082472}, {"source": "Storage", "target": "Tables", "value": 0.028104193266728077}, {"source": "Supplies", "target": "Accessories", "value": -0.035282645410837414}, {"source": "Supplies", "target": "Appliances", "value": 0.018378453310653513}, {"source": "Supplies", "target": "Art", "value": 0.0437817719019217}, {"source": "Supplies", "target": "Binders", "value": 0.03929056596512371}, {"source": "Supplies", "target": "Bookcases", "value": 0.00011181387036745229}, {"source": "Supplies", "target": "Chairs", "value": -0.027673276178811265}, {"source": "Supplies", "target": "Copiers", "value": -0.005006421641717754}, {"source": "Supplies", "target": "Envelopes", "value": 0.06830904619894704}, {"source": "Supplies", "target": "Fasteners", "value": -0.002799398348538348}, {"source": "Supplies", "target": "Furnishings", "value": 0.0693230725052757}, {"source": "Supplies", "target": "Labels", "value": -0.02129075743827456}, {"source": "Supplies", "target": "Machines", "value": 0.010499224644426415}, {"source": "Supplies", "target": "Paper", "value": 0.02318392416120428}, {"source": "Supplies", "target": "Phones", "value": 0.06188576417103802}, {"source": "Supplies", "target": "Storage", "value": 0.01241151338082472}, {"source": "Supplies", "target": "Tables", "value": 0.01136305164907302}, {"source": "Tables", "target": "Accessories", "value": 0.12835764638537472}, {"source": "Tables", "target": "Appliances", "value": 0.02591868305339718}, {"source": "Tables", "target": "Art", "value": -0.0150682552161071}, {"source": "Tables", "target": "Binders", "value": 0.060496522236958734}, {"source": "Tables", "target": "Bookcases", "value": -0.02149225000338407}, {"source": "Tables", "target": "Chairs", "value": 0.042743928404467474}, {"source": "Tables", "target": "Copiers", "value": -0.02780788607275156}, {"source": "Tables", "target": "Envelopes", "value": -0.00403000855594258}, {"source": "Tables", "target": "Fasteners", "value": 0.0738655452691193}, {"source": "Tables", "target": "Furnishings", "value": 0.004155124789765592}, {"source": "Tables", "target": "Labels", "value": -0.009515662113876944}, {"source": "Tables", "target": "Machines", "value": -0.004884267655832219}, {"source": "Tables", "target": "Paper", "value": 0.059290883029695415}, {"source": "Tables", "target": "Phones", "value": 0.013782991717438388}, {"source": "Tables", "target": "Storage", "value": 0.028104193266728077}, {"source": "Tables", "target": "Supplies", "value": 0.01136305164907302}]
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.link {
stroke: #999;
/*stroke-width: 1.5px;*/
}
label{
font: 14px sans-serif;
fill: #000;
vertical-align: middle;
}
input{
vertical-align: middle;
}
.legend{
font: 14px sans-serif;
}
.node:hover {
opacity: 0.85;
}
.d3-tip {
line-height: 1;
font: 14px sans-serif;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: rgb(185, 185, 185);
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
<body>
<!-- <label for="slider">Correlation Threshold</label>
<input id="slider" type ="range" min ="0.01" max="0.15" step ="0.01" value ="0.07" oninput="update(value)"/> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="d3-legend.js"></script>
<script>
var width = 960,
height = 500;
var force = d3.layout.force()
.charge(-200)
.linkDistance(80)
.size([width, height]);
var radius = d3.scale.sqrt()
.range([5, 12])
var lineThickness = d3.scale.linear()
.range([0.5, 3])
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var color = d3.scale.ordinal()
.range(["#8c510a", "#dfc27d", "#35978f"]);
// Add a legend
svg.append("g")
.attr("class", "legend")
.attr("transform", "translate(20,20)");
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<div><span style='color:white'>" + d.id + "</span></div>";
})
var input = 0.065;
svg.call(tip);
d3.json("data.json", function(error, graph) {
if (error) throw error;
radius.domain([0, d3.max(graph['nodes'], function(d) {return d.Sales})])
lineThickness.domain([0, d3.max(graph['links'], function(d) {return d.value})])
color.domain(d3.keys(d3.nest()
.key(function(d) { return d.Category;} )
.map(graph["nodes"])))
var legend = d3.legend.color()
.scale(color);
svg.select(".legend")
.call(legend);
var subset = graph;
subset["links"] = graph["links"].filter(function(el){
return el.value > input;
});
var nodeById = d3.map();
graph["nodes"].forEach(function(node) {
nodeById.set(node.id, node);
});
subset["links"].forEach(function(link) {
link.source = nodeById.get(link.source);
link.target = nodeById.get(link.target);
});
force
.nodes(graph["nodes"])
.links(subset["links"])
.start();
var link = svg.selectAll(".link")
.data(subset["links"])
.enter().append("line")
.attr("class", "link")
.attr("stroke-width", function(d) { return lineThickness(d.value)});
var node = svg.selectAll(".node")
.data(graph["nodes"])
.enter().append("circle")
.attr("class", "node")
.attr("r", function(d) {return radius(d.Sales)})
.style("fill", function(d) { return color(d.Category); })
.call(force.drag)
.on('mouseover', tip.show)
// .on('dragstart', tip.hide) // This line isn't working yet
.on('mouseout', tip.hide);
force.on("tick", function() {
link.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; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment