Compare text

Find the difference between two text files

Real-time editor
Hide whitespace changes
Hide unchanged lines
Disable line wrap
Layout
Diff precision
Text styles
Syntax highlighting

Untitled diff

Created Diff never expires
20 removals
162 lines
22 additions
164 lines
var params = {};
var params = {};
params.width = 320;
params.width = 320;
params.height = 320;
params.height = 320;
params.more = 31;
params.more = 31;
params.container = '.network';
params.container = '.network';
params.nodes = [
params.nodes = [
{
{
"name": "Karnataka",
"name": "Karnataka",
"value": 16
"value": 16
},
},
{
{
"name": "Uttar Pradesh(East)",
"name": "Uttar Pradesh(East)",
"value": 22,
"value": 22,
},
},
{
{
"name": "Uttar Pradesh East",
"name": "Uttar Pradesh East",
"value": 31
"value": 31
},
},
{
{
"name": "Delhi",
"name": "Delhi",
"value": 55
"value": 55
},
},
{
{
"name": "Andhra Pradesh",
"name": "Andhra Pradesh",
"value": 108
"value": 108
}
}
];
];


var data = params.nodes;
var data = params.nodes;
var margin = {top: 0, right: 40, bottom: 40, left: 60};
var margin = {top: 0, right: 40, bottom: 40, left: 60};
var width = params.width - margin.right - margin.left;
var width = params.width - margin.right - margin.left;
var height = params.height - margin.top - margin.bottom;
var height = params.height - margin.top - margin.bottom;
var left = 5;
var left = 5;
var top = 5;
var top = 5;
var axisLeft = 20;
var axisLeft = 20;


var svg = d3.select(params.container)
var svg = d3.select(params.container)
.select('svg')
.select('svg')
.attr('width', width + margin.right + margin.left)
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('height', height + margin.top + margin.bottom)
.select('g')
.select('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


// Remove any other chart
// Remove any other chart
svg.selectAll('*').remove();
svg.selectAll('*').remove();


// set the ranges
// set the ranges
var yScale = d3.scaleBand()
var yScale = d3.scaleBand()
.range([height, 0])
.range([height, 0])
.padding(0.1);
.padding(0.1);


var xScale = d3.scaleLinear()
var xScale = d3.scaleLinear()
.range([0, width]);
.range([0, width]);
// Scale the range of the data in the domains
// Scale the range of the data in the domains
xScale.domain([0, d3.max(data, function(d) { return d.value; })]);
xScale.domain([0, d3.max(data, function(d) { return d.value; })]);
yScale.domain(data.map(function(d) { return d.name; }));
yScale.domain(data.map(function(d) { return d.name; }));


var yAxis = d3.axisLeft(yScale);
var yAxis = d3.axisLeft(yScale);
var bar = svg.selectAll('g')
var bar = svg
.data(data)
.enter()
.append('g')
.append('g')
.attr('class', 'y axis')
.attr('class', 'y axis')
.attr('transform', 'translate(' + axisLeft + ',0)')
.attr('transform', 'translate(' + axisLeft + ',0)')
.call(yAxis);
.call(yAxis)



svg.selectAll('.tick text')
svg.selectAll('.tick text')
.attr('dy', '.35em')
.attr('dy', '.35em')
.text(function(d) {
.text(function(d) {
if (d.length > 20) {
if (d.length > 20) {
return d.substring(0, 20) + '...';
return d.substring(0, 20) + '...';
}
}
return d;
return d;
})
})
.attr('transform', function(d) {
.attr('transform', function(d) {
var name = d;
var name = d;
if (d.length > 20) {
if (d.length > 20) {
name = d.substring(0, 20) + '...';
name = d.substring(0, 20) + '...';
}
}
var names = name.split(' ');
var names = name.split(' ');
return 'translate(0,' + (-names.length / 2) * 10 + ')';
return 'translate(0,' + (-names.length / 2) * 10 + ')';
})
})
.call(wrap, 50)
.call(wrap, 50)
.on('click', function(d) {
.on('click', function(d) {
//$scope.$broadcast('bar:clicked', d);
//$scope.$broadcast('bar:clicked', d);
});
});


// append the rectangles for the bar chart
// append the rectangles for the bar chart
bar.append('rect')
bar
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('class', 'barChart')
.attr('class', 'barChart')
.attr('x', left)
.attr('x', left)
.attr('width', function(d) { return xScale(d.value); })
.attr('width', function(d) { return xScale(d.value); })
.attr('y', function(d) { return yScale(d.name) + yScale.bandwidth() / 4; })
.attr('y', function(d) { return yScale(d.name) + yScale.bandwidth() / 4; })
.attr('height', yScale.bandwidth() / 2)
.attr('height', yScale.bandwidth() / 2)
.attr('fill', 'black')
.attr('fill', 'black')
//.attr('fill', function(d) { return $scope.getBubbleFill(d); })
//.attr('fill', function(d) { return $scope.getBubbleFill(d); })
.on('click', function(d) {
.on('click', function(d) {
//$scope.$broadcast('bar:clicked', d.name);
//$scope.$broadcast('bar:clicked', d.name);
});
});


bar.append('text')
.attr('class', 'label')
.attr('fill', 'white')
.attr('text-anchor', function(d) {
return xScale(d.value) < 20 ? 'middle' : 'end';
})
.attr('x', function(d) {
return xScale(d.value);
})
.attr('y', function(d) {
return yScale(d.name) + (yScale.bandwidth() / 2 + top);
})
.on('click', function(d) {
//$scope.$broadcast('bar:clicked', d.name);
});
if (params.more) {
if (params.more) {
bar.append('text')
bar.append('text')
.attr('class', 'label')
.attr('class', 'label')
.attr('fill', 'white')
.attr('fill', 'white')
.text(function() { return '+' + params.more + ' more'; })
.text(function() { return '+' + params.more + ' more'; })
.attr('transform', 'translate(' + 0 + ',' + (height + 20) + ')')
.attr('transform', 'translate(' + 0 + ',' + (height + 20) + ')')
.on('click', function(d) {
.on('click', function(d) {
//$scope.gotoExplore(d);
//$scope.gotoExplore(d);
});
});
}
}




function wrap(text, width) {
function wrap(text, width) {
text.each(function() {
text.each(function() {
var text = d3.select(this); // eslint-disable-line no-invalid-this
var text = d3.select(this); // eslint-disable-line no-invalid-this
var words = text.text()
var words = text.text()
.split(/\s+/)
.split(/\s+/)
.reverse();
.reverse();
var word;
var word;
var line = [];
var line = [];
var lineHeight = 1.1;
var lineHeight = 1.1;
var lineNumber = 0;
var lineNumber = 0;
var y = 0;
var y = 0;
var x = 0;
var x = 0;
// var dy = 0;
// var dy = 0;
var tspan = text.text(null)
var tspan = text.text(null)
.append('tspan')
.append('tspan')
.attr('x', x)
.attr('x', x)
.attr('y', y);
.attr('y', y)
.text('1');
var tspanHeight = tspan.node().getBBox().height;;

word = words.pop();
word = words.pop();
while (word) {
while (word) {
line.push(word);
line.push(word);
tspan.text(line.join(' '));
tspan.text(line.join(' '));
if (tspan.node().getComputedTextLength() > width - x) {
if (tspan.node().getComputedTextLength() > width - x) {
line.pop();
line.pop();
tspan.text(line.join(' '));
tspan.text(line.join(' '));
line = [word];
line = [word];
lineNumber += 1;
lineNumber += 1;
tspan = text.append('tspan')
tspan = text.append('tspan')
.attr('x', x)
.attr('x', x)
.attr('dy', lineHeight + 'em')
.attr('dy', lineHeight + 'em')
.text(word);
.text(word);
}
}
word = words.pop();
word = words.pop();
}
}
var textHeight = text.node().getBBox().height;
console.log('tspanHeight', tspanHeight)
console.log('textHeight', textHeight)
var yTransition = textHeight / 2 - tspanHeight / 2;
text.attr('transform', 'translate(-10,-'+ yTransition +')')
});
});
};
};
Saved diffs