mforando/.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; }
  </style>
</head>

<body>
  <script>

    var loadings = [{"Measure":"H-CLEAN","Loading":0.67}
,{"Measure":"H-COMP-1","Loading":0.81}
,{"Measure":"H-COMP-2","Loading":0.75}
,{"Measure":"H-COMP-3","Loading":0.74}
,{"Measure":"H-COMP-5","Loading":0.77}
,{"Measure":"H-COMP-6","Loading":0.7}
,{"Measure":"H-COMP-7","Loading":0.89}
,{"Measure":"H-HSP-RATING","Loading":0.92}
,{"Measure":"H-QUIET","Loading":0.7}
,{"Measure":"H-RECMND","Loading":0.87}
];
  loadings = [{"Measure":"MORT-30-AMI","Loading":0.48}
,{"Measure":"MORT-30-CABG","Loading":0.3}
,{"Measure":"MORT-30-COPD","Loading":0.68}
,{"Measure":"MORT-30-HF","Loading":0.72}
,{"Measure":"MORT-30-PN","Loading":0.65}
,{"Measure":"MORT-30-STK","Loading":0.49}
,{"Measure":"PSI-4-SURG-COMP","Loading":0.34}
]
    var graph = {}
    graph.links = [];
    graph.nodes = loadings;

    //assing IDs
    loadings.forEach((d,i)=>{d.id = i;});

    //links
    loadings.forEach((source)=>{
      loadings.forEach((target)=>{
        if(source.Measure != target.Measure){
          graph.links.push(
            {"source":source.id, "target": target.id, "strength": source.Loading}
          )
        }
      })
    })

    var width = 500;
    var height = 500;

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

    var chart = svg.append('g')
    	.attr('id','forceChart')
    	.attr('transform','translate(' + width/2 + ',' + height/2 + ') '+'rotate(0)');

    var radiusScale = d3.scaleLinear()
    	.range([1,10])
    	.domain([Math.sqrt(.15),Math.sqrt(1)])

    var convexHull = chart.append("path")
  		.attr("class",'hull')
    	.style('opacity',.5)
    	.style('stroke-width','30px')
    	.style('stroke','rgb(230,210,230)')
    	.style('stroke-linejoin','round')
    	.style('fill', 'rgb(230,210,230)');

    var links = chart.selectAll('line').data(graph.links)
   	links.enter()
      .append("line")
    	.style('opacity',.25)
      .attr("stroke", "rgb(100,100,100)")

    var circles = chart.selectAll('circle').data(graph.nodes)
   	circles.enter()
      .append("circle")
      .attr("r", (d)=>{return radiusScale(Math.sqrt(d.Loading))})
      .attr("fill", "black")

    var simulation = d3.forceSimulation()
    	.nodes(graph.nodes)
      .force("link", d3.forceLink().links(graph.links).id(function(d) {return d.id}))
      .force("collide",d3.forceCollide(function(d){return radiusScale(Math.sqrt(d.Loading)) + 6 }))
      .force("charge", d3.forceManyBody())
//      .force("center", d3.forceCenter(width / 2, height    / 2))
    	.alphaDecay(.01)
    	.on('tick',ticked)

    d3.timer(function(d){
      console.log(d);
    })

    //rotateSimulation();
    function rotateSimulation(){
      setTimeout(function(){
      d3.select("#forceChart")
        .transition()
      	.duration(500)
        .attr('transform','translate(' + width/2 + ',' + height/2 + ') '+'rotate(360)');
        //console.log('foo')
      rotateSimulation();
    },500)
    }

    function ticked(){

      //calculate convex hull
      var hull = d3.polygonHull(graph.nodes.map(function(d) { return [d.x,d.y]; }) );
      d3.select('.hull').datum(hull).attr("d", function(d) { return "M" + d.join("L") + "Z"; });

      d3.select('svg').selectAll('circle')
      	.attr('cx',(d)=>{return d.x})
      	.attr('cy',(d)=>{return d.y})

      d3.select('svg').selectAll('line')
      	.attr('x1',(d)=>{return d.source.x})
      	.attr('x2',(d)=>{return d.target.x})
      	.attr('y1',(d)=>{return d.source.y})
      	.attr('y2',(d)=>{return d.target.y})

    }
  </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; }
	</style>
	</head>

	<body>
	<script>

	var loadings = [{"Measure":"H-CLEAN","Loading":0.67}
	,{"Measure":"H-COMP-1","Loading":0.81}
	,{"Measure":"H-COMP-2","Loading":0.75}
	,{"Measure":"H-COMP-3","Loading":0.74}
	,{"Measure":"H-COMP-5","Loading":0.77}
	,{"Measure":"H-COMP-6","Loading":0.7}
	,{"Measure":"H-COMP-7","Loading":0.89}
	,{"Measure":"H-HSP-RATING","Loading":0.92}
	,{"Measure":"H-QUIET","Loading":0.7}
	,{"Measure":"H-RECMND","Loading":0.87}
	];
	loadings = [{"Measure":"MORT-30-AMI","Loading":0.48}
	,{"Measure":"MORT-30-CABG","Loading":0.3}
	,{"Measure":"MORT-30-COPD","Loading":0.68}
	,{"Measure":"MORT-30-HF","Loading":0.72}
	,{"Measure":"MORT-30-PN","Loading":0.65}
	,{"Measure":"MORT-30-STK","Loading":0.49}
	,{"Measure":"PSI-4-SURG-COMP","Loading":0.34}
	]
	var graph = {}
	graph.links = [];
	graph.nodes = loadings;

	//assing IDs
	loadings.forEach((d,i)=>{d.id = i;});

	//links
	loadings.forEach((source)=>{
	loadings.forEach((target)=>{
	if(source.Measure != target.Measure){
	graph.links.push(
	{"source":source.id, "target": target.id, "strength": source.Loading}
	)
	}
	})
	})

	var width = 500;
	var height = 500;

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

	var chart = svg.append('g')
	.attr('id','forceChart')
	.attr('transform','translate(' + width/2 + ',' + height/2 + ') '+'rotate(0)');

	var radiusScale = d3.scaleLinear()
	.range([1,10])
	.domain([Math.sqrt(.15),Math.sqrt(1)])

	var convexHull = chart.append("path")
	.attr("class",'hull')
	.style('opacity',.5)
	.style('stroke-width','30px')
	.style('stroke','rgb(230,210,230)')
	.style('stroke-linejoin','round')
	.style('fill', 'rgb(230,210,230)');

	var links = chart.selectAll('line').data(graph.links)
	links.enter()
	.append("line")
	.style('opacity',.25)
	.attr("stroke", "rgb(100,100,100)")

	var circles = chart.selectAll('circle').data(graph.nodes)
	circles.enter()
	.append("circle")
	.attr("r", (d)=>{return radiusScale(Math.sqrt(d.Loading))})
	.attr("fill", "black")

	var simulation = d3.forceSimulation()
	.nodes(graph.nodes)
	.force("link", d3.forceLink().links(graph.links).id(function(d) {return d.id}))
	.force("collide",d3.forceCollide(function(d){return radiusScale(Math.sqrt(d.Loading)) + 6 }))
	.force("charge", d3.forceManyBody())
	// .force("center", d3.forceCenter(width / 2, height / 2))
	.alphaDecay(.01)
	.on('tick',ticked)

	d3.timer(function(d){
	console.log(d);
	})

	//rotateSimulation();
	function rotateSimulation(){
	setTimeout(function(){
	d3.select("#forceChart")
	.transition()
	.duration(500)
	.attr('transform','translate(' + width/2 + ',' + height/2 + ') '+'rotate(360)');
	//console.log('foo')
	rotateSimulation();
	},500)
	}

	function ticked(){

	//calculate convex hull
	var hull = d3.polygonHull(graph.nodes.map(function(d) { return [d.x,d.y]; }) );
	d3.select('.hull').datum(hull).attr("d", function(d) { return "M" + d.join("L") + "Z"; });

	d3.select('svg').selectAll('circle')
	.attr('cx',(d)=>{return d.x})
	.attr('cy',(d)=>{return d.y})

	d3.select('svg').selectAll('line')
	.attr('x1',(d)=>{return d.source.x})
	.attr('x2',(d)=>{return d.target.x})
	.attr('y1',(d)=>{return d.source.y})
	.attr('y2',(d)=>{return d.target.y})

	}
	</script>
	</body>