D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
bradoyler
Full window
Github gist
JS Bin // source http://jsbin.com/tikitis
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <figure class="media media--g"> <h3 class="media__title">How the Global Average Sea Level Has Risen <small class="media__subtitle">Cumulative sea level change from 1880 to 2014</small></h3> <!-- Generated by ai2html v0.65.5 - 2017-11-08 12:09 --> <!-- ai file: 17-ai2html-machinist-gmslr02.ai --> <style type="text/css" media="screen,print"> #g-17-ai2html-machinist-gmslr02-box .g-artboard { margin:0 auto; } #g-17-ai2html-machinist-gmslr02-box .g-artboard p { margin:0; } .g-aiAbs { position:absolute; } .g-aiImg { display:block; width:100% !important; } .g-aiPointText p { white-space: nowrap; } #g-17-ai2html-machinist-gmslr02-604-wide { position:relative; overflow:hidden; width:604px; } #g-17-ai2html-machinist-gmslr02-604-wide p { font-family:'FoundersGroteskMono', Menlo, monospaced; font-size:12px; line-height:14px; filter:alpha(opacity=100); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity:1; letter-spacing:0em; text-align:left; color:rgb(85,85,85); text-transform:none; padding-bottom:0; padding-top:0; mix-blend-mode:normal; font-style:normal; } #g-17-ai2html-machinist-gmslr02-604-wide .g-pstyle0 { font-family:'PublicoText', Georgia, 'Times New Roman', serif; font-weight:700; font-size:11px; line-height:13px; } #g-17-ai2html-machinist-gmslr02-284-wide { position:relative; overflow:hidden; width:284px; } #g-17-ai2html-machinist-gmslr02-284-wide p { font-family:'PublicoText', Georgia, 'Times New Roman', serif; font-weight:700; font-size:11px; line-height:13px; filter:alpha(opacity=100); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity:1; letter-spacing:0em; text-align:left; color:rgb(85,85,85); text-transform:none; padding-bottom:0; padding-top:0; mix-blend-mode:normal; font-style:normal; } #g-17-ai2html-machinist-gmslr02-284-wide .g-pstyle0 { font-family:'FoundersGroteskMono', Menlo, monospaced; } #g-17-ai2html-machinist-gmslr02-284-wide .g-pstyle1 { font-family:'FoundersGroteskMono', Menlo, monospaced; font-size:12px; line-height:14px; } </style> <div id="g-17-ai2html-machinist-gmslr02-box" class="ai2html"> <!-- Artboard: 604-wide --> <div id="g-17-ai2html-machinist-gmslr02-604-wide" class="g-artboard g-artboard-v3 g-show-medium g-show-large g-show-xlarge g-show-xxlarge" data-min-width="604" style="display: block;"> <img id="g-ai2-0" class="g-aiImg" src="https://static-projects.nbcnews.com/machinist/dist/2017/10/deal-island/assets/17-ai2html-machinist-gmslr02-604-wide_141d511572.png"> <div id="g-ai2-1" class="g-graphics g-aiAbs g-aiPointText" style="top:3.2759%;margin-top:-7.1px;left:3.0598%;width:16px;"> <p>12</p> </div> <div id="g-ai2-2" class="g-graphics g-aiAbs g-aiPointText" style="top:15.759%;margin-top:-7.1px;left:2.6105%;width:16px;"> <p>10</p> </div> <div id="g-ai2-3" class="g-graphics g-aiAbs g-aiPointText" style="top:22.8542%;margin-top:-7.2px;left:20.557%;width:238px;"> <p class="g-pstyle0">Trend based on tide gauges with uncertainty</p> </div> <div id="g-ai2-4" class="g-graphics g-aiAbs g-aiPointText" style="top:28.242%;margin-top:-7.1px;left:4.0527%;width:9px;"> <p>8</p> </div> <div id="g-ai2-5" class="g-graphics g-aiAbs g-aiPointText" style="top:40.725%;margin-top:-7.1px;left:4.0527%;width:9px;"> <p>6</p> </div> <div id="g-ai2-6" class="g-graphics g-aiAbs g-aiPointText" style="transform: matrix(0,-1,1,0,0,0);transform-origin: 50% 57.0703583511703%;-webkit-transform: matrix(0,-1,1,0,0,0);-webkit-transform-origin: 50% 57.0703583511703%;-ms-transform: matrix(0,-1,1,0,0,0);-ms-transform-origin: 50% 57.0703583511703%;top:46.9666%;margin-top:-7.1px;left:-2.2382%;width:44px;"> <p>Inches</p> </div> <div id="g-ai2-7" class="g-graphics g-aiAbs g-aiPointText" style="top:53.2081%;margin-top:-7.1px;left:4.0527%;width:9px;"> <p>4</p> </div> <div id="g-ai2-8" class="g-graphics g-aiAbs g-aiPointText" style="top:65.4197%;margin-top:-7.1px;left:4.0527%;width:9px;"> <p>2</p> </div> <div id="g-ai2-9" class="g-graphics g-aiAbs g-aiPointText" style="top:78.1742%;margin-top:-7.1px;left:4.0527%;width:9px;"> <p>0</p> </div> <div id="g-ai2-10" class="g-graphics g-aiAbs g-aiPointText" style="top:87.6721%;margin-top:-7.1px;left:93.557%;width:30px;"> <p>Year</p> </div> <div id="g-ai2-11" class="g-graphics g-aiAbs g-aiPointText" style="top:90.3858%;margin-top:-7.1px;left:3.1892%;width:16px;"> <p>-2</p> </div> <div id="g-ai2-12" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:4.3903%;width:30px;"> <p>1880</p> </div> <div id="g-ai2-13" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:17.1759%;width:30px;"> <p>1900</p> </div> <div id="g-ai2-14" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:29.9616%;width:30px;"> <p>1920</p> </div> <div id="g-ai2-15" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:42.7472%;width:30px;"> <p>1940</p> </div> <div id="g-ai2-16" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:55.5312%;width:30px;"> <p>1960</p> </div> <div id="g-ai2-17" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:68.3169%;width:30px;"> <p>1980</p> </div> <div id="g-ai2-18" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:81.1024%;width:30px;"> <p>2000</p> </div> <div id="g-ai2-19" class="g-graphics g-aiAbs g-aiPointText" style="top:97.1701%;margin-top:-7.1px;left:93.8881%;width:30px;"> <p>2020</p> </div> </div> <!-- Artboard: 284-wide --> <div id="g-17-ai2html-machinist-gmslr02-284-wide" class="g-artboard g-artboard-v3 g-show-small g-show-smallplus g-show-submedium" data-min-width="284" data-max-width="603" style="display: none;"> <img id="g-ai3-0" class="g-aiImg" src="https://static-projects.nbcnews.com/machinist/dist/2017/10/deal-island/assets/17-ai2html-machinist-gmslr02-284-wide_1ce7f943ae.png"> <div id="g-ai3-1" class="g-graphics g-aiAbs g-aiPointText" style="top:2.5323%;margin-top:-6.9px;left:0.7042%;width:29px;"> <p class="g-pstyle0">12in</p> </div> <div id="g-ai3-2" class="g-graphics g-aiAbs g-aiPointText" style="top:9.4503%;margin-top:-7.2px;left:14.4944%;width:238px;"> <p>Trend based on tide gauges with uncertainty</p> </div> <div id="g-ai3-3" class="g-graphics g-aiAbs g-aiPointText" style="top:15.3345%;margin-top:-6.9px;left:0.2861%;width:16px;"> <p class="g-pstyle0">10</p> </div> <div id="g-ai3-4" class="g-graphics g-aiAbs g-aiPointText" style="top:28.1368%;margin-top:-6.9px;left:1.7368%;width:9px;"> <p class="g-pstyle0">8</p> </div> <div id="g-ai3-5" class="g-graphics g-aiAbs g-aiPointText" style="top:40.9391%;margin-top:-6.9px;left:1.7368%;width:9px;"> <p class="g-pstyle0">6</p> </div> <div id="g-ai3-6" class="g-graphics g-aiAbs g-aiPointText" style="top:53.4569%;margin-top:-6.9px;left:1.7368%;width:9px;"> <p class="g-pstyle0">4</p> </div> <div id="g-ai3-7" class="g-graphics g-aiAbs g-aiPointText" style="top:65.9746%;margin-top:-6.9px;left:1.7368%;width:9px;"> <p class="g-pstyle0">2</p> </div> <div id="g-ai3-8" class="g-graphics g-aiAbs g-aiPointText" style="top:79.0614%;margin-top:-6.9px;left:1.7368%;width:9px;"> <p class="g-pstyle0">0</p> </div> <div id="g-ai3-9" class="g-graphics g-aiAbs g-aiPointText" style="top:88.7829%;margin-top:-7.1px;left:89.1141%;width:30px;"> <p class="g-pstyle1">Year</p> </div> <div id="g-ai3-10" class="g-graphics g-aiAbs g-aiPointText" style="top:91.2947%;margin-top:-6.9px;left:-0.1884%;width:16px;"> <p class="g-pstyle0">-2</p> </div> <div id="g-ai3-11" class="g-graphics g-aiAbs g-aiPointText" style="top:98.4071%;margin-top:-6.9px;left:6.3019%;width:29px;"> <p class="g-pstyle0">1880</p> </div> <div id="g-ai3-12" class="g-graphics g-aiAbs g-aiPointText" style="top:98.4071%;margin-top:-6.9px;left:89.3087%;width:29px;"> <p class="g-pstyle0">2020</p> </div> </div> </div> <figcaption> <span class="caption__source">Source: Commonwealth Scientific and Industrial Research Organisation (CSIRO)</span> </figcaption> </figure> </body> </html>