D3 Examples - Issue 655 Example Without Custom Formatting

xxxxxxxxxx
 
<html>
    <head>
        <title>Interactive Line Graph</title>
        <!--<script src="https://d3js.org/d3.v2.js"></script>-->
        <script src="https://cdn.jsdelivr.net/gh/mbostock/d3/8fe5b945ed7f4867b13a257d424dd29b1dd37e13/d3.v2.js"></script>
        <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="sample_data.js"></script>
        <script src="line-graph.js"></script>
        <link rel="stylesheet" href="style.css" type="text/css">
        <style>
            body {
                font-family: "Helvetica Neue", Helvetica;
            }
                    
            p {
                clear:both;
                top: 20px;
            }       
                    
            div.aGraph {
                clear:both;
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
    <div id="graph1" class="aGraph" style="position:relative;width:100%;height:400px"></div>
    
    <script>
    
         /*
         * Note how the 'data' object is added to here before rendering to provide decoration information.
         * <p>
         * This is purposefully done here instead of in data.js as an example of how data would come from a server
         * and then have presentation information injected into it (rather than as separate arguments in another object)
         * and passed into LineGraph.
         *
         * Also, CSS can be used to style colors etc, but this is also doable via the 'data' object so that the styling
         * of different data points can be done in code which is often more natural for display names, legends, line colors etc
         */
         // add presentation logic for 'data' object using optional data arguments
         data["displayNames"] = ["Loss", "OutRestarts", "RetransSegs", "EstabResets", "InSegs", "OutSegs"];
         data["colors"] =  ["orange","purple", "red", "darkred", "#56ad0a", "#408000"];
         data["scale"] = "log"
         
         // create graph now that we've added presentation config
        var l1 = new LineGraph({containerId: 'graph1', data: data});
​
        
    </script>
​
​
​
    </body>
</html>
    