carlvlewis

license: mit

carlvlewis

Blog : Article Template (Responsive)

Responsive design, based on the Harward Business Review 2015 website design. Using commercially free fonts, icons and library code.

Incorporates some basic responsive design based on device max-width display capabilities.

This template uses 100% width and is intended to fit into a larger website structure that poses limits on max width.

A Pen by Carl V Lewis on CodePen.

carlvlewis

carlvlewis

carlvlewis

<body>
  <div id = 'road'>
    <div id = 'cloud1'></div>
      <div id = 'cloud2'></div>
      <div id = 'cloud3'></div>
      <div id = 'cloud4'></div>
      <div id = 'line'></div>
        <div id = 'tree'></div>   
        <div class = 'bus'>
          <div id = 'up1'></div>

carlvlewis

if(t==e.dx){for((r||f>e.dy)&&(f=e.dy);++u<o;)i=n[u],i.x=a,i.y=c,i.dy=f,a+=i.dx=Math.min(e.x+e.dx-a,f?l(i.area/f):0);i.z=!0,i.dx+=e.x+e.dx-a,e.y+=f,e.dy-=f}else{for((r||f>e.dx)&&(f=e.dx);++u<o;)i=n[u],i.x=a,i.y=c,i.dx=f,c+=i.dy=Math.min(e.y+e.dy-c,f?l(i.area/f):0);i.z=!1,i.dy+=e.y+e.dy-c,e.x+=f,e.dx-=f}}function u(r){var i=o||a(r),u=i[0];return u.x=u.y=0,u.value?(u.dx=c[0],u.dy=c[1]):u.dx=u.dy=0,o&&a.revalue(u),n([u],u.dx*u.dy/u.value),(o?e:t)(u),h&&(o=i),i}var o,a=ao.layout.hierarchy(),l=Math.round,c=[1,1],f=null,s=Oi,h=!1,p="squarify",g=.5*(1+Math.sqrt(5));return u.size=function(n){return arguments.length?(c=n,u):c},u.padding=function(n){function t(t){var e=n.call(u,t,t.depth);return null==e?Oi(t):Ii(t,"number"==typeof e?[e,e,e,e]:e)}function e(t){return Ii(t,n)}if(!arguments.length)return f;var r;return s=null==(f=n)?Oi:"function"==(r=typeof n)?t:"number"===r?(n=[n,n,n,n],e):e,u},u.round=function(n){return arguments.length?(l=n?Math.round:Number,u):l!=Number},u.sticky=function(n){return arguments.length?(h=

carlvlewis

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carl's Demo</title>
<style>

#chart {
  background: #fff;

carlvlewis

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

carlvlewis

<!doctype html>
<html>
<head>
  <script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
  <script src="http://cdn.anychart.com/samples-data/tree-map-charts/us-population/data.js"></script>
  <link rel="stylesheet" href="https://cdn.anychart.com/css/7.13.1/anychart-ui.min.css" />
  <style>
    html, body, #container {
      width: 100%;
      height: 100%;

carlvlewis

<!DOCTYPE html>
  <meta charset="utf-8"> <!-- also save this file as unicode-8 ! -->
  <head>
    <link rel="stylesheet" type="text/css" href="http://www.ankerst.de/lib/sankeySeqExplorer_10.css">
  
    <!--script src="../../../lib/d3_v4_2_1/d3.js"></script-->
    <script src="http://d3js.org/d3.v4.min.js"></script> 
    <script src="http://www.ankerst.de/lib/sankeySeqExplorer_10.min.js"></script>
    <script src="http://www.ankerst.de/lib/sankeySeq_10.min.js"></script>
    <style>