Skip to content

Instantly share code, notes, and snippets.

@unamandita

unamandita/birthCost_styles.css

Created March 15, 2017 16:41
Show Gist options
  • Save unamandita/95b8e27aca0f3316bf303352118d34ee to your computer and use it in GitHub Desktop.
Save unamandita/95b8e27aca0f3316bf303352118d34ee to your computer and use it in GitHub Desktop.
Download ZIP
Raw
birthCost_styles.css
@font-face {
font-family: Brunel;
src: url('fonts/Brunel Deck-Semibold.otf') format("opentype");
}
/* Mobile Layout: Max 480px. */
@media only screen and (max-width: 480px){
#desktop {
display: none;
}
#mobile {
display: block;
background-color: #f4f4f4;
height: 835px;
width: 260px;
}
body {
background-color: white;
}
.headline{
background-color: #e5e5e5;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
width: 230px;
line-height: 1em;
}
h1 {
font-family: Brunel, serif;
font-size: 18px;
font-weight: lighter;
text-align: center;
}
h2 {
font-family: Arial, sans-serif;
font-size: 12px;
/*padding-top: 5px;*/
font-weight: lighter;
text-align: left;
background-color: #e5e5e5;
line-height: 1.5em;
}
#container1m {
position: absolute;
margin-top: 15px;
margin-left: 15px;
font-family: Arial, sans-serif;
font-size: 10px;
}
.axis text {
font: 10px sans-serif;
}
.menu{
font-size: 10px;
}
.axisLabel text{
font-weight: bold;
}
.labels{
position: absolute;
width: 260px;
margin-top: 16px;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
div.tooltip {
position: absolute;
text-align: center;
padding: 5px;
font: 10px sans-serif;
background: white;
border: 0px;
/*border-radius: 6px;*/
pointer-events: none;
}
}
/* Desktop Layout: 481px and up. */
@media only screen and (min-width: 481px){
#desktop {
display: block;
background-color: #f4f4f4;
height: 760px;
width: 570px;
}
#mobile {
display: none;
}
body {
background-color: white;
}
.headline{
background-color: #e5e5e5;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
width: 530px;
line-height: 1em;
}
h1 {
font-family: Brunel, serif;
font-size: 24px;
font-weight: lighter;
text-align: center;
}
h2 {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: lighter;
text-align: left;
background-color: #e5e5e5;
line-height: 1.5em;
}
#container1 {
width: 570px;
position: absolute;
margin-top: 20px;
margin-left: 20px;
font-family: Arial, sans-serif;
font-size: 12px;
}
.axis text {
font: 12px sans-serif;
}
.axisLabel text{
font-weight: bold;
}
.labels{
position: absolute;
width: 570px;
height: 420px;
margin-top: 23px;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
}
Raw
birthCostsByState.csv
id year Metro775charge Metro775cost Metro774charge Metro774cost Metro766charge Metro766cost Metro765charge Metro765cost NonMetro775charge NonMetro775cost NonMetro774charge NonMetro774cost NonMetro766charge NonMetro766cost NonMetro765charge NonMetro765cost
Arizona 2013 11277 2767 13530 3367 19758 4736 23904 5746 8908 3369 10627 4048 18686 6617 19734 7351
Arkansas 2013 9837 2555 10696 2969 15229 3782 16582 4416 7800 2599 9112 3050 12671 4660 15032 5491
California 2013 16789 3689 14826 5141 28950 6136 35803 7863 11949 4079 14826 5141 27998 9941 31991 11293
Colorado 2013 11844 2783 14123 3374 20418 4675 25221 5739 8649 4055 10341 4876 17092 8526 19964 9314
Florida 2013 12801 2547 10887 2471 22878 4599 27041 5617 9895 2205 10887 2471 17494 4429 17693 4863
Hawaii 2013 9517 0 11874 0 17860 0 21710 0 8906 0 11308 0 11339 0 13209 0
Illinois 2013 11534 0 14411 0 18888 0 22754 0 7775 0 9334 0 15615 0 17185 0
Indiana 2013 10314 0 12507 0 18046 0 21045 0 7545 0 8751 0 14616 0 16406 0
Iowa 2013 8255 2537 10025 3253 14893 4574 17784 5515 5694 3419 6582 3985 12342 7227 13714 8114
Kansas 2013 12710 0 14826 0 19635 0 22773 0 6987 0 7763 0 11763 0 13028 0
Kentucky 2013 8176 2493 9804 2871 12842 4083 15709 4705 7256 2475 7503 2557 11823 4059 12641 4172
Maine 2012 6570 0 8043 12844 0 15465 0 5338 0 6123 0 13867 0 14609 0
Maryland 2013 6026 4624 6845 5203 6712 5110 8242 6223 5969 4435 6074 4626 7308 5427 8583 6276
Massachusetts 2013 8897 4628 10720 5506 11971 6432 15815 8005 7093 10057 8484 12030 24224 34347 18795 26649
Michigan 2013 8863 0 10507 0 13439 0 15602 0 6551 0 7968 0 11460 0 12700 0
Minnesota 2013 9436 0 11497 0 17653 0 20357 0 7520 0 8857 0 13480 0 15109 0
Missouri 2013 9923 0 12205 0 13964 0 17538 0 8827 0 10167 0 16116 0 19685 0
Nebraska 2013 7154 0 8762 0 16270 0 19831 0 5822 0 7172 0 10533 0 12618 0
Nevada 2013 13786 2210 14879 2503 24448 3756 28601 4401 10982 3564 11197 3611 16545 5541 18770 6500
New Hampshire 2009 6140 0 7212 0 10371 0 11645 0 6930 0 8514 0 10351 0 12818 0
New Jersey 2013 20848 3591 23353 4082 31008 5366 35580 6171 20848 3591 23353 4082 31008 5366 35580 6171
New Mexico 2013 16032 0 19429 0 31054 0 35561 0 17242 0 18809 0 30582 0 32775 0
New York 2013 12161 3759 13660 4307 18391 5809 22103 6761 5368 2947 6126 3442 9024 5192 9910 5766
North Carolina 2013 8470 2924 10288 3535 14967 5173 18238 6327 7316 2739 8470 3180 13598 5198 15277 5823
North Dakota 2013 5538 0 6466 0 10219 0 11583 0 5469 0 6295 0 10601 0 12112 0
Oklahoma 2013 8797 0 11470 0 14554 0 17290 0 7568 0 8905 0 12690 0 14440 0
Oregon 2013 9036 4149 10611 4922 17206 7725 20435 9220 7896 3978 9899 4503 16297 8411 18375 8995
Rhode Island 2013 14729 6318 17361 7438 19055 8293 22399 9860 14729 6318 17361 7438 19055 8293 22399 9860
South Carolina 2013 10567 0 12522 0 18947 0 21627 0 9587 0 11695 0 19466 0 21230 0
Tennessee 2013 9317 0 10894 0 14671 0 17463 0 6510 0 7289 0 11687 0 11373 0
Texas 2013 11164 0 13243 0 17659 0 20682 0 9594 0 12472 0 15978 0 18425 0
Utah 2013 7128 2675 8520 3336 11238 4275 13306 5119 5403 3044 6415 3537 11418 5368 13690 6461
Vermont 2013 7328 4018 8670 4712 11788 6718 14522 7881 7741 4827 8533 5230 14642 9315 15819 9781
Washington 2013 10679 3377 13121 4157 18936 6054 23056 7611 8167 4110 9109 4882 15617 7992 19677 9783
West Virginia 2013 8372 3272 9645 3701 10409 3952 12734 4941 5297 2262 6526 2634 11261 4954 12459 5251
Wisconsin 2013 8031 3131 9949 3897 15004 5875 17937 7065 6348 3558 7323 4325 14273 8001 15511 8803
Wyoming 2013 5714 0 6987 0 11990 0 13167 0 7580 0 9596 0 15209 0 16300 0
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Birth Costs in the US</title>
<link href="birthCost_styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
</head>
<body style = "margin:0px" !important;>
<!-- MOBILE -->
<div id = "mobile">
<div class="headline">
<h1><strong>Birth Costs Head TK</strong></h1>
<svg class="dottedLine" width="325" height="5">
<line x1="85" x2="135" y1="1" y2="1" stroke="black" stroke-width="2" stroke-dasharray="2, 2" />
</svg>
<h2>Intro text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at porta orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante nec nisi eleifend venenatis. Maecenas tempus feugiat facilisis. Sed ultrices, eros vel pulvinar fermentum, elit magna tristique magna, id accumsan massa nisl in ante. Sed condimentum orci eget massa vestibulum, non vulputate justo auctor.</h2>
</div>
<div class = "labels"><img src="yAxis+legend_mobile.svg"></div>
<div id = "container1m">
<span style = "font-family: Arial, sans-serif; font-size: 10px">Choose your state:</span>
<script type="text/javascript">
var dispatch2 = d3.dispatch("load", "statechange");
var groups2 = [
"Metro775charge",
"Metro775cost",
"Metro774charge",
"Metro774cost",
"Metro766charge",
"Metro766cost",
"Metro765charge",
"Metro765cost",
"NonMetro775charge",
"NonMetro775cost",
"NonMetro774charge",
"NonMetro774cost",
"NonMetro766charge",
"NonMetro766cost",
"NonMetro765charge",
"NonMetro765cost"
];
var positions2 = [5, 25, 55, 75, 105, 125, 155, 175, 215, 235, 265, 285, 315, 335, 365, 385];
d3.csv("birthCostsByState.csv", function(error, states) {
if (error) throw error;
var stateById2 = d3.map();
states.forEach(function(d) { stateById2.set(d.id, d); });
dispatch2.load(stateById2);
dispatch2.statechange(stateById2.get("New York"));
});
// A drop-down menu for selecting a state; uses the "menu" namespace.
dispatch2.on("load.menu", function(stateById2) {
var select2 = d3.select("#container1m")
.append("div")
.append("select")
.on("change", function() { dispatch2.statechange(stateById2.get(this.value)); });
select2.selectAll("option")
.data(stateById2.values())
.enter().append("option")
.attr("value", function(d) { return d.id; })
.text(function(d) { return d.id; });
dispatch2.on("statechange.menu", function(state) {
select2.property("value", state.id);
});
});
// A bar chart to show costs by state; uses the "bar" namespace.
dispatch2.on("load.bar", function(stateById2) {
var w2 = 240;
var h2 = 500;
var padding2 = [ 20, 20, 20, 50 ]; //Top, right, bottom, left
var widthScale2 = d3.scale.linear()
.range([ 0, w2 - padding2[1] - padding2[3] ]);
widthScale2.domain([0, 40000]);
var heightScale2 = d3.scale.ordinal()
.rangeRoundBands([ padding2[0], h2 - padding2[2] ], 0.5);
var svg2 = d3.select("#container1m")
.append("svg")
.attr("width", w2)
.attr("height", h2)
.append("g")
.attr("class", "bar")
.attr("transform", "translate(" + 0 + "," + 80 + ")");
var color = d3.scale.ordinal()
.domain(groups)
.range(["#046faf", "#73a8ce", "#5d3b98", "#b1aad1", "#c41a7c", "#e8a2c8", "#e24932", "#fcba83", "#046faf", "#73a8ce", "#5d3b98", "#b1aad1", "#c41a7c", "#e8a2c8", "#e24932", "#fcba83"]);
var x2 = d3.scale.linear()
.domain([0, 40000])
.range ([ 0, w2 - padding2[1] - padding2[3] ])
.nice();
var xAxis2 = d3.svg.axis()
.scale(x2)
.orient("top")
.ticks(5);
var yAxis2 = d3.svg.axis()
.scale(heightScale2)
.orient("left");
var div2 = d3.select("#mobile").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var rects2 = svg2.selectAll("rect")
.data(positions2)
.enter().append("rect")
.style("fill", color)
.attr("height", 18)
.attr("width", 0)
.attr("x", padding2[3])
.attr("y", function(d){
return d;
});
dispatch2.on("statechange.bar", function(d){
rects2.data(groups).transition()
.attr("width", function(g){
return widthScale2(d[g]);
})
});
svg2.append("g")
.attr("class", "x axis")
// .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.attr("transform", "translate(" + padding2[3] + "," + 0 + ")")
.call(xAxis2)
.append("text")
.attr("x", 0)
.attr("y", -25)
// .attr("dy", ".71em")
.style("text-anchor", "left")
.text("Dollars");
});
</script>
</div>
<!-- end container1m -->
</div>
<!-- end mobile -->
<!-- DESKTOP -->
<div id = "desktop">
<div class="headline">
<h1><strong>Birth Costs Head TK</strong></h1>
<svg class="dottedLine" width="325" height="4">
<line x1="230" x2="300" y1="1" y2="1" stroke="black" stroke-width="2" stroke-dasharray="2, 2" />
</svg>
<p>
<h2>Intro text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at porta orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante nec nisi eleifend venenatis. Maecenas tempus feugiat facilisis. Sed ultrices, eros vel pulvinar fermentum, elit magna tristique magna, id accumsan massa nisl in ante. Sed condimentum orci eget massa vestibulum, non vulputate justo auctor.</h2>
</div>
<div class = "labels"><img src="yAxis+legend.svg"></div>
<div id = "container1">
<span style = "font-family: Arial, sans-serif; font-size: 12px">Choose your state:</span>
<script type="text/javascript">
var dispatch = d3.dispatch("load", "statechange");
var groups = [
"Metro775charge",
"Metro775cost",
"Metro774charge",
"Metro774cost",
"Metro766charge",
"Metro766cost",
"Metro765charge",
"Metro765cost",
"NonMetro775charge",
"NonMetro775cost",
"NonMetro774charge",
"NonMetro774cost",
"NonMetro766charge",
"NonMetro766cost",
"NonMetro765charge",
"NonMetro765cost"
];
var positions = [5, 25, 55, 75, 105, 125, 155, 175, 215, 235, 265, 285, 315, 335, 365, 385];
d3.csv("birthCostsByState.csv", function(error, states) {
if (error) throw error;
var stateById = d3.map();
states.forEach(function(d) { stateById.set(d.id, d); });
dispatch.load(stateById);
dispatch.statechange(stateById.get("New York"));
});
// A drop-down menu for selecting a state; uses the "menu" namespace.
dispatch.on("load.menu", function(stateById) {
var select = d3.select("#container1")
.append("div")
.append("select")
.on("change", function() { dispatch.statechange(stateById.get(this.value)); });
select.selectAll("option")
.data(stateById.values())
.enter().append("option")
.attr("value", function(d) { return d.id; })
.text(function(d) { return d.id; });
dispatch.on("statechange.menu", function(state) {
select.property("value", state.id);
});
});
// A bar chart to show costs by state; uses the "bar" namespace.
dispatch.on("load.bar", function(stateById) {
var w = 530;
var h = 500;
var padding = [ 20, 20, 20, 125 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
widthScale.domain([0, 40000]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.5);
var svg = d3.select("#container1")
.append("svg")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("class", "bar")
.attr("transform", "translate(" + 0 + "," + 65 + ")");
var color = d3.scale.ordinal()
.domain(groups)
.range(["#046faf", "#73a8ce", "#5d3b98", "#b1aad1", "#c41a7c", "#e8a2c8", "#e24932", "#fcba83", "#046faf", "#73a8ce", "#5d3b98", "#b1aad1", "#c41a7c", "#e8a2c8", "#e24932", "#fcba83"]);
var x = d3.scale.linear()
.domain([0, 40000])
.range ([ 0, w - padding[1] - padding[3] ])
.nice();
var xAxis = d3.svg.axis()
.scale(x)
.orient("top");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var div = d3.select("#desktop").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var rects = svg.selectAll("rect")
.data(positions)
.enter().append("rect")
.style("fill", color)
.attr("height", 18)
.attr("width", 0)
.attr("x", padding[3])
.attr("y", function(d){
return d;
});
// TOOLTIPS???
rects.on("mouseover", function(d){
div.transition()
.duration(200)
.style("opacity", 1)
div.html("<strong>" + d + "</strong>")
})
.on("mouseout", function(d){
div.transition()
.duration(500)
.style("opacity", 0);
});
// END TOOLTIPS
dispatch.on("statechange.bar", function(d){
rects.data(groups).transition()
.attr("width", function(g){
return widthScale(d[g]);
})
});
svg.append("g")
.attr("class", "x axis")
// .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.attr("transform", "translate(" + padding[3] + "," + 0 + ")")
.call(xAxis)
.append("text")
.attr("x", 192)
.attr("y", -25)
// .attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Dollars");
});
</script>
</div>
<!-- end container1 -->
</div>
<!-- end desktop -->
</body>
Display the source blob
Display the rendered blob
Raw
yAxis+legend.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
yAxis+legend_mobile.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment