Strip or barcode plot

<!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>

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>

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