pbellon/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## data.csv

          
            group
            x
            y

            
              1
               4.5
               8

            
              1
               9
               12

            
              1
               2
               19

            
              2
               9
               20

            
              3
               2
               1

            
              3
               8
               2

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var x = d3.scale.linear()
        .range([0, width]);

    var y = d3.scale.linear()
        .range([height, 0]);

    var select = d3.select('body').append('select').on('change', onChange);

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    var points;

    function onChange(){
      var group = select.property('value');
      points.style('opacity', function(d){
        return d.group == group ? 1:0;
      });
    }

    d3.csv("data.csv", function(error, data) {
      if (error) throw error;

      // Coerce the strings to numbers.
      data.forEach(function(d) {
        d.x = +d.x;
        d.y = +d.y;
      });

      var groups = d3.set(data.map(function(d){ return d.group; })).values();
      console.log(groups);

      // create group filtering select list
      select.selectAll('option')
				.data(groups)
  			.enter().append('option').text(function(d){ return d });

      select.property('value', 1);


      // Compute the scales’ domains.
      x.domain(d3.extent(data, function(d) { return d.x; })).nice();
      y.domain(d3.extent(data, function(d) { return d.y; })).nice();

      // Add the x-axis.
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.svg.axis().scale(x).orient("bottom"));

      // Add the y-axis.
      svg.append("g")
        .attr("class", "y axis")
        .call(d3.svg.axis().scale(y).orient("left"));

      // Add the points!
      points = svg.selectAll(".point")
        .data(data)
        .enter().append("path")
          .attr("class", "point")
          .attr("d", d3.svg.symbol().type("triangle-up"))
          .attr("transform", function(d){ return "translate("+x(d.x)+","+y(d.y)+")";});
  });


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!
	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.scale.linear()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var select = d3.select('body').append('select').on('change', onChange);

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


	var points;

	function onChange(){
	var group = select.property('value');
	points.style('opacity', function(d){
	return d.group == group ? 1:0;
	});
	}

	d3.csv("data.csv", function(error, data) {
	if (error) throw error;

	// Coerce the strings to numbers.
	data.forEach(function(d) {
	d.x = +d.x;
	d.y = +d.y;
	});

	var groups = d3.set(data.map(function(d){ return d.group; })).values();
	console.log(groups);

	// create group filtering select list
	select.selectAll('option')
	.data(groups)
	.enter().append('option').text(function(d){ return d });

	select.property('value', 1);


	// Compute the scales’ domains.
	x.domain(d3.extent(data, function(d) { return d.x; })).nice();
	y.domain(d3.extent(data, function(d) { return d.y; })).nice();

	// Add the x-axis.
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.svg.axis().scale(x).orient("bottom"));

	// Add the y-axis.
	svg.append("g")
	.attr("class", "y axis")
	.call(d3.svg.axis().scale(y).orient("left"));

	// Add the points!
	points = svg.selectAll(".point")
	.data(data)
	.enter().append("path")
	.attr("class", "point")
	.attr("d", d3.svg.symbol().type("triangle-up"))
	.attr("transform", function(d){ return "translate("+x(d.x)+","+y(d.y)+")";});
	});


	</script>
	</body>