ckportfolio.com - Setup for SVG and Canvas Experiment

Setup for SVG and Canvas Experiment

Files

In order to create a simple two-column layout, we connect the index.php page to the Bootstrap framework and build the layout based on provided documentation:

index.php

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>
    <body>

        <div class="container">
            <div class="row">
                <div class="col-6">
                </div>
                <div class="col-6">
                </div>
            </div>
        </div>

    </body>
</html>

We now move onto creating and embedding the following module files:

  • data.php: Similarly as the previous sql.php for connecting to an external source and preparing the dataset
  • svg.php: Simple SVG implementation of data visualization
  • graph.php: Library-driven Canvas implementation

index.php

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>
    <body>

        <? include "data.php"; ?>

        <div class="container">
            <div class="row">
                <div class="col-6">
                    <? include "svg.php"; ?>
                </div>
                <div class="col-6">
                    <? include "graph.php"; ?>
                </div>
            </div>
        </div>

    </body>
</html>

The page now features a side-by-side view of both approaches: vanilla SVG and plugin-based Canvas.

Loading External Data Source

We will rely on Dark Spy API's offering to load and manipulate Toronto's weather information for our needs. While one can simply sign up for a free account to use the data, we can also share the following URL: https://api.darksky.net/forecast/fc14992ed7b63ebd6fcf1b740f6398a9/43.6532,-79.3832

The presented JSON data seems quite complex, but things will make better sense once it is loading into PHP and converted into a compliant array object.

data.php

<?

    $data = file_get_contents("https://api.darksky.net/forecast/fc14992ed7b63ebd6fcf1b740f6398a9/43.6532,-79.3832");
    $array = json_decode($data);

    echo "<pre>";
    var_dump($array);
    echo "</pre>";

?>

file_get_contents() is responsible for downloading the remote URL as a string, and json_decode() turns the very same string into a format usable by PHP. <pre> and var_dump() display the contents of the converted object with line break (for legibility).

After some inspection, we can confirm that day-by-day forecast information is available under $array->daily->data, and will create a dedicated variable called forecast to populate the two module files. We can also disable var_dump() upon confirming this.

data.php

<?

    $data = file_get_contents("https://api.darksky.net/forecast/fc14992ed7b63ebd6fcf1b740f6398a9/43.6532,-79.3832");
    $array = json_decode($data);
    $forecast = $array->daily->data;

?>
Fin