jeudi 6 août 2015

Reading HTML with D3 up on Ghost blog (files hosted on AWS)

I have an HTML page i'd like to push up to the interwebz (specifically to a ghost blog if possible) - with the accompanying SS/JS(including d3). But it's breaking and seemingly not reading my CSS or javascript files that are on AWS.

I've hosted all my files hosted on AWS (so they all have their individual URLs), but it seems that CSS and JS files aren't getting read-in on Ghost. Ghost supports HTML so technically I should be able to insert HTML and script tags, but it's breaking.

I've even followed the directions here in adding the d3.min.js file to my ghost theme folder: http://ift.tt/1Iu28E3 - although with my HTML referencing all the files including d3.min.js on AWS, it shouldn't matter, no?

Anyways, here's my HTML that I'm trying to throw in (excusing me for the poor formatting and HTML etiquette - I just learned JS/html/css/d3 in the past wk so i'm just trying to make something passable). thanks in advance guys!

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <meta content="utf-8" http-equiv="encoding">
            <title>boom goes the dynamite</title>
        <link rel="stylesheet" type="text/css" href="http://ift.tt/1MQOHUQ" media="screen" />
        <link rel="stylesheet" type="text/css" href="http://ift.tt/1Iu28Ug"/>
        <script src="http://ift.tt/1Iu28Ui"></script>
        <script src="http://ift.tt/1MQOHUW"></script>
        <link href='http://ift.tt/1Iu2aM2' rel='stylesheet' />
        <script src='http://ift.tt/1Iu28Uk'></script>
    </head>
    <body>
        <div id='map'></div>
        <div id='container'>
            <h5 id="main_header">Bikeshare Balance in Chicago</h5>
            <p id='descrip'>Hourly Divvy Bike Station Net Inflow & Outflow in 2014</p>
            <div id="slider-container">
              <div id="play">
                <img style="width: 100%;" src="http://ift.tt/1MQOIYU" />
              </div>
              <div id="slider-div">
                  <div></div> 
              </div>
            </div>
            <div id='text_container'>
                <img id="divvy1" class="centering" src="http://ift.tt/1Iu28Us";>
                <img id="divvy2" class="centering" src="http://ift.tt/1MQOIbc";>
                <img id="divvy3" class="centering" src="http://ift.tt/1Iu28Uy";>
                <p id='first-question'>With an ever-growing ridership, understanding and planning<br></br>bike station rebalancing will become more and more important for Divvy.<br></br><br></br></p>
                <!-- Ever wonder how under/over-run Divvy<br></br>bike stations become during the day?<br></br><br></br><br></br></p> -->
                <p class='small'>By visualizing the total hourly traffic in and out of Divvy stations for all of 2014, <br></br>we can get a better sense of the ebbs of flows of bikeshare station traffic in the city of Chicago.<br></br><br></br></p>
                <p class="small">The <font color="#FF6666">red</font> circles tell us that there was a net outflow of bikes from the particular station during the specified hour.<br></br>
                The <font color="#00CCFF">blue</font> circles tell us the opposite: that more bikes came into than left that station during the same hour.<br></br><br></br>
                </p>
                <p>The larger the circle, the <u>greater the imbalance.</u><br></br></p>
                <p>Commuter hot-spots, hourly fluctuations, potential areas in need of more rebalancing -<br> just a few of the things we can think about.<br></br></p>
                <img src="http://ift.tt/1MQOIYW" class="centering";>
                <img src="http://ift.tt/1Iu2b2t" class="centering";>
                <img src="http://ift.tt/1MQOIYW" class="centering";>
                <p id='closing'>Designed by <a href="http://ift.tt/1MQOIbg">Yong Cho</a>.  Data from <a href="http://ift.tt/1qSRlfq">Divvy.</a></p>
            </div>
        </div>
        <!-- // <script src='http://ift.tt/1eIQNlR'></script> -->
        <script src="http://ift.tt/1Iu2b2z"></script>
    </body>
</html>




Aucun commentaire:

Enregistrer un commentaire