aaronbalthaser/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## data.json
[
  {
    "score": 96,
    "name": "Welch"
  },
  {
    "score": 83,
    "name": "Villarreal"
  },
  {
    "score": 91,
    "name": "Sheryl"
  },
  {
    "score": 96,
    "name": "Marshall"
  },
  {
    "score": 88,
    "name": "Aimee"
  }
]

## 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; }

    .chart {
      background: lightgray;
      border: 1px solid black;
      min-width: 200px;
      min-height: 350px;
    }
    .bar {
      height: 30px;
      color: green;
      fill: lightgreen;
      stroke: black;
      stroke-width: 1;
    }
  </style>
</head>

<body>
  <div class="chart"></div>
  <script>
    var scores = [
      {
        "score": 96,
        "name": "Welch"
      },
      {
        "score": 83,
        "name": "Villarreal"
      },
      {
        "score": 91,
        "name": "Sheryl"
      },
      {
        "score": 96,
        "name": "Marshall"
      },
      {
        "score": 88,
        "name": "Aimee"
      }
    ];

    var itemsHeight = scores.length;

    function scaleBar(selection, scale) {
      console.log(selection);
      selection.style('transform', 'scaleX(' + scale + ')');
    }

    function opacity(selection, opacity) {
      selection.style('fill-opacity', opacity);
    }

    function setFill(selection, color) {
      selection.style('fill', color);
    }


    var bar = d3.select('.chart')
    	.append('svg')
    		.attr('width', 225)
    		.attr('height', itemsHeight * 38)
    	.selectAll('div')
    	.data(scores)
			.enter()
        .append('g')
    		.attr('transform', (d, i) => 'translate(0, ' + i * 33 + ')');

    bar.append('rect')
      .style('width', d => d.score)
      .attr('class', 'bar')
    	.on('mouseover', function(d, i, elements) {
      	d3.select(this)
          .call(scaleBar, 2)
        	.call(setFill, 'orange');

      	d3.selectAll(elements)
        	.filter(':not(:hover)')
        	.call(opacity, 0.5);
    	})
    	.on('mouseout', function(d, i, elements) {
      	d3.select(this)
          .call(scaleBar, 1)
      		.call(setFill, 'lightgreen');

      	d3.select(this).style('transform', 'scaleX(1)');
      	d3.selectAll(elements)
        	.call(opacity, 1);
    	})

    bar.append('text')
    	.attr('y', 38 / 2)
    	.text(function(d) {
      	return d.name;
    	})
  </script>
</body>
	[
	{
	"score": 96,
	"name": "Welch"
	},
	{
	"score": 83,
	"name": "Villarreal"
	},
	{
	"score": 91,
	"name": "Sheryl"
	},
	{
	"score": 96,
	"name": "Marshall"
	},
	{
	"score": 88,
	"name": "Aimee"
	}
	]
	<!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; }

	.chart {
	background: lightgray;
	border: 1px solid black;
	min-width: 200px;
	min-height: 350px;
	}
	.bar {
	height: 30px;
	color: green;
	fill: lightgreen;
	stroke: black;
	stroke-width: 1;
	}
	</style>
	</head>

	<body>
	<div class="chart"></div>
	<script>
	var scores = [
	{
	"score": 96,
	"name": "Welch"
	},
	{
	"score": 83,
	"name": "Villarreal"
	},
	{
	"score": 91,
	"name": "Sheryl"
	},
	{
	"score": 96,
	"name": "Marshall"
	},
	{
	"score": 88,
	"name": "Aimee"
	}
	];

	var itemsHeight = scores.length;

	function scaleBar(selection, scale) {
	console.log(selection);
	selection.style('transform', 'scaleX(' + scale + ')');
	}

	function opacity(selection, opacity) {
	selection.style('fill-opacity', opacity);
	}

	function setFill(selection, color) {
	selection.style('fill', color);
	}


	var bar = d3.select('.chart')
	.append('svg')
	.attr('width', 225)
	.attr('height', itemsHeight * 38)
	.selectAll('div')
	.data(scores)
	.enter()
	.append('g')
	.attr('transform', (d, i) => 'translate(0, ' + i * 33 + ')');

	bar.append('rect')
	.style('width', d => d.score)
	.attr('class', 'bar')
	.on('mouseover', function(d, i, elements) {
	d3.select(this)
	.call(scaleBar, 2)
	.call(setFill, 'orange');

	d3.selectAll(elements)
	.filter(':not(:hover)')
	.call(opacity, 0.5);
	})
	.on('mouseout', function(d, i, elements) {
	d3.select(this)
	.call(scaleBar, 1)
	.call(setFill, 'lightgreen');

	d3.select(this).style('transform', 'scaleX(1)');
	d3.selectAll(elements)
	.call(opacity, 1);
	})

	bar.append('text')
	.attr('y', 38 / 2)
	.text(function(d) {
	return d.name;
	})
	</script>
	</body>