basilesimon · July 19, 2018 15:34
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/d3-jetpack"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    rect {
      fill: #254251;
      opacity: .2;
    }
  </style>
 </head>

 <body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    const width = 960;
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", 500)

    const x = d3.scaleLinear()
    	.range([0,width])
    	.domain([0,35]);
    
    
    
    d3.csv('temp.csv', function(error, csvData) {
      const data = csvData.map(e => {
        return {patients: parseFloat(e.percentage),
        ccg: e.ccg}
      });
     console.log(data);
      
      const g = svg.append('g')
      	.translate([20,20]);
      const bars = g.selectAll('bars')
      	.data(data).enter()
      	.append('rect').at({
          class: 'bars',
          width: 2,
        	height: 50,
        	x: d => x(d.patients),
        	y: 20,
        });
      
      g
        .append('g')
        .at({ class: 'axis' })
        .translate([0, 80])
        .call(
          d3
            .axisBottom(x)
            .tickFormat(d => d )
            .ticks(5)
        );

    });


  </script>
 </body>
diff --git a/temp.csv b/temp.csv
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/d3-jetpack"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	rect {
	fill: #254251;
	opacity: .2;
	}
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!
	const width = 960;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", 500)

	const x = d3.scaleLinear()
	.range([0,width])
	.domain([0,35]);



	d3.csv('temp.csv', function(error, csvData) {
	const data = csvData.map(e => {
	return {patients: parseFloat(e.percentage),
	ccg: e.ccg}
	});
	console.log(data);

	const g = svg.append('g')
	.translate([20,20]);
	const bars = g.selectAll('bars')
	.data(data).enter()
	.append('rect').at({
	class: 'bars',
	width: 2,
	height: 50,
	x: d => x(d.patients),
	y: 20,
	});

	g
	.append('g')
	.at({ class: 'axis' })
	.translate([0, 80])
	.call(
	d3
	.axisBottom(x)
	.tickFormat(d => d )
	.ticks(5)
	);

	});


	</script>
	</body>
No results found