D3 Examples - Strip or barcode plot

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
/*chart styles*/
  body {
    font-family: sans-serif;
    margin: 0;
  }
​
  .y.axis line {
    fill: none;
    stroke: #990000;
    shape-rendering: crispEdges;
    stroke-width: 1px;
  }
​
  .x.axis line {
    display: none;
  }
​
.tick.g-baseline line {
    stroke: #990000;
    stroke-dasharray: 0;
    stroke-width: 2px;
} 
​
  .axis text {
    font-family: sans-serif;
    font-size: 12px;
    pointer-events: none;
    fill: #a6a6a6;
  }
​
  .y.axis text {
    text-anchor: start !important;
    font-size: 12px;
    fill: #e6e6e6;
  }
​
  .domain {
    display: none;
  }
​
  .line {
    stroke: #262626;
    stroke-width: 2px;
    fill: none;
  }
​
  .area {
    fill: #f2f2f2;
    opacity: 0.4;
  }
​
  .g-label-text {
    font-family: sans-serif;
    font-size: 14px;
  }
​
  .g-label-circle {
    fill: #4bc6df;
  }
​
  .micro-content {
    padding: 15px;
  }
​
  .mc-kicker {
    color: #a6a6a6;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0;
  }
​
  .bolded {
    font-weight: 500;
    color: #262626;
  }
​
  .mc-head {
    color: #262626;
    font-size: 24px;
    font-weight: 300;
    margin: 0 0 10px 0;
  }
  div.tooltip {   
      position: absolute;           
      text-align: left;                                       
      font-family: sans-serif;
      font-size: 14px;
      pointer-events: none;   
      color: #a6a6a6;    
  }
</style>
​
<body>
  <div class="micro-content">
    <div class="g-chart"></div>
  </div>  
</body>
​
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<script>
//Margin conventions
var margin = {top: 0, right: 0, bottom: 30, left: 0};
​
var constWidth = d3.select(".g-chart").node().clientWidth;
​
var width = constWidth - margin.left - margin.right,
    height = 125 - margin.top - margin.bottom;
​
//Appends the svg to the chart-container div
var svg = d3.select(".g-chart").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 + ")");
​
var div = d3.select(".g-chart").append("div")   
      .attr("class", "tooltip")               
      .style("opacity", 0);   
​
//Creates the xScale 
var xScale = d3.scaleTime()
  .range([0, width]);
​
//Creates the yScale
var yScale = d3.scaleLinear()
  .range([height, 0]);  
​
//Defines the y axis styles`
var xAxis = d3.axisBottom()
  .scale(xScale)
  .tickPadding(8)
  .ticks(8)
  .tickFormat(function(d) { return d * 1 + "%"}) 
​
//Loads the data
d3.csv("trump_percent.csv", ready);
​
function ready(err, data) {
​
  if (err) throw "error loading data";
​
  //FORMAT data
  data.forEach(function(d) {
    d.trump_percent = +d.trump_percent;
  });
  
  //Organizes the data  
  var maxX = d3.max(data, function(d) { return d.trump_percent; });
​
  //Defines the xScale max
  xScale.domain(d3.extent(data, function(d) { return d.trump_percent; }));
​
  //Defines the yScale max
  yScale.domain([0, 100]);  
​
  //Appends the x axis    
  var xAxisGroup = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);  
​
  //Binds data to strips
  var drawstrips = svg.selectAll("line.percent")
    .data(data)
    .enter()
    .append("line")
    .attr("class", "percentline")
    .attr("x1", function(d,i) { return xScale(d.trump_percent); }) 
    .attr("x2", function(d) { return xScale(d.trump_percent); })  
    .attr("y1", 50)
    .attr("y2", 100)
    .style("stroke", "#cc0000")
    .style("stroke-width", 2)
    .style("opacity", 0.4)
    .on("mouseover", function(d) {
      var right = d3.event.pageX > window.innerWidth / 2;
​
      d3.select(this)
        .transition().duration(100)
        .attr("y1", 0)
        .style("stroke-width", 3)
        .style("opacity", 1);
​
      div.transition(300)
        .style("opacity", 1)
      div.html("<span class='bolded'>" + d.state + ": </span>" + d.trump_percent + "%")
      
      var offset = right ? div.node().offsetWidth + 5 : -5;
​
      div
        .style("left", (d3.event.pageX - offset) + "px")
        .style("top", (height - 80) + "px")    
    })
    .on("mouseout", function(d) {
      d3.select(this)
        .transition().duration(100)
        .attr("y1", 50)
        .style("stroke-width", 2)
        .style("opacity", 0.4);
​
      div.transition(300)
        .style("opacity", 0)  
    })    
​
//RESPONSIVENESS
  d3.select(window).on("resize", resized);
​
  function resized() {
​
    //new margin
    var newMargin = {top: 0, right: 0, bottom: 30, left: 0};
​
    var newconstWidth = d3.select(".g-chart").node().clientWidth;
    var newWidth = newconstWidth - newMargin.left - newMargin.right;
​
    //Change the width of the svg
    d3.select("svg")
      .attr("width", newWidth + newMargin.left + newMargin.right)
​
    //Change the xScale
    xScale
      .range([0, newWidth]); 
​
    //Updates xAxis
    d3.selectAll(".x.axis")
         .call(xAxis);     
​
    //Updates ticks
    xAxis
      .scale(xScale);  
​
    drawstrips 
      .attr("x1", function(d,i) { return xScale(d.trump_percent); }) 
      .attr("x2", function(d) { return xScale(d.trump_percent); })  
      
    //Updates xAxis
    d3.selectAll(".x.axis")
         .call(xAxis);     
  }
} 
</script>
    