arthurwelle/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from jwilber's block: roughbar

  
## index.html
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.rawgit.com/pshihn/rough/master/dist/rough.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Gaegu');
  </style>
</head>
<body>
  <!-- Create a div where the graph will take place -->
  <div id="vis"></div>
	<script>

  let color = 'steelblue';
  let title = "Skate Tricks"

    const margin = { top: 40, right: 20, bottom: 50, left: 100 }
    const width = 420 - 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: color,
      stroke: color,
      strokeWidth: 1,
      roughness: 1.4,
      bowing: 1,
      fillStyle: 'cross-hatch'
      }
    });


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

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


    d3.csv("skate.csv", function (d) {
      console.log(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');
          bar.setAttribute('count', d.count)

        });


        // x-axis
        svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .selectAll("text")
          .attr("transform", "translate(-10,0)rotate(-45)")
          .style("text-anchor", "end")
          .style('font-family', 'Gaegu')
          // .style('font-weight', 'bold')
          .style('font-size', '1rem');

        // y-axis
        svg.append("g")
          .call(d3.axisLeft(y))
          .selectAll('text')
          .style('font-family', 'Gaegu')
          .style('font-size', '1rem');

        // title
        svg.append("text")
          .attr("x", (width / 2))
          .attr("y", 0 - (margin.top / 2))
          .attr("text-anchor", "middle")
          .style("font-size", "2rem")
          .style('font-family', 'Gaegu')
          // .style('font-weight', 'bold')
          .text(title);

           // create a tooltip
          let Tooltip = d3.select("#vis")
            .append("div")
            .style("opacity", 0)
            .attr("class", "tooltip")
            .style("background-color", "white")
            .style("border", "solid")
            .style("border-width", "1px")
            .style("border-radius", "5px")
            .style("padding", "10px")
            .style('max-width', '100px ')
            .style('font-family', 'Gaegu')

           // Three function that change the tooltip when user hover / move / leave a cell
          let mouseover = function(d) {
            console.log('mouseover')
            Tooltip
              .style("opacity", 1)
          }

          let mousemove = function(d) {
            let count = d3.select(this).attr('count');
            Tooltip
              .html(`The exact value of<br>this cell is: ${count}`)
              .style('transform', `translate(${d3.event.layerX }px,
                                  ${d3.event.layerY - (height + margin.top + margin.bottom)}px)`)
            }
            let mouseleave = function(d) {
              Tooltip
                // .transition()
                // .duration(1000)
                .style("opacity", 0)
            }

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

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

          d3.selectAll('g.bar')
            .on('mousemove', mousemove)


      });
</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>
	<title></title>
	<script src="https://cdn.rawgit.com/pshihn/rough/master/dist/rough.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	@import url('https://fonts.googleapis.com/css?family=Gaegu');
	</style>
	</head>
	<body>
	<!-- Create a div where the graph will take place -->
	<div id="vis"></div>
	<script>

	let color = 'steelblue';
	let title = "Skate Tricks"

	const margin = { top: 40, right: 20, bottom: 50, left: 100 }
	const width = 420 - 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: color,
	stroke: color,
	strokeWidth: 1,
	roughness: 1.4,
	bowing: 1,
	fillStyle: 'cross-hatch'
	}
	});


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

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


	d3.csv("skate.csv", function (d) {
	console.log(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');
	bar.setAttribute('count', d.count)

	});


	// x-axis
	svg.append("g")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x))
	.selectAll("text")
	.attr("transform", "translate(-10,0)rotate(-45)")
	.style("text-anchor", "end")
	.style('font-family', 'Gaegu')
	// .style('font-weight', 'bold')
	.style('font-size', '1rem');

	// y-axis
	svg.append("g")
	.call(d3.axisLeft(y))
	.selectAll('text')
	.style('font-family', 'Gaegu')
	.style('font-size', '1rem');

	// title
	svg.append("text")
	.attr("x", (width / 2))
	.attr("y", 0 - (margin.top / 2))
	.attr("text-anchor", "middle")
	.style("font-size", "2rem")
	.style('font-family', 'Gaegu')
	// .style('font-weight', 'bold')
	.text(title);

	// create a tooltip
	let Tooltip = d3.select("#vis")
	.append("div")
	.style("opacity", 0)
	.attr("class", "tooltip")
	.style("background-color", "white")
	.style("border", "solid")
	.style("border-width", "1px")
	.style("border-radius", "5px")
	.style("padding", "10px")
	.style('max-width', '100px ')
	.style('font-family', 'Gaegu')

	// Three function that change the tooltip when user hover / move / leave a cell
	let mouseover = function(d) {
	console.log('mouseover')
	Tooltip
	.style("opacity", 1)
	}

	let mousemove = function(d) {
	let count = d3.select(this).attr('count');
	Tooltip
	.html(`The exact value of<br>this cell is: ${count}`)
	.style('transform', `translate(${d3.event.layerX }px,
	${d3.event.layerY - (height + margin.top + margin.bottom)}px)`)
	}
	let mouseleave = function(d) {
	Tooltip
	// .transition()
	// .duration(1000)
	.style("opacity", 0)
	}

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

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

	d3.selectAll('g.bar')
	.on('mousemove', mousemove)


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