Skip to content

Instantly share code, notes, and snippets.

/Proyecto_web.markdown

Created July 21, 2015 22:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/db5402321bf70e7d6108 to your computer and use it in GitHub Desktop.
Save anonymous/db5402321bf70e7d6108 to your computer and use it in GitHub Desktop.
Download ZIP
Proyecto_web
Raw
index.html
<html>
<head>
<title>D3</title>
<center><img src="http://original.livestream.com/filestore/logos/4907675e-88cc-ceff-091a-206d3b58fa42-banner.png" class="img-responsive" width="1000" height="30"></center><br><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<body>
<div class="container">
<div class="row">
<input type = "text" id="b">
<input type= "button" id="buscar" value = "Buscar">
</div>
<div id="graphic"></div>
<hr>
<div class="row">
<div class="col-md-4 thumbnail" style="float:left" id="chart"></div>
<div class="col-md-8">
Detalle de Nodo Pulsado
<div id="viz"></div>
<div id="detalle">
</div>
</div>
</div>
</div>
<div id="graph">
</div>
</body>
</html>
Raw
script.js
var cont =0;
var cont2=0;
jQuery(document).ready(function($) {
console.log('ready');
$("#buscar").on("click", function(){
var texto ="";
var tag = $("#b").val();
console.log("taggg");
console.log(tag);
if (tag != null) {
jQuery.ajax({
url: 'http://carbono.utpl.edu.ec:8080/RESTFUL_SICA/webresources/entidades.librospublicados/buscarPorId?id='+tag+'&jsoncallback=?',
type: 'POST',
dataType: 'json',
data: {},
complete: function(xhr, textStatus) {
//called when complete
console.log("complete"+textStatus);
},
success: function(data, textStatus, xhr) {
//called when successful
//console.log("abajo esta el json");
console.log(JSON.stringify(data));
graficar(data);
},
error: function(xhr, textStatus, errorThrown) {
console.log("error"+textStatus);
//called when there is an error
}
});
};
if (tag == "") {
jQuery.ajax({
url: 'http://carbono.utpl.edu.ec:8080/RESTFUL_SICA/webresources/entidades.docentes/listar?jsoncallback=?',
type: 'POST',
dataType: 'json',
data: {},
complete: function(xhr, textStatus) {
//called when complete
console.log("complete"+textStatus);
},
success: function(data, textStatus, xhr) {
//called when successful
//console.log("abajo esta el json");
//console.log(JSON.stringify(data));
graficar(data);
},
error: function(xhr, textStatus, errorThrown) {
console.log("error"+textStatus);
//called when there is an error
}
});
};
});
});
function graficar(nodes){
var Loja = 0;
var Tungurahua= 0;
var Azuay = 0;
var Guayas = 0;
var Oro=0;
console.log ("hola este es tu nodo");
for (l in nodes.docentes){
if(nodes.docentes[l].birthplace == "Loja"){
Loja=Loja+1;
//console.log(l);
//console.log("goodddd")
}
if(nodes.docentes[l].birthplace == "Tungurahua"){
Tungurahua=Tungurahua+1;
//console.log(l);
//console.log("goodddd")
}
if(nodes.docentes[l].birthplace == "Azuay"){
Azuay=Azuay+1;
//console.log(l);
//console.log("goodddd")
}
if(nodes.docentes[l].birthplace == "Guayas"){
Guayas=Guayas+1;
//console.log(l);
//console.log("goodddd")
}
if(nodes.docentes[l].birthplace == "El Oro"){
Oro=Oro+1;
//console.log(l);
//console.log("goodddd")
}
}
console.log("datos");
console.log(Loja);
console.log(Tungurahua);
console.log(Azuay);
console.log(Guayas);
console.log("arrays");
var bardata = [Loja,Tungurahua,Azuay,Guayas,Oro];
for(i in bardata){
console.log(bardata[i]);
}
bardata.sort(function compareNumbers(a, b){
return a - b;
})
var margin = { top: 30, right: 30, bottom: 40, left: 50 };
var height = 300 - margin.top - margin.bottom,
width = 500 - margin.left - margin.right,
barWidth = 50,
barOffset = 5;
var tempColor;
var colors = d3.scale.linear()
.domain([0, bardata.length * .33, bardata.length * .66, bardata.length])
.range(['#B58929', '#C61C6F', '#268BD2', '#85992C'])
;
var yScale = d3.scale.linear()
.domain([0, d3.max(bardata)])
.range([0, height - 10]);
var xScale = d3.scale.ordinal()
.domain(d3.range(0, bardata.length))
.rangeBands([0, width], .2)
var myBarChart = d3.select('#graphic').append('svg')
.style('background', '#E7E0CB')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left +', ' + margin.top + ')')
.selectAll('rect').data(bardata)
.enter().append('rect')
.style('fill', function(d, i){
return colors(i);
})
.attr('width', xScale.rangeBand)
.attr('x', function(d, i){
return xScale(i);
})
.attr('height', 0)
.attr('y', height)
.on('mouseover', function(d){
tooltip.transition()
.style('opacity', .9);
tooltip.html(d)
.style('left', (d3.event.pageX - 5) + 'px')
.style('top', (d3.event.pageY - 25) + 'px');
tempColor = this.style.fill;
d3.select(this)
.style('opacity', .5)
.style('fill', 'yellow');
})
.on('mouseout', function(){
d3.select(this)
.style('opacity', 1)
.style('fill', tempColor);
});
var tooltip = d3.select('body').append('div')
.style('position', 'absolute')
.style('padding', '0 10px')
.style('background', 'white')
.style('opacity', 0);
myBarChart.transition()
.attr('height', function(d){
return yScale(d);
})
.attr('y', function(d){
return height - yScale(d);
})
.delay(function(d, i){
return i*20;
})
.duration(1000)
.ease('elastic');
var vGuideScale = d3.scale.linear()
.domain([0, d3.max(bardata)])
.range([height, 0])
var vAxis = d3.svg.axis()
.scale(vGuideScale)
.orient('left')
.ticks(10);
var vGuide = d3.select('svg').append('g')
vAxis(vGuide);
vGuide.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
vGuide.selectAll('path')
.style({ fill: 'none', stroke:'#000' });
vGuide.selectAll('line')
.style({stroke:'#000'});
}
Raw
style.css
circle {
color: black;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment