5. hover barChart

Built with blockbuilder.org

forked from EmbraceLife's block: 4. barChart3.b.v3

forked from EmbraceLife's block: 4. barChart3.b.v4

forked from EmbraceLife's block: 4. barChart3.c.v3

forked from EmbraceLife's block: 4. barChart3.c.v4

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v4.min.js"></script>

<style>

/* must: rect:hover, without space */
.bar rect:hover {
  fill: brown;
}

.bar rect {
    fill: gray;
  }
  
.bar text {
    fill: green;
  }
  
.axis {
  font: 10px sans-serif;
}

.axis text {
  fill: cyan;
}
  
/*  path here is axis line  */
.axis path {
	fill: none;  
  stroke: yellow;
}
  
/*  line here is tick line  */
.axis line {
  stroke: red;
  shape-rendering: crispEdges;
}

/*  specify x-axis  */
.x.axis path {
/* make it invisible   */
  display: none;
}

</style>
<body>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// ---- create a svg upon body --------------
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// SVG with full width&height => g at topLeft corner of inner canvas => var svg

var yScale = d3.scaleLinear()
    .range([height, 0]);

var xScale = d3.scaleBand()
    .rangeRound([0, width]).padding(.2);

var xAxis = d3.axisBottom(xScale);

var yAxis = d3.axisLeft(yScale)
// create 10 ticks with % as post fix
    					.ticks(10,"%");

function type(d) {
  d.frequency = +d.frequency;
  return d;
}

d3.tsv("data.tsv", type, function(error, data) {
  if (error) throw error;

xScale.domain(data.map(function(d) { return d.letter; }));

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

var xaxis=  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

var yaxis =  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)

// ---- add label to y-axis
var ylabel = yaxis
              .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("fill", "red")
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Frequency");

// ----  select all existing g placeholders for holding rects and texts ----
//   1. as placeholders for x-axis and y-axis and inner canvas are all g
//   2. therefore, we can't selectAll("g") for making rects and text
//   3. so, selectAll only g with className "bar"
//   4. if not exist, then create g placeholders and name them "bar"
var bars = svg.selectAll(".bar").data(data)
							.enter().append("g")
							.attr("class", "bar")
							.attr("transform", function(d) { return "translate(" + xScale(d.letter) + ", " + yScale(d.frequency) + ")"; });

var rects = bars.append("rect")
// ---- add a className for easy selecting 
								  .attr("class", "bar")
									.attr("width", xScale.bandwidth())
									.attr("height", function(d){return height-yScale(d.frequency);})
									.attr("fill", "steelblue");
  
  
var texts = bars.append("text")
									.attr("class", "bar")
									.text(function(d){return d.letter;})
									.attr("x", xScale.bandwidth()/2)
									.attr("y", -3)
									.attr("dy", "-0.1em")// trial error
									.attr("fill", "orange")
									.attr("text-anchor", "middle");

})

</script>

https://d3js.org/d3.v4.min.js