Built with blockbuilder.org
Last active
September 4, 2017 13:49
-
-
Save f94f/0a29e058b7596fbef79ca307cd49b5af to your computer and use it in GitHub Desktop.
cuatro en uno
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://unpkg.com/d3-force-attract@latest"></script> | |
<script src="https://unpkg.com/d3-force-cluster@latest"></script> | |
<script src="https://rawgit.com/exupero/saveSvgAsPng/gh-pages/saveSvgAsPng.js"></script> | |
<style> | |
/*body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }*/ | |
.bar-pe { | |
fill: #0075ea; | |
} | |
.bar-to { | |
fill: #008e2d; | |
} | |
.bar-pa { | |
fill: #ffa500; | |
} | |
.bar-re { | |
fill: #FF0000; | |
} | |
.bar-pe:hover { | |
fill: #56aafe; | |
} | |
.bar-to:hover { | |
fill: #00BC3C; | |
} | |
.bar-pa:hover { | |
fill: #ffbb3d; | |
} | |
.bar-re:hover { | |
fill: #ff1e1e; | |
} | |
/*tooltip*/ | |
.show { | |
display: block; | |
} | |
.hidden { | |
display: none; | |
} | |
.tooltip { | |
background-color: #333; | |
padding: 4px 8px; | |
position: absolute; | |
color: #fff; | |
opacity: 0.8; | |
z-index: 100; | |
} | |
.title { | |
font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif; | |
} | |
.axis { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
stroke-dasharray: 2px 2px; | |
} | |
.x.axis path { | |
display: none; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="barras1"></div> | |
<div></div> | |
<div></div> | |
<div id="motivos-rechazo"></div> | |
<button class="btn btn-primary" onclick="svgToPng()">svg to png</button> | |
<script> | |
//Inicio Barras1 | |
var puntos = [ | |
{name: "Pendientes", value: 0.40}, | |
{name: "Totales", value: 0.0667}, | |
{name: "Parciales", value: 0.0667}, | |
{name: "Rechazados", value: 0.0} | |
]; | |
var margin = {top: 80, right: 180, bottom: 80, left: 180}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.scaleBand().rangeRound([0, width], 0.1, 0.3); | |
var y = d3.scaleLinear() | |
.range([height, 0]); | |
var xAxis = d3.axisBottom() | |
.scale(x); | |
var yAxis = d3.axisLeft() | |
.scale(y) | |
.ticks(8, "%"); | |
var tooltip = d3.select("#barras1").append("div") | |
.attr("class", "tooltip"); | |
var svg = d3.select("#barras1").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 + ")"); | |
//EL GRÁFICO | |
x.domain(puntos.map(function(d) { return d.name; })); | |
y.domain([0, d3.max(puntos, function(d) { return d.value; })]); | |
svg.append("text") | |
.attr("class", "title") | |
.attr("x", (150)) | |
.attr("y", -30) | |
.text("Porcentaje de las entregas según su estado"); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis) | |
.selectAll(".tick text") | |
.call(wrap, x.bandwidth()); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis); | |
svg.selectAll(".bar") | |
.data(puntos) | |
.enter().append("rect") | |
.attr("class", function(d) { | |
if(d.name == "Pendientes") { return "bar-pe";} | |
else if(d.name == "Totales") { return "bar-to";} | |
else if(d.name == "Parciales") { return "bar-pa";} | |
else if(d.name == "Rechazados") { return "bar-re";} | |
}) | |
.attr("x", function(d) { return x(d.name); }) | |
.attr("width", x.bandwidth()) | |
.attr("y", function(d) { return y(d.value); }) | |
.attr("height", function(d) { return height - y(d.value); }) | |
.on('mouseover', function(d){ | |
d3.select("#major").text(d.key); | |
tooltip.transition() | |
.duration(500) | |
.style("opacity", 1); | |
tooltip.html((d.value * 100) + "%") | |
.style("left", (d3.event.pageX - 25) + "px") | |
.style("top", (d3.event.pageY - 50) + "px"); | |
}) | |
.on('mousemove', function (d) { | |
tooltip.style("top", (d3.event.pageY - 50) + 'px'); | |
tooltip.style("left", (d3.event.pageX - 25) + 'px'); | |
}) | |
.on('mouseout', function(d){ | |
d3.select("#major").text("Mouse over"); | |
tooltip.transition() | |
.duration(500) | |
.style("opacity", 0); | |
}) | |
function wrap(text, width) { | |
text.each(function() { | |
var text = d3.select(this), | |
words = text.text().split(/\s+/).reverse(), | |
word, | |
line = [], | |
lineNumber = 0, | |
lineHeight = 1.1, // ems | |
y = text.attr("y"), | |
dy = parseFloat(text.attr("dy")), | |
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); | |
while (word = words.pop()) { | |
line.push(word); | |
tspan.text(line.join(" ")); | |
if (tspan.node().getComputedTextLength() > width) { | |
line.pop(); | |
tspan.text(line.join(" ")); | |
line = [word]; | |
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); | |
} | |
} | |
}); | |
} | |
function type(d) { | |
d.value = +d.value; | |
return d; | |
} | |
//Fin Barras1 | |
//Inicio Motivos | |
var datos = [ | |
{motivo: "Emp", frequency: 10}, | |
{motivo: "Pro", frequency: 1}, | |
{motivo: "Can", frequency: 3}, | |
{motivo: "No", frequency: 4}, | |
{motivo: "Cli", frequency: 5}, | |
{motivo: "Epa", frequency: 6}, | |
{motivo: "Prd", frequency: 7}, | |
{motivo: "Cie", frequency: 8}, | |
{motivo: "Ent", frequency: 9}, | |
{motivo: "Noh", frequency: 9}, | |
{motivo: "Cen", frequency: 9}, | |
{motivo: "Otros", frequency: 9} | |
]; | |
var width = 500, | |
height = 350, | |
padding = 1.5, // separation between same-color nodes | |
clusterPadding = 0, // separation between different-color nodes | |
maxRadius = 40; | |
minRadius = 15; | |
contador = 0; | |
var n = datos.length, // total number of nodes | |
m = 20; // number of distinct clusters | |
var salto = function() { | |
if ( maxRadius/n > minRadius) | |
return Math.floor(maxRadius/n); | |
else | |
return minRadius; | |
} | |
var color = d3.scaleLinear().domain([0,1]) | |
.interpolate(d3.interpolateHcl) | |
.range([d3.rgb("#EBEBFF"), d3.rgb('#0000FF')]); | |
// The largest node for each cluster. | |
var clusters = new Array(m); | |
var nodes = d3.range(n).map(function () { | |
var i = Math.floor(Math.random() * m), | |
i1 = contador, | |
r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius, | |
r1 = datos[contador]["frequency"], | |
r2 = function () { | |
var actual = datos[contador]["frequency"]; | |
var maximo = datos[0]["frequency"]; | |
var relacion = Math.floor(actual * maxRadius / maximo); | |
if (relacion <= salto()) | |
return salto(); | |
return (relacion); | |
}, | |
degrade = function () { | |
var actual = datos[contador]["frequency"]; | |
var maximo = datos[0]["frequency"]; | |
var relacion = Math.floor(actual * n / maximo); | |
return relacion; | |
}, | |
d = { | |
cluster: i1, | |
degrade: degrade(), | |
radius: r2(), | |
nombre: datos[contador]["motivo"], | |
frecuencia: datos[contador]["frequency"], | |
x: Math.cos(i1 / m * 2 * Math.PI) * 200 + width / 2 + Math.random(), | |
y: Math.sin(i1 / m * 2 * Math.PI) * 200 + height / 2 + Math.random() | |
}; | |
contador++; | |
if (!clusters[i1] || (r2 > clusters[i1].radius)) clusters[i1] = d; | |
return d; | |
}); | |
var simulation = d3.forceSimulation() | |
// keep entire simulation balanced around screen center | |
.force('center', d3.forceCenter(width/2, height/2)) | |
// pull toward center | |
.force('attract', d3.forceAttract() | |
.target([width/2, height/2]) | |
.strength(0.1)) | |
// cluster by section | |
.force('cluster', d3.forceCluster() | |
.centers(function (d) { return clusters[d.cluster]; }) | |
.strength(0.5) | |
.centerInertia(0.1)) | |
// apply collision with padding | |
.force('collide', d3.forceCollide(function (d) { return d.radius + padding; }) | |
.strength(0)) | |
.on('tick', layoutTick) | |
.nodes(nodes); | |
var tooltip = d3.select("#motivos-rechazo").append("div") | |
.attr("class", "tooltip"); | |
var svg1 = d3.select('#motivos-rechazo').append('svg') | |
.attr('width', width) | |
.attr('height', height); | |
var node = svg1.selectAll('circle') | |
.data(nodes) | |
.enter() | |
.append('circle') | |
.style('fill', function (d) { return color( d.degrade/n); }) | |
.attr('id', function (d) { return d.nombre + ": " + d.frecuencia; }) | |
.call(d3.drag() | |
.on('start', dragstarted) | |
.on('drag', dragged) | |
.on('end', dragended) | |
) | |
.on('mouseover', function(d){ | |
d3.select("#major").text(d.key); | |
tooltip.transition() | |
.duration(500) | |
.style("opacity", 1); | |
tooltip.html( this.id ) | |
.style("left", (d3.event.pageX - 25) + "px") | |
.style("top", (d3.event.pageY - 50) + "px"); | |
}) | |
.on('mousemove', function (d) { | |
tooltip.style("top", (d3.event.pageY - 50) + 'px'); | |
tooltip.style("left", (d3.event.pageX - 25) + 'px'); | |
}) | |
.on('mouseout', function(d){ | |
d3.select("#major").text("Mouse over"); | |
tooltip.transition() | |
.duration(500) | |
.style("opacity", 0); | |
}); | |
svg1.append("text") | |
.attr("class", "title") | |
.attr("x", (width/4)) | |
.attr("y", 20) | |
.text("Porcentaje de las entregas según su estado"); | |
function dragstarted (d) { | |
if (!d3.event.active) simulation.alphaTarget(0.3).restart(); | |
d.fx = d.x; | |
d.fy = d.y; | |
} | |
function dragged (d) { | |
d.fx = d3.event.x; | |
d.fy = d3.event.y; | |
} | |
function dragended (d) { | |
if (!d3.event.active) simulation.alphaTarget(0); | |
d.fx = null; | |
d.fy = null; | |
} | |
// ramp up collision strength to provide smooth transition | |
var transitionTime = 3000; | |
var t = d3.timer(function (elapsed) { | |
var dt = elapsed / transitionTime; | |
simulation.force('collide').strength(Math.pow(dt, 2) * 0.7); | |
if (dt >= 1.0) t.stop(); | |
}); | |
function layoutTick (e) { | |
node | |
.attr('cx', function (d) { return d.x; }) | |
.attr('cy', function (d) { return d.y; }) | |
.attr('r', function (d) { return d.radius; }) | |
.attr('text', function (d) { return d.nombre; }); | |
} | |
//Fin Motivos | |
function svgToPng() { | |
saveSvgAsPng(d3.select('svg').node(), 'graficas.png'); | |
} | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment