aaizemberg/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>mom - w43</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>

  <style>
    svg text
      { font: 10px sans-serif; }
  </style>

</head>
<body>

  <div id="barras"></div>

<!--
  <svg width="200" height="200">
    <rect x="100" y="100" width="95" height="95" fill="blue" stroke="black" stroke-width="5" />
    <line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="5" />

  <circle cx=150 cy=50 r=50 fill="white" stroke="black" />

  </svg>
-->


<script>
/**
var datos = [
  {"nombre" : "Alberto Fernandez", "seguidores" : 426191},
  {"nombre" : "Alberto Cairo", "seguidores" : 49108},
];

d3.select("body").selectAll("p")
  .data(datos).enter().append("p")
  .text( function(d) { return d.nombre + " tiene " + d.seguidores.toLocaleString('ES-ar') + " seguidores"; }  );

**/

d3.csv("https://download.data.world/s/5u4n6qivdwcayxseuldbt7xw3ap4ld").then(function(data) {
  var max_s = 0;
  data.forEach(function(d) {
    d.suicides_by_year = +d.suicides_by_year;
    if (d.suicides_by_year > max_s) {
       max_s = d.suicides_by_year;
    }
  });

  console.log(max_s);
  vis( data, max_s );


});

function vis(dw,mx) {

  var ancho = d3.scaleLinear()
    .domain([0, mx])
    .range([0, 300]);

  var svg = d3.select("div#barras").append("svg")
    .attr("width",400)
    .attr("height",500);

  svg.selectAll("text").data(dw).enter().append("text")
     .attr("x",10)
     .attr("y", function(d,i) { return 10+(i*10); } )
     .text( function(d,i) { return d.year; }  );

  svg.selectAll("rect").data(dw).enter().append("rect")
     .attr("x",40)
     .attr("y", function(d,i) { return 2+i*10; } )
     .attr("width", function(d,i) { return ancho(d.suicides_by_year); } )
     .attr("height",8)
     .attr("fill", function(d,i) { return (d.suicides_by_year < mx? "white" : "red" ) } )
     .attr("stroke","black")
       .append("title").text( d => d.suicides_by_year.toLocaleString()  );

}

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>mom - w43</title>
	<script src="https://d3js.org/d3.v5.min.js"></script>

	<style>
	svg text
	{ font: 10px sans-serif; }
	</style>

	</head>
	<body>

	<div id="barras"></div>

	<!--
	<svg width="200" height="200">
	<rect x="100" y="100" width="95" height="95" fill="blue" stroke="black" stroke-width="5" />
	<line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="5" />

	<circle cx=150 cy=50 r=50 fill="white" stroke="black" />

	</svg>
	-->


	<script>
	/**
	var datos = [
	{"nombre" : "Alberto Fernandez", "seguidores" : 426191},
	{"nombre" : "Alberto Cairo", "seguidores" : 49108},
	];

	d3.select("body").selectAll("p")
	.data(datos).enter().append("p")
	.text( function(d) { return d.nombre + " tiene " + d.seguidores.toLocaleString('ES-ar') + " seguidores"; } );

	**/

	d3.csv("https://download.data.world/s/5u4n6qivdwcayxseuldbt7xw3ap4ld").then(function(data) {
	var max_s = 0;
	data.forEach(function(d) {
	d.suicides_by_year = +d.suicides_by_year;
	if (d.suicides_by_year > max_s) {
	max_s = d.suicides_by_year;
	}
	});

	console.log(max_s);
	vis( data, max_s );


	});

	function vis(dw,mx) {

	var ancho = d3.scaleLinear()
	.domain([0, mx])
	.range([0, 300]);

	var svg = d3.select("div#barras").append("svg")
	.attr("width",400)
	.attr("height",500);

	svg.selectAll("text").data(dw).enter().append("text")
	.attr("x",10)
	.attr("y", function(d,i) { return 10+(i*10); } )
	.text( function(d,i) { return d.year; } );

	svg.selectAll("rect").data(dw).enter().append("rect")
	.attr("x",40)
	.attr("y", function(d,i) { return 2+i*10; } )
	.attr("width", function(d,i) { return ancho(d.suicides_by_year); } )
	.attr("height",8)
	.attr("fill", function(d,i) { return (d.suicides_by_year < mx? "white" : "red" ) } )
	.attr("stroke","black")
	.append("title").text( d => d.suicides_by_year.toLocaleString() );

	}

	</script>

	</body>
	</html>