Comparar texto

Encuentra la diferencia entre dos archivos de texto

Editor live
Ocultar espacios en blanco
Ocultar sin cambios
Sin ajuste de línea
Vista
Nivel de detalle
Estilos de texto
Resaltado de sintaxis

Sunburst Tutorial 1 vs. 2 --> https://denjn5.github.io/tutorials/

Creado El diff nunca expira
24 eliminaciones
55 líneas
33 adiciones
58 líneas
<!DOCTYPE html>
<!DOCTYPE html>
<head>
<head>
<title>Sunburst Tutorial (d3 v4), Part 1</title>
<title>Sunburst Tutorial (d3 v4), Part 2</title>
<script src='../plugins/d3/d3.v4.min.js'></script>
<script src='../plugins/d3/d3.v4.min.js'></script>
</head>
</head>
<body>
<body>
<svg></svg>
<svg></svg>
</body>
</body>


<script>
<script>
var vWidth = 300;
var vWidth = 300;
var vHeight = 300;
var vHeight = 300;
var vRadius = Math.min(vWidth, vHeight) / 2;
var vRadius = Math.min(vWidth, vHeight) / 2;
var vColor = d3.scaleOrdinal(d3.schemeCategory20b);
var vColor = d3.scaleOrdinal(d3.schemeCategory20b);
var vData = {
'id': 'TOPICS', 'children': [{
'id': 'Topic A',
'children': [{'id': 'Sub A1', 'size': 4}, {'id': 'Sub A2', 'size': 4}]
}, {
'id': 'Topic B',
'children': [{'id': 'Sub B1', 'size': 3}, {'id': 'Sub B2', 'size': 3},
{'id': 'Sub B3', 'size': 3}]
}, {
'id': 'Topic C',
'children': [{'id': 'Sub C1', 'size': 4}, {'id': 'Sub C2', 'size': 4}]
}]};


// Prepare our physical space
// Prepare our physical space
var g = d3.select('svg')
var g = d3.select('svg')
.attr('width', vWidth).attr('height', vHeight)
.attr('width', vWidth).attr('height', vHeight)
.append('g')
.append('g')
.attr('transform', 'translate(' + vWidth / 2 + ',' + vHeight / 2 + ')');
.attr('transform', 'translate(' + vWidth / 2 + ',' + vHeight / 2 + ')');


// d3 layout
// d3 layout
var vLayout = d3.partition().size([2 * Math.PI, vRadius]);
var vLayout = d3.partition().size([2 * Math.PI, vRadius]);
var vArc = d3.arc()
var vArc = d3.arc()
.startAngle(function (d) { return d.x0; })
.startAngle(function (d) { return d.x0; })
.endAngle(function (d) { return d.x1; })
.endAngle(function (d) { return d.x1; })
.innerRadius(function (d) { return d.y0; })
.innerRadius(function (d) { return d.y0; })
.outerRadius(function (d) { return d.y1; });
.outerRadius(function (d) { return d.y1; });


// Layout prep
// Get the data from our JSON file
var vRoot = d3.hierarchy(vData).sum(function (d) { return d.size });
d3.json('data-simple.json', function(error, vData) {
var vNodes = vRoot.descendants();
if (error) throw error;
vLayout(vRoot);
var vSlices = g.selectAll('path').data(vNodes).enter().append('path');


// Draw sunburst
drawSunburst(vData);
vSlices.filter(function(d) { return d.parent; })
});
.attr('d', vArc)

.style('stroke', '#fff')

.style('fill', function (d) {
/**
return vColor((d.children ? d : d.parent).data.id); });
* Draw our sunburst
* @param {object} data - Hierarchical data
*/
function drawSunburst(data) {
// Layout prep
var vRoot = d3.hierarchy(data).sum(function (d) { return d.size});
var vNodes = vRoot.descendants();
vLayout(vRoot);
var vSlices = g.selectAll('path').data(vNodes).enter().append('path');

// Draw sunburst
vSlices.attr('display', function (d) { return d.depth ? null : 'none'; })
.attr('d', vArc)
.style('stroke', '#fff')
.style('fill', function (d) {
return vColor((d.children ? d : d.parent).data.id); });
}
</script>
</script>


Diferencias guardadas