Related
Assume data parsed from a tsv like so:
tsvData.then(function(rawData) {
var data = rawData.map(function(d) {
return {year:+d.year, age3:+d.age3*100, age1:+d.age1*100, age2:+d.age2*100, age4:+d.age4*100, age5:+d.age5*100, age6:+d.age6*100, age7:+d.age7*100}
});
And assume that we intend to create a square matrix representing these percentages (1 rect = 1%, each age group = different color):
var maxColumn = 10;
var colorMap = {
0:"#003366",
1:"#366092",
2:"#4f81b9",
3:"#95b3d7",
4:"#b8cce4",
5:"#e7eef8",
6:"#f6d18b"
};
graphGroup.selectAll('rect')
.data(data1)
.enter()
.append('rect')
.attr('x', function(d, i) {
return (i % maxColumn) * 30
})
.attr('y', function(d, i) {
return ~~((i / maxColumn) % maxColumn) * 30
})
.attr('width', 20)
.attr('height', 20)
.style('fill', function(d) {
return colorMap[d];
});
We would need some way to transform data so that it has 100 items, and those 100 items need to match the proportions of data. For simplicity let's just evaluate at data[0]. Here is my solution:
var data1 = d3.range(100).map(function(d,i) {
var age1 = data[0].age1;
var age2 = data[0].age2;
var age3 = data[0].age3;
var age4 = data[0].age4;
var age5 = data[0].age5;
var age6 = data[0].age6;
var age7 = data[0].age7;
if (i<age1) {
return 0;
} else if (i>age1 && i<(age1+age2)) {
return 1;
} else if (i>(age1+age2) && i<(age1+age2+age3)) {
return 2;
} else if (i>(age1+age2+age3) && i<(age1+age2+age3+age4)) {
return 3;
} else if (i>(age1+age2+age3+age4) && i<(age1+age2+age3+age4+age5)) {
return 4;
} else if (i>(age1+age2+age3+age4+age5) && i<(age1+age2+age3+age4+age5+age6)) {
return 5;
} else if (i>(age1+age2+age3+age4+age5+age6) && i<(age1+age2+age3+age4+age5+age6+age7)) {
return 6;
}
});
It kind of works, but it's not scalable at all, but I can't imagine how else one transforms the arrays. Just so we are clear, by transforming arrays I mean we start with:
data = [
{'age1':33.66, 'age2':14.87, 'age3':18, 'age4':14, 'age5':11, 'age6':5, 'age7':3}
];
and end with:
data1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1...];
var margins = {top:100, bottom:300, left:100, right:100};
var height = 600;
var width = 900;
var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");
//var tsvData = d3.tsv('so-demo3.tsv');
var maxColumn = 10;
//tsvData.then(function(rawData) {
/*
var data = rawData.map(function(d) {
return {year:+d.year, age3:+d.age3*100, age1:+d.age1*100, age2:+d.age2*100, age4:+d.age4*100, age5:+d.age5*100, age6:+d.age6*100, age7:+d.age7*100}
});
*/
var data = [
{'age1':33.66, 'age2':14.87, 'age3':18, 'age4':14, 'age5':11, 'age6':5, 'age7':3}
];
var data1 = d3.range(100).map(function(d,i) {
var age1 = data[0].age1;
var age2 = data[0].age2;
var age3 = data[0].age3;
var age4 = data[0].age4;
var age5 = data[0].age5;
var age6 = data[0].age6;
var age7 = data[0].age7;
if (i<age1) {
return 0;
} else if (i>age1 && i<(age1+age2)) {
return 1;
} else if (i>(age1+age2) && i<(age1+age2+age3)) {
return 2;
} else if (i>(age1+age2+age3) && i<(age1+age2+age3+age4)) {
return 3;
} else if (i>(age1+age2+age3+age4) && i<(age1+age2+age3+age4+age5)) {
return 4;
} else if (i>(age1+age2+age3+age4+age5) && i<(age1+age2+age3+age4+age5+age6)) {
return 5;
} else if (i>(age1+age2+age3+age4+age5+age6) && i<(age1+age2+age3+age4+age5+age6+age7)) {
return 6;
}
});
var colorMap = {
0:"#003366",
1:"#366092",
2:"#4f81b9",
3:"#95b3d7",
4:"#b8cce4",
5:"#e7eef8",
6:"#f6d18b"
};
graphGroup.selectAll('rect')
.data(data1)
.enter()
.append('rect')
.attr('x', function(d, i) {
return (i % maxColumn) * 30
})
.attr('y', function(d, i) {
return ~~((i / maxColumn) % maxColumn) * 30
})
.attr('width', 20)
.attr('height', 20)
.style('fill', function(d) {
return colorMap[d];
});
//})
<script src="https://d3js.org/d3.v5.min.js"></script>
Question
Does d3 offer something more sublime than my brute force approach to achieve the desired array?
I suppose you want to create a pictogram. If that's correct, this mix of reduce and map can easily create the individual arrays you want, regardless the number of properties in the datum object:
data.forEach(obj => {
modifiedData.push(Object.keys(obj).reduce((acc, _, i) =>
acc.concat(d3.range(Math.round(obj["age" + (i + 1)])).map(() => i)), []))
});
Pay attention to the fact that, since you cannot guarantee the order of the properties in an object, the reduce uses the bracket notation with "age" + index to correctly set the numbers 0, 1, 2, etc.. to age1, age2, age3, etc...
Here is the demo:
const data = [{
'age1': 33.66,
'age2': 14.87,
'age3': 18,
'age4': 14,
'age5': 11,
'age6': 5,
'age7': 3
}];
const modifiedData = [];
data.forEach(obj => {
modifiedData.push(Object.keys(obj).reduce((acc, _, i) =>
acc.concat(d3.range(Math.round(obj["age" + (i + 1)])).map(() => i)), []))
});
console.log(modifiedData)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
By the way, your current data sample does not sum 100.
There are obviously many solutions to your problem. However, since you explicitly asked for a D3 solution, this is my take on it:
// STEPS 1-5:
const data1 = d3.merge( // 5. Merge all sub-array into one.
d3.range(1,8) // 1. For every age group 1-7...
.map(d => d3.range( // 2. create an array...
Math.round(data[0][`age${d}`]) // 3. given a length as per the age property...
).map(() => d-1) // 4. populated with the value from 2.
)
);
Have a look at the following snippet for a working demo:
var margins = {top:100, bottom:300, left:100, right:100};
var height = 600;
var width = 900;
var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");
//var tsvData = d3.tsv('so-demo3.tsv');
var maxColumn = 10;
//tsvData.then(function(rawData) {
/*
var data = rawData.map(function(d) {
return {year:+d.year, age3:+d.age3*100, age1:+d.age1*100, age2:+d.age2*100, age4:+d.age4*100, age5:+d.age5*100, age6:+d.age6*100, age7:+d.age7*100}
});
*/
var data = [
{'age1':33.66, 'age2':14.87, 'age3':18, 'age4':14, 'age5':11, 'age6':5, 'age7':3}
];
const data1 = d3.merge( // 5. Merge all sub-array into one.
d3.range(1,8) // 1. For every age group 1-7...
.map(d => d3.range( // 2. create an array...
Math.round(data[0][`age${d}`]) // 3. given a length as per the age property...
).map(() => d-1) // 4. populated with the value from 2.
)
);
var colorMap = {
0:"#003366",
1:"#366092",
2:"#4f81b9",
3:"#95b3d7",
4:"#b8cce4",
5:"#e7eef8",
6:"#f6d18b"
};
graphGroup.selectAll('rect')
.data(data1)
.enter()
.append('rect')
.attr('x', function(d, i) {
return (i % maxColumn) * 30
})
.attr('y', function(d, i) {
return ~~((i / maxColumn) % maxColumn) * 30
})
.attr('width', 20)
.attr('height', 20)
.style('fill', function(d) {
return colorMap[d];
});
//})
<script src="https://d3js.org/d3.v5.min.js"></script>
Your goal is to represent the single values in the data array as discrete values in an a*a matrix.
So my suggestion (in pseudo-code) would be:
Scale values so the total sum is a*a (in our case 10*10 = 100):
sumAge = age1 + age2
.... data.forEach(age1/sumAge*100)
Now paint the chart:
counter = 0
data.forEach age
ageCounter = 0;
while agecounter < age
ageCounter ++
set color
while counter < 100
counter ++
draw rectangle at x,y
with x = 100 mod a
y = 100 div a
You scale the values - you loop stepwise through each data item (to set the color), and have an inner loop that is executed as often as you need to draw squares.
I'm trying to migrate this JSFiddle which is in D3 v3 to D3 v4, but it is not working.
I know D3 drag behavior is now simply d3.drag() which I've changed, but when trying to run it, it is giving an error on line 53:
rect = d3.select(self.rectangleElement[0][0]);
with Chrome saying:
Uncaught TypeError: Cannot read property '0' of undefined
How do I go about changing this JSFiddle so it runs in D3 v4?
As of D3 v4 a selection no longer is an array of arrays but an object. The changelog has it:
Selections no longer subclass Array using prototype chain injection; they are now plain objects, improving performance.
When doing self.rectangleElement[0][0] in v3 you were accessing the first node in a selection. To get this node in v4 you need to call selection.node() on self.rectangleElement. With this your code becomes:
rect = d3.select(self.rectangleElement.node());
Have a look at the updated JSFiddle for a working version.
First, why are you re-selecting those things? They are already the selection you want. For example, self.rectangleElement is the selection of the rect. Second, passing an object to .attr is no longer supported in version 4. Third, the drag behavior has changed and the circle are eating your second mouse down. Here's a version where I've fixed up these things:
d3.select('#rectangle').on('click', function(){ new Rectangle(); });
var w = 600, h = 500;
var svg = d3.select('body').append('svg').attr("width", w).attr("height", h);
function Rectangle() {
var self = this, rect, rectData = [], isDown = false, m1, m2, isDrag = false;
svg.on('mousedown', function() {
console.log(isDown);
m1 = d3.mouse(this);
if (!isDown && !isDrag) {
self.rectData = [ { x: m1[0], y: m1[1] }, { x: m1[0], y: m1[1] } ];
self.rectangleElement = d3.select('svg').append('rect').attr('class', 'rectangle').call(dragR);
self.pointElement1 = d3.select('svg').append('circle').attr('class', 'pointC').call(dragC1);
self.pointElement2 = d3.select('svg').append('circle').attr('class', 'pointC').call(dragC2);
self.pointElement3 = svg.append('circle').attr('class', 'pointC').call(dragC3);
self.pointElement4 = svg.append('circle').attr('class', 'pointC').call(dragC4);
updateRect();
isDrag = false;
} else {
isDrag = true;
}
isDown = !isDown;
})
.on('mousemove', function() {
m2 = d3.mouse(this);
if(isDown && !isDrag) {
self.rectData[1] = { x: m2[0] - 5, y: m2[1] - 5};
updateRect();
}
});
function updateRect() {
self.rectangleElement
.attr("x", self.rectData[1].x - self.rectData[0].x > 0 ? self.rectData[0].x : self.rectData[1].x)
.attr("y", self.rectData[1].y - self.rectData[0].y > 0 ? self.rectData[0].y : self.rectData[1].y)
.attr("width", Math.abs(self.rectData[1].x - self.rectData[0].x))
.attr("height", Math.abs(self.rectData[1].y - self.rectData[0].y));
var point1 = self.pointElement1.data(self.rectData);
point1.attr('r', 5)
.attr('cx', self.rectData[0].x)
.attr('cy', self.rectData[0].y);
var point2 = self.pointElement2.data(self.rectData);
point2.attr('r', 5)
.attr('cx', self.rectData[1].x)
.attr('cy', self.rectData[1].y);
var point3 = self.pointElement3.data(self.rectData);
point3.attr('r', 5)
.attr('cx', self.rectData[1].x)
.attr('cy', self.rectData[0].y);
var point3 = self.pointElement4.data(self.rectData);
point3.attr('r', 5)
.attr('cx', self.rectData[0].x)
.attr('cy', self.rectData[1].y);
}
var dragR = d3.drag().on('drag', dragRect);
function dragRect() {
var e = d3.event;
for(var i = 0; i < self.rectData.length; i++){
self.rectangleElement
.attr('x', self.rectData[i].x += e.dx )
.attr('y', self.rectData[i].y += e.dy );
}
self.rectangleElement.style('cursor', 'move');
updateRect();
}
var dragC1 = d3.drag().on('drag', dragPoint1);
var dragC2 = d3.drag().on('drag', dragPoint2);
var dragC3 = d3.drag().on('drag', dragPoint3);
var dragC4 = d3.drag().on('drag', dragPoint4);
function dragPoint1() {
var e = d3.event;
self.pointElement1
.attr('cx', function(d) { return d.x += e.dx })
.attr('cy', function(d) { return d.y += e.dy });
updateRect();
}
function dragPoint2() {
var e = d3.event;
self.pointElement2
.attr('cx', self.rectData[1].x += e.dx )
.attr('cy', self.rectData[1].y += e.dy );
updateRect();
}
function dragPoint3() {
var e = d3.event;
self.pointElement3
.attr('cx', self.rectData[1].x += e.dx )
.attr('cy', self.rectData[0].y += e.dy );
updateRect();
}
function dragPoint4() {
var e = d3.event;
self.pointElement4
.attr('cx', self.rectData[0].x += e.dx )
.attr('cy', self.rectData[1].y += e.dy );
updateRect();
}
}//end Rectangle
svg {
border: solid 1px red;
}
rect {
fill: lightblue;
stroke: blue;
stroke-width: 2px;
}
<button id='rectangle'>Rectangle</button>
<script src="https://d3js.org/d3.v4.js" charset="utf-8"></script>
I am trying to insert a x3d object via ajax callback but the object doesn't appear. I copied the source code of the page then placed it on a new page then the x3d object showed. Am I missing something here? Is there a work around for this? thanks.
html:
<div id="divPlot" style="border: 1px solid black"></div>
<button onclick="add_x3d()">Click</button>
<script>
d3.select('html').style('height','100%').style('width','100%');
d3.select('body').style('height','100%').style('width','100%');
d3.select('#divPlot').style('width', "450px").style('height', "450px");
function add_x3d() {
scatterPlot3d(d3.select('#divPlot'));
}
</script>
javascript:
function scatterPlot3d(parent){
var rows = [
{"SITE":"1","SIGNAME":"A","X":10,"Y":10,"Z":111},
{"SITE":"1","SIGNAME":"B","X":200,"Y":10,"Z":222},
{"SITE":"2","SIGNAME":"A","X":10,"Y":40,"Z":333},
{"SITE":"2","SIGNAME":"B","X":200,"Y":40,"Z":444},
{"SITE":"3","SIGNAME":"A","X":10,"Y":70,"Z":555},
{"SITE":"3","SIGNAME":"B","X":200,"Y":70,"Z":666},
{"SITE":"4","SIGNAME":"A","X":10,"Y":100,"Z":777},
{"SITE":"4","SIGNAME":"B","X":200,"Y":100,"Z":888}
];
var x3d = parent
.append("x3d")
.style("width", parseInt(parent.style("width")) + "px")
.style("height", parseInt(parent.style("height")) + "px")
.style("border", "none");
var scene = x3d.append("scene");
scene.append("orthoviewpoint")
.attr("centerOfRotation", [5, 5, 5])
.attr("fieldOfView", [-5, -5, 15, 15])
.attr("orientation", [-0.5, 1, 0.2, 1.12 * Math.PI / 4])
.attr("position", [8, 4, 15]);
// Used to make 2d elements visible
function makeSolid(selection, color) {
selection.append("appearance")
.append("material")
.attr("diffuseColor", color || "black");
return selection;
}
function constVecWithAxisValue(otherValue, axisValue, axisIndex) {
var result = [otherValue, otherValue, otherValue];
result[axisIndex] = axisValue;
return result;
}
var XAxisMin = d3.min(rows, function(d){return d.X;});
var XAxisMax = d3.max(rows, function(d){return d.X;});
var XAxisDel = XAxisMax-XAxisMin;
var YAxisMin = d3.min(rows, function(d){return d.Y;});
var YAxisMax = d3.max(rows, function(d){return d.Y;});
var YAxisDel = YAxisMax-YAxisMin;
var ZAxisMin = d3.min(rows, function(d){return d.Z;});
var ZAxisMax = d3.max(rows, function(d){return d.Z;});
var ZAxisDel = ZAxisMax-ZAxisMin;
function AxisMin(axisIndex) {
return [XAxisMin, ZAxisMin, YAxisMin][axisIndex];
}
function AxisMax(axisIndex) {
return [XAxisMax, ZAxisMax, YAxisMax][axisIndex];
}
function AxisDel(axisIndex) {
return [XAxisDel, ZAxisDel, YAxisDel][axisIndex];
}
function axisName(name, axisIndex) {
return AxisKeys[axisIndex] + name;
}
function get2DVal(){
if (XAxisDel >= YAxisDel){
return XAxisDel;
} else {
return YAxisDel;
}
}
function ConvAxisRange(inputVal, axisIndex) {
var val;
if (axisIndex === 0 || axisIndex === 2) {
val = d3.scale.linear()
.domain([0, delta2D])
.range(AxisRange);
} else {
val = d3.scale.linear()
.domain([0, ZAxisDel])
.range(AxisRange);
}
return val(inputVal);
}
function ConvAxisRange2D(inputVal) {
var val = d3.scale.linear()
.domain([0, delta2D])
.range(AxisRange);
return val(inputVal);
}
var AxisKeys = ["X", "HEIGHT", "Y"];
var AxisRange = [0, 10];
var scales = [];
var AxisLen;
var duration = 300;
var delta2D = get2DVal();
var ArrayOfColors = ["#0000FF", "#00FFFF", "#00FF00", "#FFFF00", "#FF0000"];
var colorScale = d3.scale.linear()
.domain([0, ZAxisDel*0.25, ZAxisDel*0.50, ZAxisDel*0.75, ZAxisDel])
.range(ArrayOfColors);
function initializeAxis(axisIndex) {
var key = AxisKeys[axisIndex];
drawAxis(axisIndex, key, duration);
var scaleDel = AxisDel(axisIndex);
var rotation = [[0, 0, 0, 0], [0, 0, 1, Math.PI / 2], [0, 1, 0, -Math.PI / 2]];
var newAxisLine = scene.append("transform")
.attr("class", axisName("Axis", axisIndex))
.attr("rotation", (rotation[axisIndex]))
.append("shape");
newAxisLine
.append("appearance")
.append("material")
.attr("emissiveColor", "lightgray");
newAxisLine
.append("polyline2d")
// Line drawn along y axis does not render in Firefox, so draw one
// along the x axis instead and rotate it (above).
.attr("lineSegments", "[" + ConvAxisRange(scaleDel, axisIndex) + " 0, 0 0]");
// axis labels
var newAxisLabel = scene.append("transform")
.attr("class", axisName("AxisLabel", axisIndex))
.attr("translation", constVecWithAxisValue(0, ConvAxisRange(scaleDel*1.15, axisIndex), axisIndex));
var newAxisLabelShape = newAxisLabel
.append("billboard")
.attr("axisOfRotation", "0 0 0") // face viewer
.append("shape")
.call(makeSolid);
var labelFontSize = 0.6;
newAxisLabelShape
.append("text")
.attr("class", axisName("AxisLabelText", axisIndex))
.attr("solid", "true")
.attr("string", key)
.append("fontstyle")
.attr("size", labelFontSize)
.attr("family", "SANS")
.attr("justify", "END MIDDLE");
}
// Assign key to axis, creating or updating its ticks, grid lines, and labels.
function drawAxis(axisIndex, key, duration) {
var scale;
if (axisIndex === 0 || axisIndex === 2) {
scale = d3.scale.linear()
.domain([AxisMin(axisIndex), AxisMax(axisIndex)]) // demo data range
.range([0, ConvAxisRange2D(AxisDel(axisIndex))]);
} else {
scale = d3.scale.linear()
.domain([AxisMin(axisIndex), AxisMax(axisIndex)]) // demo data range
.range(AxisRange);
}
scales[axisIndex] = scale;
var numTicks = 5;
var tickSize = 0.1;
var tickFontSize = 0.5;
// ticks along each axis
var ticks = scene.selectAll("." + axisName("Tick", axisIndex))
.data(scale.ticks(numTicks));
var newTicks = ticks.enter()
.append("transform")
.attr("class", axisName("Tick", axisIndex));
newTicks.append("shape").call(makeSolid)
.append("box")
.attr("size", tickSize + " " + tickSize + " " + tickSize);
// enter + update
ticks.transition().duration(duration)
.attr("translation", function(tick) {
return constVecWithAxisValue(0, scale(tick), axisIndex);
});
ticks.exit().remove();
// tick labels
var tickLabels = ticks.selectAll("billboard shape text")
.data(function(d) {
return [d];
});
var newTickLabels = tickLabels.enter()
.append("billboard")
.attr("axisOfRotation", "0 0 0")
.append("shape")
.call(makeSolid);
newTickLabels.append("text")
.attr("string", scale.tickFormat(10))
.attr("solid", "true")
.append("fontstyle")
.attr("size", tickFontSize)
.attr("family", "SANS")
.attr("justify", "END MIDDLE");
tickLabels // enter + update
.attr("string", scale.tickFormat(10));
tickLabels.exit().remove();
}
function plotData() {
if (!rows) {
console.log("no rows to plot.");
return;
}
var x = scales[0], z = scales[1], y = scales[2];
var sphereRadius = 0.2;
// Draw a sphere at each x,y,z coordinate.
var datapoints = scene.selectAll(".datapoint").data(rows);
datapoints.exit().remove();
var newDatapoints = datapoints.enter()
.append("transform")
.attr("class", "datapoint")
.attr("scale", [sphereRadius, sphereRadius, sphereRadius])
.append("shape");
newDatapoints
.append("appearance")
.append("material");
newDatapoints
.append("sphere");
// Does not work on Chrome; use transform instead
//.attr("radius", sphereRadius)
datapoints.selectAll("shape appearance material")
.attr("diffuseColor", function(row){
return colorScale(row.Z-ZAxisMin);
});
datapoints.attr("translation", function(row) {
return x(row.X) + " " + z(row.Z) + " " + y(row.Y);
});
}
function initializePlot() {
initializeAxis(0);
initializeAxis(1);
initializeAxis(2);
}
initializePlot();
}
You cannot add the whole x3d element and a scene dynamically per se since x3dom is initialized with an window.onload event. This should be part of your HTML document beforehand. Then you can add the elements (views, shapes etc) to the scene.
But I heard sometime ago something about a reload function (https://github.com/x3dom/x3dom/blob/1.7.1/src/Main.js#L327) in the mailing list, sadly this is not well documented:
/** Initializes an <x3d> root element that was added after document load. */
x3dom.reload = function() {
onload();
};
This should be doing what you want.
Right now I recalculate all the points which I select on the heatmap. I am relatively new at D3 and don't particularly understand how the zoom behavior works. Can someone help? This is the chunk of code that allows me to zoom into the heatmap with self selected Area:
function selectArea(area,svg,dataset,num,oldxStart,oldyStart) {
svg
.attr("width",width)
.attr("height",height)
var cols = dataset.dim[1]; //x
var rows = dataset.dim[0]; //y
var zoomDat = [];
var newxLab=[];
var newyLab = [];
//Makes the selection rectangles
area
.on("mousedown", function() {
var e = this,
origin = d3.mouse(e),
rect = svg
.append("rect")
.attr("class", "zoom");
origin[0] = Math.max(0, Math.min(width, origin[0]));
origin[1] = Math.max(0, Math.min(height, origin[1]));
d3.select('body')
.on("mousemove.zoomRect", function() {
var m = d3.mouse(e);
m[0] = Math.max(0, Math.min(width, m[0]));
m[1] = Math.max(0, Math.min(height, m[1]));
rect.attr("x", Math.min(origin[0], m[0]))
.attr("y", Math.min(origin[1], m[1]))
.attr("width", Math.abs(m[0] - origin[0]))
.attr("height", Math.abs(m[1] - origin[1]));
})
.on("mouseup.zoomRect", function() {
var m = d3.mouse(e);
m[0] = Math.max(0, Math.min(width, m[0]));
m[1] = Math.max(0, Math.min(height, m[1]));
//x,y Start/Finish for the selection of data => Can draw box the other way, and still work.
var xStart = Math.min(Math.floor(origin[0]/xScale(1)), Math.floor(m[0]/xScale(1)))
var xFinish = Math.max(Math.floor(m[0]/xScale(1)), Math.floor(origin[0]/xScale(1)))+1
var yStart = Math.min(Math.floor(origin[1]/yScale(1)), Math.floor(m[1]/yScale(1)))
var yFinish =Math.max(Math.floor(m[1]/yScale(1)), Math.floor(origin[1]/yScale(1)))+1
var newcolMeta = [];
var newrowMeta = [];
var newyDend = [];
var newxDend = [];
//If the Y dendrogram is selected, make the X dendrogram undefined
//because I dont want the x dendrogram to change
if (num==1) {
xStart = 0;
xFinish = cols
//If the X dendrogram is selected, make the y dendrogram undefined
//because I dont want the y dendrogram to change
} else if (num==2) {
yStart = 0;
yFinish = rows
}
//Get the data selected and send it back to heatmapgrid
for (i = xStart; i<xFinish; i++) {
newxLab.push(dataset.cols[i]);
if (data.cols!=null) { //If there is no column clustering
newxDend.push(d3.select(".ends_X"+i).attr("id"))
}
}
for (i=yStart;i<yFinish; i++) {
newyLab.push(dataset.rows[i]);
if (data.rows !=null) { //If there is no row clustering
newyDend.push(d3.select(".ends_Y"+i).attr("id"))
}
for (j=xStart; j<xFinish; j++) {
zoomDat.push(dataset.data[i*cols+j]);
}
}
//Get the Metadata -> If there is more than one line of annotations, the data is in different places, just like the grid
if (colMeta !=null) {
for (i = 0; i<colHead.length; i++) {
for (j = xStart; j<xFinish; j++) {
newcolMeta.push(colMeta[i*cols+j])
}
}
colMeta = newcolMeta
}
if (rowMeta != null) {
for (i =0; i<rowHead.length; i++) {
for (j =yStart; j<yFinish; j++) {
newrowMeta.push(rowMeta[i*rows+j])
}
}
rowMeta = newrowMeta
}
//Set new parameters based on selected data
dataset.dim[1] = newxLab.length;
dataset.dim[0] = newyLab.length;
dataset.rows = newyLab;
dataset.cols = newxLab;
dataset.data = zoomDat;
colAnnote.data = colMeta;
rowAnnote.data = rowMeta;
//Changes the margin, if the dimensions are small enough
if (dataset.dim[0] <=100) {
marginleft=100;
}
if (dataset.dim[1] <=300) {
margintop = 130;
}
xGlobal.range([0,width-marginleft])
yGlobal.range([0,height-margintop])
var x = xGlobal(1);
var y = yGlobal(1);
//This slows down the program (Remove())
d3.selectAll('.rootDend').remove();
oldxStart += xStart
oldyStart += yStart
//olsxStart + xStart because the dendrogram is translated
heatmapGrid(el.select('svg.colormap'),dataset,oldxStart,oldyStart);
//New Vertical dendrogram
dendrogram(el.select('svg.rowDend'), data.rows, false, 250, height-margintop,newyDend,oldyStart,y);
//New Horizontal dendrogram
dendrogram(el.select('svg.colDend'), data.cols, true, width-marginleft, 250,newxDend,oldxStart,x);
//New annotation bar, if no annotations, don't do this
drawAnnotate(el.select('svg.colAnnote'), colAnnote,false, width-marginleft,10);
drawAnnotate(el.select('svg.rowAnnote'),rowAnnote,true,10,height-margintop);
//zoomDat = [];
//remove blue select rectangle
rect.remove();
});
});
I am working on a Chrome Extension that crawls websites and finds certain types of links and then once the list of links has been populated after a predetermined number of hops, the search results are displayed using a D3 visualization (I am using the Forced Layout).
Problem: In about a couple of hops, I have too many links/nodes (more than 500 on most occasions) and so the graph looks intimidating and impossible to read, since all the nodes get cluttered in the limited space.
How can I increase the inter-node distance and make the graph more readable.
How do I give different colors to my nodes depending on their category/class?
Here are a fewof snapshots of the search results:
As is evident from the snapshots, things get pretty ugly. The code for my visualization script is given below, to give an idea of how I am implementing the graph. (I am very, very new to D3)
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#tab_5_contents').addEventListener('click', drawVisual);
//drawVisual();
});
function drawVisual(){
var w = 960, h = 500;
//var w = 1024, h = 768;
var labelDistance = 0;
var vis = d3.select("#tab_5_contents").append("svg:svg").attr("width", w).attr("height", h);
var nodes = [];
var labelAnchors = [];
var labelAnchorLinks = [];
var links = [];
for(var i = 0; i < QueuedORG.length; i++)
{
var nodeExists = 0;
//check to see if a node for the current url has already been created. If yes, do not create a new node
for(var j = 0; j < nodes.length; j++)
{
if(QueuedORG[i].url == nodes[j].label)
nodeExists = 1;
}
if (nodeExists == 0)
{
var node = {
label : QueuedORG[i].url
};
nodes.push(node);
labelAnchors.push({
node : node
});
labelAnchors.push({
node : node
});
}
};
for(var i=0;i<nodes.length; i++)
{
console.log("node i:"+i+nodes[i]+"\n");
console.log("labelAnchor i:"+i+labelAnchors[i]+"\n");
}
//To create links for connecting nodes
for(var i = 0; i < QueuedORG.length; i++)
{
var srcIndx = 0, tgtIndx = 0;
for(var j = 0; j < nodes.length; j++)
{
if( QueuedORG[i].url == nodes[j].label ) //to find the node number for the current url
{
srcIndx = j;
}
if( QueuedORG[i].parentURL == nodes[j].label ) //to find the node number for the parent url
{
tgtIndx = j;
}
}
//console.log("src:"+srcIndx+" tgt:"+tgtIndx);
//connecting the current url's node to the parent url's node
links.push({
source : srcIndx,
target : tgtIndx,
weight : 1,
});
labelAnchorLinks.push({
source : i * 2,
target : i * 2 + 1,
weight : 1
});
};
var force = d3.layout.force().size([w, h]).nodes(nodes).links(links).gravity(1).linkDistance(50).charge(-3000).linkStrength(function(x) {
return x.weight * 10
});
force.start();
var force2 = d3.layout.force().nodes(labelAnchors).links(labelAnchorLinks).gravity(0).linkDistance(0).linkStrength(8).charge(-100).size([w, h]);
force2.start();
var link = vis.selectAll("line.link").data(links).enter().append("svg:line").attr("class", "link").style("stroke", "#CCC");
var node = vis.selectAll("g.node").data(force.nodes()).enter().append("svg:g").attr("class", "node");
node.append("svg:circle").attr("r", 5).style("fill", "#555").style("stroke", "#FFF").style("stroke-width", 3);
node.call(force.drag);
var anchorLink = vis.selectAll("line.anchorLink").data(labelAnchorLinks)//.enter().append("svg:line").attr("class", "anchorLink").style("stroke", "#999");
var anchorNode = vis.selectAll("g.anchorNode").data(force2.nodes()).enter().append("svg:g").attr("class", "anchorNode");
anchorNode.append("svg:circle").attr("r", 0).style("fill", "#FFF");
anchorNode.append("svg:text").text(function(d, i) {
return i % 2 == 0 ? "" : d.node.label
}).style("fill", "#555").style("font-family", "Arial").style("font-size", 12);
var updateLink = function() {
this.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;
});
}
var updateNode = function() {
this.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
force.on("tick", function() {
force2.start();
node.call(updateNode);
anchorNode.each(function(d, i) {
if(i % 2 == 0) {
d.x = d.node.x;
d.y = d.node.y;
} else {
var b = this.childNodes[1].getBBox();
var diffX = d.x - d.node.x;
var diffY = d.y - d.node.y;
var dist = Math.sqrt(diffX * diffX + diffY * diffY);
var shiftX = b.width * (diffX - dist) / (dist * 2);
shiftX = Math.max(-b.width, Math.min(0, shiftX));
var shiftY = 5;
this.childNodes[1].setAttribute("transform", "translate(" + shiftX + "," + shiftY + ")");
}
});
anchorNode.call(updateNode);
link.call(updateLink);
anchorLink.call(updateLink);
});
}
The array QueuedORG in the above code acts as my dataset for all links that are being shown in the graph. Each entry in the array looks like this:
QueuedORG.push({url: currentURL, level: 1, parentURL: sourceURL, visited: 0});
Can someone please guide me to be able to increase the node repulsion and color code them? Thanks :)
You can set the distance between nodes by using the linkDistance() function of the force layout. This can be a function to allow you to set different distances for different links. Note that these distances are only suggestions to the force layout, so you won't get exactly what you ask for.
You could set this in a similar way to how you're setting the linkStrength at the moment:
force.linkDistance(function(d) {
return d.weight * 10;
});
It looks like you're already coloring the circles (node.append("svg:circle").style("fill", "#555")), which should work. Alternatively, you can assign CSS classes to them and then use that for the color.
circle.class1 {
fill: red;
stroke: black;
}
node.append("circle")
.attr("class", function(d) {
if(d.something == 1) { return "class1"; }
// etc
});