AndresAnayaIsaza/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is a modified bar chart template I used for my Painting Classifier passion project at Metis. For the application accompanying my artistic style classifier, I wanted to present a visualization that accurately conveyed the match score for each category in an easily-digestible format. The bar chart was one of the two formats I went with, the other being a radar chart.
Features include scaling y-axis, labels for x-axis, a tooltip with value and emphasis upon hover, and easily customizable background and bar colors.

Built with blockbuilder.org
forked from sjesupaul's block: PaintClassifer Bar Chart

  
## data.tsv

          
            style
            score

            
              Abstract Expressionism 
              .08167

            
              Baroque
              .01492

            
              Constructivism
              .02782

            
              Cubism
              .04253

            
              Impressionism
              .12702

            
              Neoclassical
              .02288

            
              Pop Art
              .02015

            
              Post Impressionism
              .06094

            
              Realism
              .06966

            
              Renaissance
              .00153

            
              Romanticism
              .00772

            
              Surrealism
              .04025

            
              Symbolism
              .02406

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body{
  background-color:black;
  fill:white;
  }
.bar {
  fill: #00A0B0;
}

.bar:hover {
  fill: #00A0B0;
  opacity: 0.45;
}

.axis--x path {
  display: none;
}

    .toolTip {
/*         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
        position: absolute;
        display: none;
        width: auto;
        height: auto;
        background: none repeat scroll 0 0 white;
        border: 0 none;
        border-radius: 8px 8px 8px 8px;
        box-shadow: -3px 3px 15px #888888;
        color: black;
        font: 12px sans-serif;
        padding: 5px;
        text-align: center;
    }
</style>
<body>
<svg width="1000" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

  var data = {"style":"abstract-expressionism"}
  var svg = d3.select("svg"),
      margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom;

  var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
      y = d3.scaleLinear().rangeRound([height, 0]);

  var g = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  		.style("stroke", "white");

  var tooltip = g.append("text")
		.attr("class", "tooltip")
		.style("opacity", 0);

      var div = d3.select("body").append("div").attr("class", "toolTip");

  d3.tsv("data.tsv", function(d) {
     d.score = +d.score;
    return d;
  }, function(error, data) {
    if (error) throw error;

    x.domain(data.map(function(d) { return d.style; }));
    y.domain([0, d3.max(data, function(d) { return d.score; })]);

    g.append("g")
        .attr("class", "axis axis--x")
    		.attr("transform", "rotate(-90)")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y).ticks(10, "%"))
    		.style("stroke", "white")

      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("Score")
    		.style("stroke", "white");

    g.selectAll(".bar")
      .data(data)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.style); })
        .attr("y", function(d) { return y(d.score); })
        .attr("width", x.bandwidth())
        .attr("height", function(d) { return height - y(d.score); })
      	.on("mousemove", function(d){
                div.style("left", d3.event.pageX+10+"px");
                div.style("top", d3.event.pageY-25+"px");
                div.style("display", "inline-block");
                div.html((Math.round(d.score*100))+"%");
            })
      	.on("mouseout", function(d){
                div.style("display", "none");
         });
  });
</script>

</body>
	style	score
	Abstract Expressionism	.08167
	Baroque	.01492
	Constructivism	.02782
	Cubism	.04253
	Impressionism	.12702
	Neoclassical	.02288
	Pop Art	.02015
	Post Impressionism	.06094
	Realism	.06966
	Renaissance	.00153
	Romanticism	.00772
	Surrealism	.04025
	Symbolism	.02406
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body{
	background-color:black;
	fill:white;
	}
	.bar {
	fill: #00A0B0;
	}

	.bar:hover {
	fill: #00A0B0;
	opacity: 0.45;
	}

	.axis--x path {
	display: none;
	}

	.toolTip {
	/* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
	position: absolute;
	display: none;
	width: auto;
	height: auto;
	background: none repeat scroll 0 0 white;
	border: 0 none;
	border-radius: 8px 8px 8px 8px;
	box-shadow: -3px 3px 15px #888888;
	color: black;
	font: 12px sans-serif;
	padding: 5px;
	text-align: center;
	}
	</style>
	<body>
	<svg width="1000" height="500"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	var data = {"style":"abstract-expressionism"}
	var svg = d3.select("svg"),
	margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom;

	var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
	y = d3.scaleLinear().rangeRound([height, 0]);

	var g = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
	.style("stroke", "white");

	var tooltip = g.append("text")
	.attr("class", "tooltip")
	.style("opacity", 0);

	var div = d3.select("body").append("div").attr("class", "toolTip");

	d3.tsv("data.tsv", function(d) {
	d.score = +d.score;
	return d;
	}, function(error, data) {
	if (error) throw error;

	x.domain(data.map(function(d) { return d.style; }));
	y.domain([0, d3.max(data, function(d) { return d.score; })]);

	g.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "rotate(-90)")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x));

	g.append("g")
	.attr("class", "axis axis--y")
	.call(d3.axisLeft(y).ticks(10, "%"))
	.style("stroke", "white")

	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", "0.71em")
	.attr("text-anchor", "end")
	.text("Score")
	.style("stroke", "white");

	g.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d.style); })
	.attr("y", function(d) { return y(d.score); })
	.attr("width", x.bandwidth())
	.attr("height", function(d) { return height - y(d.score); })
	.on("mousemove", function(d){
	div.style("left", d3.event.pageX+10+"px");
	div.style("top", d3.event.pageY-25+"px");
	div.style("display", "inline-block");
	div.html((Math.round(d.score*100))+"%");
	})
	.on("mouseout", function(d){
	div.style("display", "none");
	});
	});
	</script>

	</body>