Skip to content

Instantly share code, notes, and snippets.

@jadiehm

jadiehm/index.html

Last active February 25, 2016 20:36
Show Gist options
  • Save jadiehm/7cc6b821d3df14280f33 to your computer and use it in GitHub Desktop.
Save jadiehm/7cc6b821d3df14280f33 to your computer and use it in GitHub Desktop.
Download ZIP
Horizontal 100 percent bar chart red
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<style type="text/css">
/*css to go here*/
body {
font-family: "Proxima-Nova",Arial,Helvetica,sans-serif;
font-size: 12px;
}
.g-hed {
text-align: left;
text-transform: uppercase;
font-weight: bold;
font-size:20px;
margin: 3px 0;
}
.g-source-bold {
text-align: left;
font-size:11px;
font-weight: bold;
color: #333333;
}
.g-source {
margin-bottom: 2px;
font-size:11px;
color: #999999;
}
.g-intro {
font-size: 18px;
margin: 0px 0px 10px 0px;
color: #333333;
}
.g-num {
fill:#c12726;
}
.g-num2 {
fill:#e0e0e0;
}
.g-labels {
font-family: "Proxima-Nova",Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 16px;
}
.x.axis line, .y.axis line {
display: none;
}
.x.axis text {
display: none;
}
.domain {
display: none;
}
.y.axis text {
font-family: 'Proxima-Nova', sans-serif;
font-size: 16px;
font-weight: bold;
text-anchor: end !important;
fill: #c12726;
}
.logo {
border-bottom: 1px solid #c3cddf;
margin-bottom: 15px;
padding-bottom: 5px;
}
.logoImg {
width: 185px;
}
.g-chart {
border-bottom: 1px solid #c3cddf;
}
</style>
<body>
<div class="logo">
<img src="http://a.abcnews.com/images/Politics/ExitPollTextV2.png" class="logoImg">
<div class="g-source"><span class="g-source-reg"></span><span class="g-source-bold"></span></div>
</div>
<h5 class="g-hed"></h5>
<p class="g-intro"></p>
<div class="g-chart"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script>
//Margin conventions
var margin = {top: 10, right: 50, bottom: 20, left: 227};
var widther = window.outerWidth;
var width = widther - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var barHeight = 35;
//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 + ")");
//Creates the xScale
var xScale = d3.scale.linear()
.range([0,width]);
//Creates the yScale
var y0 = d3.scale.ordinal()
.rangeBands([height, 0], 0)
.domain(["Honest and Trustworthy", "Experienced", "Cares About People Like Me", "Electable"]);
//Defines the y axis styles
var yAxis = d3.svg.axis()
.scale(y0)
.orient("left");
//Defines the y axis styles
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(function(d) {return d + "%"; })
.tickSize(height);
//Local data
var data=[{"category":"Honest and Trustworthy","num":33, "num2": 100},
{"category":"Experienced","num":27, "num2": 100},
{"category":"Cares About People Like Me","num":26, "num2": 100},
{"category":"Electable","num":12, "num2": 100}];
//Chart headline (question)
var headline = "Nevada Republican Caucuses"
//Chart state description
var stateDescription = "Most Important Quality"
//Timestamp text
var timestampText = "EXIT POLL LATEST AS OF "
//Timestamp time
var timestampTime = "9:05 PM ET"
//Draw the chart
ready(data);
function ready(data) {
//FORMAT data
data.forEach(function(d) {
d.num = +d.num;
d.num2 = +d.num2;
});
//Appends chart headline
d3.select(".g-hed").text(headline);
//Appends chart intro text
d3.select(".g-intro").text(stateDescription);
//Sets the max for the xScale
var maxX = d3.max(data, function(d) { return d.num2; });
//Gets the min for bar labeling
var minX = d3.min(data, function(d) { return d.num; });
//Defines the xScale max
xScale.domain([0, maxX ]);
//Appends the y axis
var yAxisGroup = svg.append("g")
.attr("class", "y axis")
.call(yAxis);
//Appends the x axis
var xAxisGroup = svg.append("g")
.attr("class", "x axis")
.call(xAxis);
//Binds the data to the bars
var categoryGroup = svg.selectAll(".g-category-group")
.data(data)
.enter()
.append("g")
.attr("class", "g-category-group")
.attr("transform", function(d) {
return "translate(0," + y0(d.category) + ")";
});
//Appends background bar
var bars2 = categoryGroup.append("rect")
.attr("width", function(d) { return xScale(d.num2); })
.attr("height", barHeight - 1 )
.attr("class", "g-num2")
.attr("transform", "translate(0,4)");
//Appends main bar
var bars = categoryGroup.append("rect")
.attr("width", function(d) { return xScale(d.num); })
.attr("height", barHeight - 1 )
.attr("class", "g-num")
.attr("transform", "translate(0,4)");
//Binds data to labels
var labelGroup = svg.selectAll("g-num")
.data(data)
.enter()
.append("g")
.attr("class", "g-label-group")
.attr("transform", function(d) {
return "translate(0," + y0(d.category) + ")";
});
//Appends main bar labels
var barLabels = labelGroup.append("text")
.text(function(d) {return d.num + "%";})
.attr("x", function(d) {
if (minX > 32) {
return xScale(d.num) - 37;}
else {
return xScale(d.num) + 6;}})
.style("fill", function(d){
if (minX > 32) {
return "white";}
else {
return "#696969";}})
.attr("y", y0.rangeBand()/1.6 )
.attr("class", "g-labels");
//Appends timestamp text
d3.select(".g-source-reg")
.text(timestampText)
.attr("class", "g-source-reg");
//Appends timestamp time
d3.select(".g-source-bold")
.text(timestampTime)
.attr("class", "g-source-bold");
//RESPONSIVENESS
d3.select(window).on("resize", resized);
function resized() {
//new margin
var newMargin = {top: 10, right: 10, bottom: 20, left: 227};
//Get the width of the window
var w = d3.select(".g-chart").node().clientWidth;
console.log("resized", w);
//Change the width of the svg
d3.select("svg")
.attr("width", w);
//Change the xScale
xScale
.range([0, w - newMargin.right - newMargin.left]);
//Update the bars
bars
.attr("width", function(d) { return xScale(d.num); });
//Update the second bars
bars2
.attr("width", function(d) { return xScale(d.num2); });
//Updates bar labels
barLabels
.attr("x", function(d) {
if (minX > 32) {
return xScale(d.num) - 37;}
else {
return xScale(d.num) + 6;}})
.attr("y", y0.rangeBand()/1.6 )
//Updates xAxis
xAxisGroup
.call(xAxis);
//Updates ticks
xAxis
.scale(xScale)
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment