hanshenSun/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

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

<body>
  <script>
    var fileName = "https://raw.githubusercontent.com/hanshenSun/d3_skillMatrix/master/CORE%20Tools%20Data%20-%20Info.csv";
    var dataFields = ["Practice", "Project Type", "	Tool Type", "Phase"];
    d3.csv(fileName, function(error,data){
      var practice = d3.select("body")
      	.append("select")
      	.attr("id", "practiceSelector")
      	.selectAll("option")
      	.data(data)
      	.enter()
      	.append("option")
      	.text(function(d) {return d.Practice;})
      	.attr("value", function (d,i){return i;});

			var index = Math.round(Math.random() * data.length);
			d3.select("#practiceSelector").property("selectedIndex", index);

      d3.select("#practiceSelector")
      	.on("change", function(d){
        index = this.value;
        update();})


        function update(){
      d3.selectAll("p")
      	.data(data)
      	.text(function(d){
        return data[index]["Project Type"]
      })
    }
      })


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

	<body>
	<script>
	var fileName = "https://raw.githubusercontent.com/hanshenSun/d3_skillMatrix/master/CORE%20Tools%20Data%20-%20Info.csv";
	var dataFields = ["Practice", "Project Type", " Tool Type", "Phase"];
	d3.csv(fileName, function(error,data){
	var practice = d3.select("body")
	.append("select")
	.attr("id", "practiceSelector")
	.selectAll("option")
	.data(data)
	.enter()
	.append("option")
	.text(function(d) {return d.Practice;})
	.attr("value", function (d,i){return i;});

	var index = Math.round(Math.random() * data.length);
	d3.select("#practiceSelector").property("selectedIndex", index);

	d3.select("#practiceSelector")
	.on("change", function(d){
	index = this.value;
	update();})


	function update(){
	d3.selectAll("p")
	.data(data)
	.text(function(d){
	return data[index]["Project Type"]
	})
	}
	})




	</script>
	</body>