/Proyecto_web_V2_extraer_anios.markdown

## 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>
    <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>

## Proyecto_web_V2_extraer_anios.markdown

      
    Raw
  

              Proyecto_web_V2_extraer_anios.markdown
            
          
    Proyecto_web_V2_extraer_anios

A Pen by rcardo on CodePen.
License.

  
## 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
              }
        });

          };//fin si existe id
          */
          console.log("creando json.....");
          if (tag == "") {
          jQuery.ajax({
          url: 'http://carbono.utpl.edu.ec:8080/RESTFUL_SICA/webresources/entidades.librospublicados/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("");
            //console.log(JSON.stringify(data));
            Graficar(data);
          },
          error: function(xhr, textStatus, errorThrown) {
            console.log("error"+textStatus);
            //called when there is an error
          }
        });

        };


        });

    });

function Graficar(data){
  console.log ("estamoss en funcion graficar ");
  //console.log (JSON.stringify(nodes));
var vis = d3.select("#chart")
            .append("svg")
.attr("width", 200).attr("height", 200);
var array = Fabricarjson(data);
  console.log("respuesta...");
  console.log (array.length);


}


function Fabricarjson(data){
  var miArray = new Array();
  var anio =1991, json, limite = 2015, cont=0;
  console.log ("estamos en la funcion fabricar json");

  for(var j=anio; j<=limite;j++){
    console.log("primer for");
    for(i in data.books){
      console.log("segundo for");
      if(data.books[i].year==j){
        console.log("condicion");
        json = json+1;
      }
    }//fin for
    miArray[cont] = json;
    json = 0;
    cont = cont+1;
  }

  console.log("tamaño de array: ")
  console.log(cont);
  console.log(miArray.length)
  console.log("tamaño de array: ")

for (var x = 1; x < miArray.length; x++) {
  //console.log("# de libros publicados por año: ")
  console.log(miArray[x]);
}
  console.log(json);
  return miArray;
}


## style.css
circle {
  color: black;
}

## styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
	<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>
	<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>
	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
	}
	});

	};//fin si existe id
	*/
	console.log("creando json.....");
	if (tag == "") {
	jQuery.ajax({
	url: 'http://carbono.utpl.edu.ec:8080/RESTFUL_SICA/webresources/entidades.librospublicados/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("");
	//console.log(JSON.stringify(data));
	Graficar(data);
	},
	error: function(xhr, textStatus, errorThrown) {
	console.log("error"+textStatus);
	//called when there is an error
	}
	});

	};




	});

	});

	function Graficar(data){
	console.log ("estamoss en funcion graficar ");
	//console.log (JSON.stringify(nodes));
	var vis = d3.select("#chart")
	.append("svg")
	.attr("width", 200).attr("height", 200);
	var array = Fabricarjson(data);
	console.log("respuesta...");
	console.log (array.length);


	}





	function Fabricarjson(data){
	var miArray = new Array();
	var anio =1991, json, limite = 2015, cont=0;
	console.log ("estamos en la funcion fabricar json");

	for(var j=anio; j<=limite;j++){
	console.log("primer for");
	for(i in data.books){
	console.log("segundo for");
	if(data.books[i].year==j){
	console.log("condicion");
	json = json+1;
	}
	}//fin for
	miArray[cont] = json;
	json = 0;
	cont = cont+1;
	}

	console.log("tamaño de array: ")
	console.log(cont);
	console.log(miArray.length)
	console.log("tamaño de array: ")

	for (var x = 1; x < miArray.length; x++) {
	//console.log("# de libros publicados por año: ")
	console.log(miArray[x]);
	}
	console.log(json);
	return miArray;
	}