Skip to content

Instantly share code, notes, and snippets.

@henryjameslau

henryjameslau/child.html

Last active November 21, 2017 06:30
Show Gist options
  • Save henryjameslau/dcc3661ecc4c31067f97416a7800f215 to your computer and use it in GitHub Desktop.
Save henryjameslau/dcc3661ecc4c31067f97416a7800f215 to your computer and use it in GitHub Desktop.
Download ZIP
NPR example responsive chart using pym.js
Raw
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive iFrame Test With Graphic</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="http://media.npr.org/favicon.ico" />
<style type="text/css">
/* base styles */
html { -webkit-text-size-adjust: none; /* prevent font scaling in landscape */ }
body {
margin: 0;
padding: 10px;
background-color: #F7F7F7;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
margin: 0 0 22px 0;
font-size: 14px;
color: #333;
}
h3 {
font-weight: normal;
color: #333;
font-size: 16px;
margin: 0 0 11px 0;
}
a, a:link, a:visited {
color: #4774CC;
text-decoration: none;
}
a:hover, a:active { opacity: 0.7; }
.footnotes { margin-bottom: 20px; }
.footnotes h4 {
margin: 2px 0 7px 0;
color: #666;
font-size: 11px;
}
.footnotes p,
.footer p {
margin: 2px 0 0 0;
font-size: 11px;
line-height: 1.3;
color: #808080;
}
/* chart */
#graphic {
width: 100%;
}
#graphic:before,
#graphic:after {
content: " "; /* 1 */
display: table; /* 2 */
}
#graphic:after { clear: both; }
#graphic img {
max-width: 100%;
height: auto;
}
#graphic svg {
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 1em;
}
#graphic .axis {
font-size: 12px;
fill: #666;
}
#graphic .axis path,
#graphic .axis line {
fill: none;
stroke: #666;
shape-rendering: crispEdges;
}
#graphic .axis.y path { display: none; }
#graphic .axis.y .tick line { display: none; }
#graphic .grid path { display: none; }
#graphic .grid .tick {
stroke: #ccc;
stroke-dasharray: 1px 3px;
stroke-width: 1px;
shape-rendering: crispEdges;
}
#graphic .line {
fill: none;
stroke-width: 3px;
}
#graphic .bars rect { fill: #17807E; }
#graphic .label text,
#graphic .value text {
font-weight: normal;
font-size: 12px;
fill: #333;
text-align: right;
}
#graphic .value text {
fill: #fff;
font-size: 11px;
}
#graphic .key {
font-family: Arial, Helvetica, sans-serif;
margin: 0 0 1em 0;
padding: 0;
list-style-type: none;
}
#graphic .key .key-item {
display: inline-block;
margin: 0 18px 0 0;
padding: 0;
line-height: 15px;
}
#graphic .key .key-item b {
display: inline-block;
width: 15px;
height: 15px;
margin-right: 6px;
float: left;
}
#graphic .key .key-item label {
white-space: nowrap;
font-size: 12px;
color: #333;
font-weight: normal;
}
.line-0 { stroke: #11605E; }
.line-1 { stroke: #8BC0BF; }
.key-0 b { background-color: #11605E; }
.key-1 b { background-color: #8BC0BF; }
</style>
</head>
<body>
<h1>Retail employment, in millions (2008-2014)</h1>
<div id="graphic"><img src="fallback.png" alt="[Chart]" /></div>
<div class="footnotes">
<h4>Note</h4>
<p>Figures for February and March 2014 are preliminary.</p>
</div>
<div class="footer">
<p>Source: Bureau of Labor Statistics</p>
<p>Credit: NPR</p>
</div>
<script src="js/lib/jquery.js" type="text/javascript"></script>
<script src="js/lib/d3.v3.min.js" type="text/javascript"></script>
<script src="js/lib/modernizr.svg.min.js" type="text/javascript"></script>
<script src="js/graphic.js" type="text/javascript"></script>
</body>
</html>
Raw
data.csv
date jobs
2008-01 15570.3
2008-02 15527.9
2008-03 15506.2
2008-04 15428.9
2008-05 15379.3
2008-06 15334.5
2008-07 15298.8
2008-08 15245.0
2008-09 15172.0
2008-10 15102.9
2008-11 14980.7
2008-12 14869.9
2009-01 14783.0
2009-02 14714.5
2009-03 14617.7
2009-04 14549.0
2009-05 14553.9
2009-06 14536.8
2009-07 14495.2
2009-08 14479.1
2009-09 14447.2
2009-10 14386.7
2009-11 14372.7
2009-12 14324.5
2010-01 14381.2
2010-02 14394.2
2010-03 14419.9
2010-04 14414.4
2010-05 14436.8
2010-06 14436.1
2010-07 14454.1
2010-08 14451.0
2010-09 14472.0
2010-10 14499.7
2010-11 14481.2
2010-12 14483.9
2011-01 14538.4
2011-02 14554.5
2011-03 14567.3
2011-04 14631.6
2011-05 14643.4
2011-06 14679.3
2011-07 14713.5
2011-08 14709.9
2011-09 14735.5
2011-10 14738.3
2011-11 14756.9
2011-12 14761.9
2012-01 14818.1
2012-02 14803.0
2012-03 14808.3
2012-04 14832.7
2012-05 14827.4
2012-06 14813.7
2012-07 14802.0
2012-08 14802.1
2012-09 14833.5
2012-10 14860.9
2012-11 14915.4
2012-12 14916.6
2013-01 14943.5
2013-02 14953.1
2013-03 14944.4
2013-04 14967.0
2013-05 15001.7
2013-06 15040.4
2013-07 15088.8
2013-08 15118.2
2013-09 15145.5
2013-10 15187.4
2013-11 15209.7
2013-12 15261.7
2014-01 15240.2
2014-02 15238.3
2014-03 15259.6
Raw
graphic.js
var $graphic = $('#graphic');
var graphic_data_url = 'data.csv';
var graphic_data;
var graphic_aspect_width = 16;
var graphic_aspect_height = 9;
var mobile_threshold = 500;
function drawGraphic() {
var margin = { top: 10, right: 15, bottom: 25, left: 35 };
var width = $graphic.width() - margin.left - margin.right;
var height = Math.ceil((width * graphic_aspect_height) / graphic_aspect_width) - margin.top - margin.bottom;
var num_ticks = 13;
if ($graphic.width() < mobile_threshold) {
num_ticks = 5;
}
// clear out existing graphics
$graphic.empty();
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.tickFormat(function(d,i) {
if (width <= mobile_threshold) {
var fmt = d3.time.format('%y');
return '\u2019' + fmt(d);
} else {
var fmt = d3.time.format('%Y');
return fmt(d);
}
});
var x_axis_grid = function() { return xAxis; }
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.ticks(num_ticks);
var y_axis_grid = function() { return yAxis; }
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.amt); });
// parse data into columns
var lines = {};
for (var column in graphic_data[0]) {
if (column == 'date') continue;
lines[column] = graphic_data.map(function(d) {
return {
'date': d.date,
'amt': d[column]
};
});
}
var svg = d3.select('#graphic').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 + ')');
x.domain(d3.extent(graphic_data, function(d) { return d.date; }));
y.domain([
d3.min(d3.entries(lines), function(c) {
return d3.min(c.value, function(v) {
var n = v.amt;
return Math.floor(n);
});
}),
d3.max(d3.entries(lines), function(c) {
return d3.max(c.value, function(v) {
var n = v.amt;
return Math.ceil(n);
});
})
]);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.call(yAxis);
svg.append('g')
.attr('class', 'x grid')
.attr('transform', 'translate(0,' + height + ')')
.call(x_axis_grid()
.tickSize(-height, 0, 0)
.tickFormat('')
);
svg.append('g')
.attr('class', 'y grid')
.call(y_axis_grid()
.tickSize(-width, 0, 0)
.tickFormat('')
);
svg.append('g').selectAll('path')
.data(d3.entries(lines))
.enter()
.append('path')
.attr('class', function(d, i) {
return 'line line-' + i;
})
.attr('d', function(d) {
return line(d.value);
});
}
$(window).load(function() {
if (Modernizr.svg) { // if svg is supported, draw dynamic chart
d3.csv(graphic_data_url, function(error, data) {
graphic_data = data;
graphic_data.forEach(function(d) {
d.date = d3.time.format('%Y-%m').parse(d.date);
d.jobs = d.jobs / 1000;
});
drawGraphic();
window.onresize = drawGraphic;
});
}
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive iFrame Test With Graphic</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="http://media.npr.org/favicon.ico" />
<style type="text/css">
/* base styles */
html { -webkit-text-size-adjust: none; /* prevent font scaling in landscape */ }
body {
margin: 0;
padding: 10px;
background-color: #F7F7F7;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
margin: 0 0 22px 0;
font-size: 14px;
color: #333;
}
h3 {
font-weight: normal;
color: #333;
font-size: 16px;
margin: 0 0 11px 0;
}
a, a:link, a:visited {
color: #4774CC;
text-decoration: none;
}
a:hover, a:active { opacity: 0.7; }
.footnotes { margin-bottom: 20px; }
.footnotes h4 {
margin: 2px 0 7px 0;
color: #666;
font-size: 11px;
}
.footnotes p,
.footer p {
margin: 2px 0 0 0;
font-size: 11px;
line-height: 1.3;
color: #808080;
}
/* chart */
#graphic { width: 100%; }
#graphic img {
max-width: 100%;
height: auto;
}
#graphic svg { margin-bottom: 1em; }
#graphic .axis {
font-size: 12px;
fill: #666;
}
#graphic .axis path,
#graphic .axis line {
fill: none;
stroke: #666;
shape-rendering: crispEdges;
}
#graphic .axis.y path { display: none; }
#graphic .axis.y .tick line { display: none; }
#graphic .grid path { display: none; }
#graphic .grid .tick {
stroke: #ccc;
stroke-dasharray: 1px 3px;
stroke-width: 1px;
shape-rendering: crispEdges;
}
#graphic .line {
fill: none;
stroke-width: 3px;
stroke: #11605E;
}
</style>
</head>
<body>
<h1>Retail employment, in millions (2008-2014)</h1>
<div id="graphic"><img src="fallback.png" alt="[Chart]" /></div>
<div class="footnotes">
<h4>Note</h4>
<p>Figures for February and March 2014 are preliminary.</p>
</div>
<div class="footer">
<p>Source: Bureau of Labor Statistics</p>
<p>Credit: NPR</p>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script src="modernizr.svg.min.js" type="text/javascript"></script>
<script src="graphic.js" type="text/javascript"></script>
</body>
</html>
Raw
modernizr.svg.min.js
/* Modernizr 2.7.1 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-svg
*/
;window.Modernizr=function(a,b,c){function u(a){i.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.7.1",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l={svg:"http://www.w3.org/2000/svg"},m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e}),m.svg=function(){return!!b.createElementNS&&!!b.createElementNS(l.svg,"svg").createSVGRect};for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)t(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},u(""),h=j=null,e._version=d,e}(this,this.document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment