Skip to content

Instantly share code, notes, and snippets.

@jadiehm

jadiehm/index.html

Last active October 10, 2018 21:28
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jadiehm/83e45c403f03206eed192fdbd6b533fc to your computer and use it in GitHub Desktop.
Save jadiehm/83e45c403f03206eed192fdbd6b533fc to your computer and use it in GitHub Desktop.
Download ZIP
Strip or barcode plot
Raw
index.html
<!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>
Raw
trump_percent.csv
state trump_percent
Alabama 62.1
Alaska 51.3
Arizona 48.7
Arkansas 60.6
California 31.6
Colorado 43.3
Connecticut 40.9
Delaware 41.9
District of Columbia 4.1
Florida 49
Georgia 51
Hawaii 30
Idaho 59.3
Illinois 38.8
Indiana 56.9
Iowa 51.1
Kansas 56.7
Kentucky 62.5
Louisiana 58.1
Maine 44.9
Maryland 33.9
Massachusetts 32.8
Michigan 47.5
Minnesota 44.9
Mississippi 57.9
Missouri 56.8
Montana 56.2
Nebraska 58.7
Nevada 45.5
New Hampshire 46.5
New Jersey 41.4
New Mexico 40
New York 36.5
North Carolina 49.8
North Dakota 63
Ohio 51.7
Oklahoma 65.3
Oregon 39.1
Pennsylvania 48.6
Rhode Island 38.9
South Carolina 54.9
South Dakota 61.5
Tennessee 60.7
Texas 52.2
Utah 45.5
Vermont 30.3
Virginia 44.4
Washington 36.3
West Virginia 68.6
Wisconsin 47.2
Wyoming 68.2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment