D3 Examples - Trend Chart (Area + Line)

Trend Chart (Area + Line)

This "trend chart" shows loading times across releases of a hypothetical web application.

It is a mixture of a line chart and an area chart, with the daily median loading time indicated by the line and percentile ranges indicated by the surrounding areas.

The "lollipops" mark releases of (different parts of) the application.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8">
        <title>Trend Chart (Area + Line)</title>
        <link rel="stylesheet" href="app.css">
    </head>
​
    <body>
        <div id="container">
            <!-- The slide with the charts -->
            <img class="logo header" src="Logo_mittig_oben.png"></img>
            <p class="claim">Wir bringen<br/>Onlinemarketing<br/>auf die Strasse</p>
            <div class="visitorChart">
                <p class="chart-name">Besucher</p>
            </div>
            <div class="durationChart">
                <p class="chart-name">Verweildauer</p>
            </div>
            <div class="radarChart">
                <p class="chart-name">Position</p>
            </div>
​
            <!-- The screen with the active client info -->
            <img class="logo header active" src="Logo_mittig_oben.png"></img>
            <p class="claim active">Wir bringen<br/>Onlinemarketing<br/>auf die Strasse</p>
            <div class="ssidTreeChart">
                <p class="chart-name">Nähestes<br>Gerät</p>
            </div>
            <div class="activeVendorChart"></div>
            <div class="barchart numSsidChart">
                <p class="chart-name">Gespeicherte WLANs</p>
            </div>
​
            <!-- The full screen video, at the bottom of the z-stack -->
            <video class="video car2ad" src="20160907_Videopräsentation.mp4" poster="20160907_Videopräsentation.jpg">
                Sorry, your browser doesn't support embedded videos, 
                but don't worry, you can <a href="MVI_0964.MP4">download it</a>
                and watch it with your favorite video player!
            </video>
        </div>
    </body>
​
    <script src="//d3js.org/d3.v3.js"></script>
    <!-- Library code -->
    <script src="tools.js"></script>
    <script src="radar.js"></script>
    <script src="radarData.js"></script> <!-- Demo data for the radar chart -->
    <script src="tree.js"></script>
    <!-- Global settings and variables -->
    <script src="settings.js"></script>
    <!-- The individual charts we draw -->
    <script src="visitorChart.js"></script>
    <script src="durationChart.js"></script>
    <script src="radarChart.js"></script>
    <script src="ssidsChart.js"></script>
    <script src="activeVendorChart.js"></script>
    <script src="numSsidsChart.js"></script>
    <!-- Code for parsing maltego resonses from the backend -->
    <script src="maltego.js"></script>
    <!-- The main app code and glue for the charts -->
    <script src="app.js"></script>
</html>
​
    