Skip to content

Instantly share code, notes, and snippets.

@csessig86
Last active November 29, 2018 03:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save csessig86/98003f7a2bbc794088075ad191df502b to your computer and use it in GitHub Desktop.
Save csessig86/98003f7a2bbc794088075ad191df502b to your computer and use it in GitHub Desktop.
Gulf infastructure AI embed
<div class="app"><style type="text/css" media="screen,print">#g-graphic-box .g-artboard {
margin:0 auto;
}
#g-graphic-box .g-artboard p {
margin:0;
}
.g-aiAbs {
position:absolute;
}
.g-aiImg {
display:block;
width:100% !important;
}
.g-aiPointText p { white-space: nowrap; }
#g-graphic-360 {
position:relative;
overflow:hidden;
width:320px;
}
#g-graphic-360 p {
font-family:'open sans', Helvetica, Arial, sans-serif;
font-size:14px;
line-height:22px;
filter:alpha(opacity=100);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity:1;
letter-spacing:0em;
text-align:left;
color:rgb(0,0,0);
text-transform:none;
padding-bottom:0;
padding-top:0;
mix-blend-mode:normal;
font-style:normal;
height:auto;
}
#g-graphic-360 .g-pstyle0 {
font-weight:bold;
font-size:20px;
line-height:24px;
}
#g-graphic-360 .g-pstyle1 {
font-size:12px;
line-height:14px;
}
#g-graphic-360 .g-pstyle2 {
font-size:12px;
line-height:14px;
text-align:center;
}
#g-graphic-360 .g-pstyle3 {
font-weight:bold;
font-size:18px;
}
#g-graphic-360 .g-pstyle4 {
font-weight:500;
font-size:8px;
line-height:10px;
height:10px;
}
#g-graphic-360 .g-pstyle5 {
font-size:11px;
line-height:13px;
height:13px;
}
#g-graphic-360 .g-pstyle6 {
font-weight:bold;
line-height:17px;
padding-top:7px;
}
#g-graphic-360 .g-pstyle7 {
line-height:17px;
padding-top:3px;
}
#g-graphic-360 .g-pstyle8 {
font-weight:bold;
line-height:17px;
padding-top:7px;
text-align:right;
}
#g-graphic-360 .g-pstyle9 {
line-height:17px;
padding-top:3px;
text-align:right;
}
#g-graphic-360 .g-pstyle10 {
font-size:12px;
line-height:14px;
height:14px;
}
#g-graphic-1140 {
position:relative;
overflow:hidden;
width:1000px;
}
#g-graphic-1140 p {
font-family:'open sans', Helvetica, Arial, sans-serif;
font-size:14px;
line-height:22px;
filter:alpha(opacity=100);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity:1;
letter-spacing:0em;
text-align:left;
color:rgb(0,0,0);
text-transform:none;
padding-bottom:0;
padding-top:0;
mix-blend-mode:normal;
font-style:normal;
height:auto;
}
#g-graphic-1140 .g-pstyle0 {
font-weight:bold;
font-size:20px;
line-height:24px;
}
#g-graphic-1140 .g-pstyle1 {
font-size:12px;
line-height:14px;
text-align:center;
}
#g-graphic-1140 .g-pstyle2 {
font-weight:bold;
font-size:18px;
}
#g-graphic-1140 .g-pstyle3 {
font-weight:500;
font-size:8px;
line-height:10px;
height:10px;
}
#g-graphic-1140 .g-pstyle4 {
font-weight:bold;
line-height:17px;
padding-top:7px;
text-align:right;
}
#g-graphic-1140 .g-pstyle5 {
line-height:17px;
padding-top:3px;
text-align:right;
}
#g-graphic-1140 .g-pstyle6 {
font-size:11px;
line-height:13px;
height:13px;
}
#g-graphic-1140 .g-pstyle7 {
font-size:12px;
line-height:14px;
}
#g-graphic-1140 .g-pstyle8 {
font-weight:bold;
line-height:17px;
padding-top:7px;
}
#g-graphic-1140 .g-pstyle9 {
line-height:17px;
padding-top:3px;
}
#g-graphic-1140 .g-pstyle10 {
font-size:12px;
line-height:14px;
height:14px;
}
/* Custom CSS */
.g-artboard p {
text-shadow: 1px 1px 0px rgba(255,255,255,0.7),-1px -1px 0px rgba(255,255,255,0.7),-1px 1px 0px rgba(255,255,255,0.7),1px -1px 0px rgba(255,255,255,0.7);
}
#g-graphic-1140 {
display:block;
margin:0 auto;
}
#g-graphic-360 {
display:none;
margin:0 auto;
}
@media (max-width: 999px) {
#g-graphic-1140{
display:none;
}
#g-graphic-360 {
display:block;
}
}</style><div id="g-graphic-box" class="ai2html"><div id="g-graphic-360" class="g-artboard g-artboard-v4" data-aspect-ratio="0.164" data-min-width="320" data-max-width="999"><img id="g-graphic-360-img" class="g-aiImg" src="https://graphics.texastribune.org/graphics/tx-gulf-infastructure-2018-11/assets/images/graphic-360-122307f963.jpg"><div id="g-ai0-1" class="g-text g-aiAbs" style="top:-0.1027%;left:-0.0199%;width:100%;"><p class="g-pstyle0">Fast-rising oil and gas exports prompt development boom</p></div><div id="g-ai0-2" class="g-step_1 g-aiAbs" style="top:2.8251%;left:0%;width:100%;"><p>As U.S. oil and gas production soars, particularly in Texas, firms are rushing to build pipelines and facilities to export the fossil fuels. Below are new projects and expansions of existing projects that are either proposed, under construction or have been built on or to the Gulf Coast after restrictions on crude oil exports were lifted in December 2015.</p></div><div id="g-ai0-3" class="g-step_1 g-aiAbs" style="top:12.7898%;left:17.8125%;width:35.9375%;"><p class="g-pstyle1">Oil and gas projects</p><p class="g-pstyle1">by region</p></div><div id="g-ai0-4" class="g-step_1 g-aiAbs" style="top:17.5668%;left:25.7813%;margin-left:-30.5px;width:19.0625%;"><p class="g-pstyle2">1 project</p></div><div id="g-ai0-5" class="g-step_1 g-aiAbs" style="top:17.5668%;left:65.3125%;margin-left:-38px;width:23.75%;"><p class="g-pstyle2">14 projects</p></div><div id="g-ai0-6" class="g-step_1 g-aiAbs" style="top:19.7755%;left:0.3048%;width:98.75%;"><p class="g-pstyle3">Moving to the coast</p></div><div id="g-ai0-7" class="g-step_1 g-aiAbs" style="top:21.2137%;left:0.3048%;width:99.0625%;"><p>Multiple pipelines are under construction or planned to transport crude oil, natural gas and related commodities from the Permian Basin, largely in West Texas, to the Texas Gulf Coast.</p></div><div id="g-ai0-8" class="g-step_1 g-aiAbs g-aiPointText" style="top:26.7383%;margin-top:-5.6px;left:9.0178%;width:59px;"><p class="g-pstyle4">100 miles</p></div><div id="g-ai0-9" class="g-step_1 g-aiAbs g-aiPointText" style="top:32.3703%;margin-top:-7.2px;left:62.1529%;width:64px;"><p class="g-pstyle5">Midland</p></div><div id="g-ai0-10" class="g-step_1 g-aiAbs g-aiPointText" style="top:36.1096%;margin-top:-27px;left:59.0408%;width:121px;"><p class="g-pstyle5">For 2 pipelines,</p><p class="g-pstyle5">the town of their</p><p class="g-pstyle5">start point could</p><p class="g-pstyle5">not be determined.</p></div><div id="g-ai0-11" class="g-step_1 g-aiAbs" style="top:38.4723%;left:3.732%;width:52.1875%;"><p class="g-pstyle6">Permian Basin</p><p class="g-pstyle7">17 pipelines and their start points</p><p>&nbsp;</p></div><div id="g-ai0-12" class="g-step_1 g-aiAbs" style="top:44.4306%;left:0.9375%;width:98.125%;"><p class="g-pstyle3">A pause for processing</p></div><div id="g-ai0-13" class="g-step_1 g-aiAbs" style="top:45.8688%;left:0.9375%;width:99.0625%;"><p>For some of the oil and gas traveling to the coast, the next step is processing, particularly for liquids that come up with natural gas and can be transformed into plastics.</p></div><div id="g-ai0-14" class="g-step_1 g-aiAbs" style="top:51.9299%;right:43.125%;width:47.1875%;"><p class="g-pstyle8">Houston area</p><p class="g-pstyle9">14 projects, including fractionators and ethane crackers</p><p>&nbsp;</p></div><div id="g-ai0-15" class="g-step_1 g-aiAbs" style="top:61.946%;left:48.75%;width:44.6875%;"><p class="g-pstyle6">Corpus Christi area</p><p class="g-pstyle7">7 projects, including ethane crackers and a condensate splitter</p><p>&nbsp;</p></div><div id="g-ai0-16" class="g-step_1 g-aiAbs" style="top:69.548%;left:0.625%;width:99.375%;"><p class="g-pstyle3">Off to world markets</p></div><div id="g-ai0-17" class="g-step_1 g-aiAbs" style="top:70.9348%;left:0.625%;width:99.375%;"><p>New or planned terminals on the coast are intended to store and/or move crude oil, liquefied natural gas and related commodities to other countries.</p></div><div id="g-ai0-18" class="g-step_1 g-aiAbs" style="top:76.9445%;right:38.1739%;width:56.25%;"><p class="g-pstyle8">Houston area</p><p class="g-pstyle9">7 projects, including ones for crude, ethane and liquefied petroleum gas</p><p>&nbsp;</p></div><div id="g-ai0-19" class="g-step_1 g-aiAbs" style="top:84.4438%;left:62.8173%;width:32.8125%;"><p class="g-pstyle1">Proposed offshore oil port</p></div><div id="g-ai0-20" class="g-step_1 g-aiAbs" style="top:86.9607%;left:55.082%;width:43.75%;"><p class="g-pstyle6">Corpus Christi area</p><p class="g-pstyle7">12 projects, including for crude, liquefied natural gas and refined petroleum products</p></div><div id="g-ai0-21" class="g-text g-aiAbs g-aiPointText" style="top:97.392%;margin-top:-51.1px;left:0.6252%;width:336px;"><p class="g-pstyle10">Note: Because the information was collected by hand</p><p class="g-pstyle10">and proposals are coming in fast, the numbers could</p><p class="g-pstyle10">be undercounted.</p><p class="g-pstyle10">Source: Center for Public Integrity and Texas Tribune</p><p class="g-pstyle10">review of corporate plans.</p><p class="g-pstyle10">Credit: Chris Essig, Darla Cameron, Jamie Smith Hopkins,</p><p class="g-pstyle10">Kiah Collier and Rachel Leven</p></div></div><div id="g-graphic-1140" class="g-artboard g-artboard-v4" data-aspect-ratio="1.336" data-min-width="1000"><img id="g-graphic-1140-img" class="g-aiImg" src="https://graphics.texastribune.org/graphics/tx-gulf-infastructure-2018-11/assets/images/graphic-1140-59969467a8.jpg"><div id="g-ai1-1" class="g-text g-aiAbs" style="top:-0.2672%;left:16.4936%;width:66.3%;"><p class="g-pstyle0">Fast-rising oil and gas exports prompt development boom</p></div><div id="g-ai1-2" class="g-step_1 g-aiAbs" style="top:4.2756%;left:16.8%;width:42.5%;"><p>As U.S. oil and gas production soars, particularly in Texas, firms are rushing to build pipelines and facilities to export the fossil fuels. Below are new projects and expansions of existing projects that are either proposed, under construction or have been built on or to the Gulf Coast after restrictions on crude oil exports were lifted in December 2015.</p></div><div id="g-ai1-3" class="g-step_1 g-aiAbs" style="top:4.6764%;left:68.3%;margin-left:-76px;width:15.2%;"><p class="g-pstyle1">Oil and gas projects</p><p class="g-pstyle1">by region</p></div><div id="g-ai1-4" class="g-step_1 g-aiAbs" style="top:21.5114%;left:63.45%;margin-left:-30.5px;width:6.1%;"><p class="g-pstyle1">1 project</p></div><div id="g-ai1-5" class="g-step_1 g-aiAbs" style="top:21.5114%;left:72.2%;margin-left:-38px;width:7.6%;"><p class="g-pstyle1">14 projects</p></div><div id="g-ai1-6" class="g-text g-aiAbs" style="top:29.5281%;left:0%;width:31.9%;"><p class="g-pstyle2">Moving to the coast</p></div><div id="g-ai1-7" class="g-text g-aiAbs" style="top:29.5281%;left:34%;width:31.9%;"><p class="g-pstyle2">A pause for processing</p></div><div id="g-ai1-8" class="g-text g-aiAbs" style="top:29.5281%;left:67.9%;width:31.9%;"><p class="g-pstyle2">Off to world markets</p></div><div id="g-ai1-9" class="g-text g-aiAbs" style="top:33.2692%;left:0%;width:32%;"><p>Multiple pipelines are under construction or planned to transport crude oil, natural gas and related commodities from the Permian Basin, largely in West Texas, to the Texas Gulf Coast.</p></div><div id="g-ai1-10" class="g-text g-aiAbs" style="top:33.2692%;left:34%;width:32%;"><p>For some of the oil and gas traveling to the coast, the next step is processing, particularly for liquids that come up with natural gas and can be transformed into plastics.</p></div><div id="g-ai1-11" class="g-text g-aiAbs" style="top:33.2692%;left:67.9%;width:32%;"><p>New or planned terminals on the coast are intended to store and/or move crude oil, liquefied natural gas and related commodities to other countries.</p></div><div id="g-ai1-12" class="g-step_1 g-aiAbs g-aiPointText" style="top:47.6399%;margin-top:-5.6px;left:2.7986%;width:59px;"><p class="g-pstyle3">100 miles</p></div><div id="g-ai1-13" class="g-step_1 g-aiAbs" style="top:48.9017%;right:12.3%;width:18.2%;"><p class="g-pstyle4">Houston area</p><p class="g-pstyle5">7 projects, including ones for crude, ethane and liquefied petroleum gas</p><p>&nbsp;</p></div><div id="g-ai1-14" class="g-step_1 g-aiAbs" style="top:49.0353%;right:48.1%;width:15.1%;"><p class="g-pstyle4">Houston area</p><p class="g-pstyle5">14 projects, including fractionators and ethane crackers</p><p>&nbsp;</p></div><div id="g-ai1-15" class="g-step_1 g-aiAbs g-aiPointText" style="top:62.29%;margin-top:-7.2px;left:19.8724%;width:64px;"><p class="g-pstyle6">Midland</p></div><div id="g-ai1-16" class="g-text g-aiAbs" style="top:68.4089%;left:88%;width:10.6%;"><p class="g-pstyle7">Proposed offshore oil port</p></div><div id="g-ai1-17" class="g-step_1 g-aiAbs g-aiPointText" style="top:72.0169%;margin-top:-27px;left:18.8724%;width:122px;"><p class="g-pstyle6">For 2 pipelines,</p><p class="g-pstyle6">the town of their</p><p class="g-pstyle6">start point could</p><p class="g-pstyle6">not be determined.</p></div><div id="g-ai1-18" class="g-step_1 g-aiAbs" style="top:74.9558%;left:85.5%;width:14.1%;"><p class="g-pstyle8">Corpus Christi area</p><p class="g-pstyle9">12 projects, including for crude, liquefied natural gas and refined petroleum products</p></div><div id="g-ai1-19" class="g-step_1 g-aiAbs" style="top:75.0895%;left:49.3%;width:14.3%;"><p class="g-pstyle8">Corpus Christi area</p><p class="g-pstyle9">7 projects, including ethane crackers and a condensate splitter</p><p>&nbsp;</p></div><div id="g-ai1-20" class="g-step_1 g-aiAbs" style="top:78.1625%;left:1.1%;width:16.8%;"><p class="g-pstyle8">Permian Basin</p><p class="g-pstyle9">17 pipelines and their start points</p><p>&nbsp;</p></div><div id="g-ai1-21" class="g-text g-aiAbs g-aiPointText" style="top:96.7634%;margin-top:-22.2px;left:0%;width:718px;"><p class="g-pstyle10">Note: Because the information was collected by hand and proposals are coming in fast, the numbers could be undercounted.</p><p class="g-pstyle10">Source: Center for Public Integrity and Texas Tribune review of corporate plans.</p><p class="g-pstyle10">Credit: Chris Essig, Darla Cameron, Jamie Smith Hopkins, Kiah Collier and Rachel Leven</p></div></div></div></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment