Fitts's Bar, I

Typical bar charts have issues with Fitts's law for interactions. That is that the area of the bar prevents the user from easily moving from one bar to the other. Additionally when the bars are at some minimum area (or there is no area), the user may be unable to interact with the data.

This example fixes the available interactive dimension to be the x dimension only. Allowing the interaction area of all bars to be constant. See this in action on the New York Times

See Fitts's Bar, II for another approach.

This is also an example of how to reference two blocks for:

data
imports

It's helpful in that data and common imports (e.g: less.js, topojson, or a specific version of d3) do not have to be redundantly copied per block that is created.

forked from milroc's block: Fitts's Bar, I

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
  
  <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>

<style>
  body {
  position: relative;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #FFF0A5;
  width: 960px;
  color: #8E2800;
}
.axis text {
  font: 10px Helvetica;
  fill: #8E2800;
}
.axis path,
.axis line {
  fill: none;
  stroke: #FFB03B;
  shape-rendering: crispEdges;
}
.bar .display {
  fill: #468966;
}
.bar .interact {
  stroke: #FFB03B;
}
.selected-tooltip {
  fill: #FFF0A5;
  fill-opacity: 0.3;
}
.x .axis path {
  display: none;
}
label {
  position: absolute;
  top: 10px;
  right: 10px;
}
.d3-helper-tooltip {
  background: #FFF0A5;
  opacity: .95;
  padding: 5px 10px;
  border-radius: 2px;
  text-align: center;
}
.d3-helper-tooltip h5 {
  border-bottom: 1px solid #FFB03B;
}

</style>

</head>
  <body>
    <label><input type="checkbox"> Sort values</label>
    
    
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="less.min.js"></script>
    
    <script src="src.js"></script>
  </body>
</html>

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