Last active
October 10, 2018 21:28
-
-
Save jadiehm/83e45c403f03206eed192fdbd6b533fc to your computer and use it in GitHub Desktop.
Strip or barcode plot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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