jwilber/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html>
<head>
	<script src="https://cdn.rawgit.com/pshihn/rough/master/dist/rough.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
  <!-- Create a div where the graph will take place -->
  <div id="vis"></div>
	<script>

    const margin = { top: 40, right: 20, bottom: 50, left: 100 }
    const width = 920 - margin.left - margin.right;
    const height = 420 - margin.top - margin.bottom;

    let svg = d3.select('#vis')
        .append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
          .append("g")
          .attr('id', 'new')
          .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")")


    const roughSvg = document.getElementById('new');

    const rc = rough.svg(roughSvg, {
      options: {
      fill: 'chocolate',
      stroke: 'chocolate'
      }
    });


    const x = d3.scaleLinear()
      .rangeRound([0, width]);

    const y = d3.scaleBand()
      .rangeRound([0, height])
      .padding(0.1);


    d3.csv("skate.csv", function (d) {
        d.count = +d.count;
        return d;
      }, function (error, data) {
        if (error) throw error;

        y.domain(data.map(function (d) { return d.trick; }));

        x.domain([0, d3.max(data, function (d) { return d.count; })]);

        data.forEach(function (d) {
          let node = rc.rectangle(0, y(d.trick), x(d.count), y.bandwidth());
          bar = roughSvg.appendChild(node);
          bar.setAttribute('class', 'bar');
        });

          d3.selectAll('g.bar')
            .on('mouseover', function() {
              d3.select(this).selectAll('path').style('stroke', 'red')
            })

          d3.selectAll('g.bar')
          .on('mouseout', function() {
            d3.select(this).selectAll('path').style('stroke', 'chocolate')
          })


      });
</script>
</body>
</html>

## skate.csv

          
            trick
            count

            
              kickflip
              50

            
              ollie
              48

            
              boardslide
              48

            
              heelflip
              45

            
              hardflip
              40

            
              switch flip
              35

            
              backside flip
              30

            
              360 flip
              50
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdn.rawgit.com/pshihn/rough/master/dist/rough.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>
	<body>
	<!-- Create a div where the graph will take place -->
	<div id="vis"></div>
	<script>

	const margin = { top: 40, right: 20, bottom: 50, left: 100 }
	const width = 920 - margin.left - margin.right;
	const height = 420 - margin.top - margin.bottom;

	let svg = d3.select('#vis')
	.append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.append("g")
	.attr('id', 'new')
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")")


	const roughSvg = document.getElementById('new');

	const rc = rough.svg(roughSvg, {
	options: {
	fill: 'chocolate',
	stroke: 'chocolate'
	}
	});


	const x = d3.scaleLinear()
	.rangeRound([0, width]);

	const y = d3.scaleBand()
	.rangeRound([0, height])
	.padding(0.1);


	d3.csv("skate.csv", function (d) {
	d.count = +d.count;
	return d;
	}, function (error, data) {
	if (error) throw error;

	y.domain(data.map(function (d) { return d.trick; }));

	x.domain([0, d3.max(data, function (d) { return d.count; })]);

	data.forEach(function (d) {
	let node = rc.rectangle(0, y(d.trick), x(d.count), y.bandwidth());
	bar = roughSvg.appendChild(node);
	bar.setAttribute('class', 'bar');
	});

	d3.selectAll('g.bar')
	.on('mouseover', function() {
	d3.select(this).selectAll('path').style('stroke', 'red')
	})

	d3.selectAll('g.bar')
	.on('mouseout', function() {
	d3.select(this).selectAll('path').style('stroke', 'chocolate')
	})


	});
	</script>
	</body>
	</html>
	trick	count
	kickflip	50
	ollie	48
	boardslide	48
	heelflip	45
	hardflip	40
	switch flip	35
	backside flip	30
	360 flip	50