karmi/CR_cizinci_2000-2014.csv

## CR_cizinci_2000-2014.csv

          
            2004
            2005
            2006
            2007
            2008
            2009
            2010
            2011
            2012
            2013
            2014

            
              255917
              280111
              323343
              394345
              439498
              434600
              426423
              436319
              438076
              441536
              451923

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Simple D3.js bar chart loaded from CSV</title>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
  <script src='//d3js.org/d3.v3.min.js' charset='utf-8'></script>
  <style>
    body { font: normal 12px Helvetica, sans-serif; margin: 4em; position: relative;}
    .label { position: absolute; left: 0; }
    .bar { color: white; background-color: #7BC8FB; padding: 0.5em; margin: 2px; position: absolute; left: 3em; }
  </style>
</head>
<body>
  <script>
    d3.csv('https://gist.githubusercontent.com/karmi/a08b6996fbbcfee791d3/raw/b73d563c315f8353e815f482bbfae78f0e102344/CR_cizinci_2000-2014.csv', function(error, data) {
      console.log(data)

      var years = d3.keys(data[0])
      var values = d3.values(data[0]).map(function(d) { return +d })

      var chart = d3.select('#chart')

      var label = chart.selectAll('div').data(years)
      var bar   = chart.selectAll('div').data(values)

      label.enter()
        .append('div')
        .attr('class', 'label')
        .style('top', function(d, i) { return i*40 + 'px' })
        .text(function(d) { return d })

      bar.enter()
        .append('div')
        .attr('class', 'bar')
        .style('width', function(d, i) { return Math.round(d/1000) + 'px' })
        .style('top', function(d, i) { return i*40 - 7 + 'px' })
        .text(function(d) { return d3.format(',')(d) })
    });
  </script>
  <div id="chart"></div>
</body>
</html>
	2004	2005	2006	2007	2008	2009	2010	2011	2012	2013	2014
	255917	280111	323343	394345	439498	434600	426423	436319	438076	441536	451923
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple D3.js bar chart loaded from CSV</title>
	<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
	<script src='//d3js.org/d3.v3.min.js' charset='utf-8'></script>
	<style>
	body { font: normal 12px Helvetica, sans-serif; margin: 4em; position: relative;}
	.label { position: absolute; left: 0; }
	.bar { color: white; background-color: #7BC8FB; padding: 0.5em; margin: 2px; position: absolute; left: 3em; }
	</style>
	</head>
	<body>
	<script>
	d3.csv('https://gist.githubusercontent.com/karmi/a08b6996fbbcfee791d3/raw/b73d563c315f8353e815f482bbfae78f0e102344/CR_cizinci_2000-2014.csv', function(error, data) {
	console.log(data)

	var years = d3.keys(data[0])
	var values = d3.values(data[0]).map(function(d) { return +d })

	var chart = d3.select('#chart')

	var label = chart.selectAll('div').data(years)
	var bar = chart.selectAll('div').data(values)

	label.enter()
	.append('div')
	.attr('class', 'label')
	.style('top', function(d, i) { return i*40 + 'px' })
	.text(function(d) { return d })

	bar.enter()
	.append('div')
	.attr('class', 'bar')
	.style('width', function(d, i) { return Math.round(d/1000) + 'px' })
	.style('top', function(d, i) { return i*40 - 7 + 'px' })
	.text(function(d) { return d3.format(',')(d) })
	});
	</script>
	<div id="chart"></div>
	</body>
	</html>