D3 Line chart with toggle legend

D3 Multiple Line chart with toggle legend

Line chart updates the yAxis depending on selection from the legend.

The legend uses purecss for the menu, which can be made into a responsive menu.

The legend has been added to the re-useable components from ScottLogic's awesome d3-financial-components

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Multiple line chart with legend</title>
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
        
        
            <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
        
        <link href='custom.css' rel='stylesheet' type='text/css'>
        
        
        <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
        
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
        
        <script src="//cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.min.js"></script>
        
        <script>
          var opts = {
              lines: 13, // The number of lines to draw
              length: 6, // The length of each line
              width: 4, // The line thickness
              radius: 13, // The radius of the inner circle
              corners: 1, // Corner roundness (0..1)
              color: '#000', // #rgb or #rrggbb or array of colors
              speed: 1.5, // Rounds per second
              trail: 75, // Afterglow percentage
              shadow: false, // Whether to render a shadow
              hwaccel: false, // Whether to use hardware acceleration
              className: 'spinner', // The CSS class to assign to the spinner
              zIndex: 2e9, // The z-index (defaults to 2000000000)
              top: '50%', // Top position relative to parent
              left: '50%' // Left position relative to parent
          };
        </script>
        
        <script src="fc.js"></script>
        
        <script src="lineMultiple.js"></script>
        <script src="defaultConfig.js"></script>
        <script src="dataConfig.js"></script>
        <script src="legend.js"></script>
        
        <script src="chart.js"></script>

</head>
    <body>
        <div class="l-content main-wrapper fullscreen">

<div id="chart-wrap" class="fullscreen fullscreen-padding">
                <header>
                    <div id="chart-title-wrap">
                        <h1>
                            <span id="chart-title">Loading chart &hellip;</span>     
                        </h1> 
                    </div>
                </header>
                <section class="chart-fullscreen" id="chart-id">
                    <aside id="legend-html"></aside>
                </section>
            </div>

</div>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js

https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.min.js