D3 Examples - #KnightD3

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>#KnightD3 wk6 linechart</title>
​
<!-- <script type="text/javascript" src="d3.v3.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
​
​
        <style type="text/css">
​
            html, body, * {
                font-family: Arial, sans-serif;
                text-align: center;
                font-size: 14px 65%;
            }
​
            div#title {
                width: 700px;
                margin: 10px auto 0;
                padding: 5px 20px;
                background-color: grey;
                border: 1px solid grey;
                color: white;
                box-shadow: 3px 0px 3px lightgrey;
            }
​
            h1 {
                font-family: Georgia, serif;
                font-size: 1.2em;
                letter-spacing: 1px;
                margin: 0 auto;
            }
​
            h2 {
                font-size: .9em;
                font-weight:100;
                margin: .3em auto;
            }
​
            p {
                font-size: .7em;
                margin: 5px auto;
            }
​
            div#chart {
                width:740px;
                height: 400px;
                margin: 0 auto 1em;
                border: 1px solid grey;
                box-shadow: 3px 3px 3px lightgrey;
            }
​
            svg {
                background-color: white;
            }
​
            path.line {
                /*stroke: black;*/
                stroke-width:.5px;
                fill:none;
            }
​
            path.x.axis {
                stroke: black;
                stroke-width:.4px;
            }
​
            .x.axis path,
            .x.axis line {
                fill: none;
                stroke: none;
                shape-rendering: crispEdges;
            }
​
            .y.axis path,
            .y.axis line {
                fill: none;
                stroke: none;
                shape-rendering: crispEdges;
            }
​
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
​
        </style>
​
</head>
<body>
​
    <div id="title">
        <h1>
            Monthly mean Land &amp; Ocean Temperature
        </h1>
        <p>deviation from the base period of 1951-1980</p>
    </div>
    <div id="chart"></div>
​
<script type="text/javascript" src="linechart.js"></script>
​
</body>
</html>
​
    