D3 Examples

xxxxxxxxxx
 
<!-- Example by D3.js -->
<!-- Coded by Linne S. Huang -->
​
<meta charset="utf-8">
​
<style>
​
    body {
        margin-bottom: 10vh;
        font-family: sans-serif;
    }
​
    .title {
        font-family: sans-serif;
        display: block;
        margin: 20vh auto 10vh auto;
        width: 50vw;
/*        text-align: center;*/
        font-size: 10rem;
        color: #de0d78;
        line-height: 3rem;
        letter-spacing: 0.1rem;
        font-weight: bold;
    }
​
​
    .heatmap {
        display: fixed;
/*        margin-left: auto;
        margin-right: auto;
        width: 65vw;*/
    }
​
    .axis path,
    .axis line {
        fill: none;
        stroke: none;
        shape-rendering: crispEdges;
    }
​
    .axis text {
        text-transform: uppercase;
        font-size: 11px;
/*        fill: black;*/
     }
​
    .tooltip {
        position: absolute;
        text-align: center;
        width: 60px;
        height: 12px;
        padding: 8px;
        margin-top: -20px;
        font: 1rem sans-serif;
        background: rgba(255, 255, 255);
        pointer-events: none;
    }
​
    span {
        margin-right: 5px;
    }
​
    .category {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 30vw;
        text-align: center;
        font-family: sans-serif;
        font-weight: bold;
        font-size: 0.2rem;
        line-height: 1.5rem;
    }
​
​
​
​
​
</style>
<body>
​
<div class="heatmap"></div>
​
​
<!-- <div class="category">
    <span style="background-color: #ff5722">Research </span>
    <span style="background-color: #ff8a65">Interview</span>
    <span style="background-color: #e64a19">Ideation</span>
    <span style="background-color: #ffeb3b">Testing</span>
    <span style="background-color: #fbc02d">Mapping</span>
​
    <span style="background-color: #ffff00">Storyboard</span>
    <span style="background-color: #8bc34a">Prototype</span>
    <span style="background-color: #dcedc8">Iteration</span>
    <span style="background-color: #ffeb3b">Sketching</span>
    <span style="background-color: #fbc02d">Analysis</span>
<br>
    <span style="background-color: #ffff00">Summary</span>
    <span style="background-color: #8bc34a">Articulation</span>
    <span style="background-color: #dcedc8">Exploration</span>
    <span style="background-color: #ffeb3b">Brainstorm</span>
    <span style="background-color: #fbc02d">Deployment</span>
​
    <span style="background-color: #ffff00">Creation</span>
    <span style="background-color: #8bc34a">Model making</span>
    <span style="background-color: #dcedc8">Printing</span>
    <span style="background-color: #ffeb3b">User study</span>
    <span style="background-color: #ffccbc">(Add Your Own)</span>
</div> -->
​
​
<!-- <div class="category">
    <p>Pre-Production</p>
    <span style="background-color: #0168C6">Research </span>
    <span style="background-color: #186AC0">Interview</span>
    <span style="background-color: #236BBE">Ideation</span>
    <span style="background-color: #2F6CBB">Testing</span>
    <span style="background-color: #3A6DB9">Mapping</span>
<br>
    <span style="background-color: #466EB6">Storyboard</span>
    <span style="background-color: #5170B4">Prototype</span>
    <span style="background-color: #5D71B1">Iteration</span>
    <span style="background-color: #6872AF">Sketching</span>
    <span style="background-color: #7473AC">Analysis</span>
<br>
    <p>Post-Production</p>
    <span style="background-color: #7F74A9">Summary</span>
    <span style="background-color: #8B75A7">Articulation</span>
    <span style="background-color: #9676A4">Exploration</span>
    <span style="background-color: #A278A2">Brainstorm</span>
    <span style="background-color: #AD799F">Deployment</span>
<br>
    <span style="background-color: #B97A9D">Creation</span>
    <span style="background-color: #C47B9A">Model making</span>
    <span style="background-color: #D07C98">Printing</span>
    <span style="background-color: #DB7D95">User study</span>
    <span style="background-color: #E77F93">(Add Your Own)</span>
<br>
<br>
<br>
<a href="#">Alphabetical Order</a><br>
<a href="byDiscipline.html">Discipline</a><br>
<a href="byCountry.html">Country</a>
​
</div>
 -->
​
<svg xmlns='https://www.w3.org/2000/svg' width='100%' height='100%'>
    <linearGradient id='g' x2='1' y2='1'>
        <stop stop-color='#F19'/>
        <stop offset='100%' stop-color='#0CF'/>
    </linearGradient>
<!--     <rect width='100%' height='100%' fill='url(#g)'/> -->
</svg>
​
<svg xmlns='https://www.w3.org/2000/svg' width='10' height='10'>
    <defs> <pattern id="aaa" patternUnits="userSpaceOnUse" width="10" height="10"> 
<path d='M-2 10L10 -2ZM10 6L6 10ZM-2 2L2 -2' stroke='pink' stroke-width='3'/>
</pattern> </defs>
</svg>
​
<svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="circles-1" patternUnits="userSpaceOnUse" width="10" height="10" > <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSJ3aGl0ZSIgLz4KICA8Y2lyY2xlIGN4PSIxIiBjeT0iMSIgcj0iMSIgZmlsbD0iYmxhY2siLz4KPC9zdmc+" x="0" y="0" width="10" height="10" > </image> </pattern> </defs> </svg>
​
<svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="circles-4" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8Y2lyY2xlIGN4PScyLjUnIGN5PScyLjUnIHI9JzIuNScgZmlsbD0nYmxhY2snLz4KPC9zdmc+" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>
​
<svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="diagonal-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg==" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>
​
<svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="horizontal-stripe-2" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMTAnIGhlaWdodD0nMicgZmlsbD0nYmxhY2snIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>
​
<svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="horizontal-stripe-7" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMTAnIGhlaWdodD0nNycgZmlsbD0nYmxhY2snIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>
​
<svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="vertical-stripe-4" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nNCcgaGVpZ2h0PScxMCcgZmlsbD0nYmxhY2snIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>
​
<svg height="8" width="8" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="crosshatch" patternUnits="userSpaceOnUse" width="8" height="8"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPgogIDxyZWN0IHdpZHRoPSc4JyBoZWlnaHQ9JzgnIGZpbGw9JyNmZmYnLz4KICA8cGF0aCBkPSdNMCAwTDggOFpNOCAwTDAgOFonIHN0cm9rZS13aWR0aD0nMC41JyBzdHJva2U9JyNhYWEnLz4KPC9zdmc+Cg==" x="0" y="0" width="8" height="8"> </image> </pattern> </defs> </svg>
​
<svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="houndstooth" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTAnIGhlaWdodD0nMTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+CiAgPHBhdGggZD0nTTAgMEw0IDQnIHN0cm9rZT0nI2FhYScgZmlsbD0nI2FhYScgc3Ryb2tlLXdpZHRoPScxJy8+CiAgPHBhdGggZD0nTTIuNSAwTDUgMi41TDUgNUw5IDlMNSA1TDEwIDVMMTAgMCcgc3Ryb2tlPScjYWFhJyBmaWxsPScjYWFhJyBzdHJva2Utd2lkdGg9JzEnLz4KICA8cGF0aCBkPSdNNSAxMEw1IDcuNUw3LjUgMTAnIHN0cm9rZT0nI2FhYScgZmlsbD0nI2FhYScgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>
​
<svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="dots-7" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nNycgaGVpZ2h0PSc3JyBmaWxsPSdibGFjaycgLz4KPC9zdmc+" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>
​
​
<svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="circles-2" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8Y2lyY2xlIGN4PScxLjUnIGN5PScxLjUnIHI9JzEuNScgZmlsbD0nYmxhY2snLz4KPC9zdmc+Cg==" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>
​
<svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="circles-9" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8Y2lyY2xlIGN4PSc1JyBjeT0nNScgcj0nNScgZmlsbD0nYmxhY2snLz4KPC9zdmc+" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>
​
<svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="diagonal-stripe-6" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSdibGFjaycvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J3doaXRlJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>
​
​
<svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="dots-9" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nOScgaGVpZ2h0PSc5JyBmaWxsPSdibGFjaycgLz4KPC9zdmc+" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>
​
<svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="horizontal-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMTAnIGhlaWdodD0nMScgZmlsbD0nYmxhY2snIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>
​
​
<svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="vertical-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMScgaGVpZ2h0PScxMCcgZmlsbD0nYmxhY2snIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>
​
​
<svg height="6" width="6" xmlns="https://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="whitecarbon" patternUnits="userSpaceOnUse" width="6" height="6"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nNicgaGVpZ2h0PSc2Jz4KICA8cmVjdCB3aWR0aD0nNicgaGVpZ2h0PSc2JyBmaWxsPScjZWVlZWVlJy8+CiAgPGcgaWQ9J2MnPgogICAgPHJlY3Qgd2lkdGg9JzMnIGhlaWdodD0nMycgZmlsbD0nI2U2ZTZlNicvPgogICAgPHJlY3QgeT0nMScgd2lkdGg9JzMnIGhlaWdodD0nMicgZmlsbD0nI2Q4ZDhkOCcvPgogIDwvZz4KICA8dXNlIHhsaW5rOmhyZWY9JyNjJyB4PSczJyB5PSczJy8+Cjwvc3ZnPg==" x="0" y="0" width="6" height="6"> </image> </pattern> </defs> </svg>
​
​
​
​
​
</body>
​
<script src="//d3js.org/d3.v3.min.js"></script>
​
<script>
  var itemSize = 30,
      cellSize = itemSize,
      margin = {top: 100, right: 20, bottom: 50, left: 250};
​
  var width = 3000 - margin.right - margin.left,
      height = 2000 - margin.top - margin.bottom;
​
  var formatDate = d3.time.format("%Y-%m-%d");
​
  d3.csv('data.csv', function ( response ) {
    var data = response.map(function( item ) {
        var newItem = {};
        newItem.country = item.x;
        newItem.discipline = item.y;
        newItem.value = item.value;
​
        //newItem.discipline = item.discipline;
        // newItem.nation = item.country;
​
        // original: x -> country  y -> product
​
        return newItem;
    })
​
    var x_elements = d3.set(data.map(function( item ) { return item.discipline; } )).values(),
        y_elements = d3.set(data.map(function( item ) { return item.country; } )).values();
​
    var a_elements = d3.set(data.map(function( item ) { return item.discipline; } )).values();
​
    var xScale = d3.scale.ordinal()
        .domain(x_elements)
        .rangeBands([0, x_elements.length * itemSize]);
​
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .tickFormat(function (d) {
            return d;
        })
        .orient("top");
​
    var yScale = d3.scale.ordinal()
        .domain(y_elements)
        .rangeBands([0, y_elements.length * itemSize/2]); //the height of the bar
​
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .tickFormat(function (d) {
            return d;
        })
        .orient("left");
​
    var colorScale = d3.scale.threshold()
        .domain([2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20])
​
        // .range([
        //   "#0168C6", "#186AC0", "#236BBE", "#2F6CBB", "#3A6DB9",
        //   "#466EB6", "#5170B4", "#5D71B1", "#6872AF", "#7473AC",
        //   "#7F74A9", "#8B75A7", "#9676A4", "#A278A2", "#AD799F",
        //   "#B97A9D", "#C47B9A", "#D07C98", "#DB7D95", "#E77F93"
        //   ]);
​
        .range([
          "#ff5722", "#ffccbc", "#ff8a65", "#ff5722", "#e64a19",
          "#bf360c", "#ffeb3b", "#fff9c4", "#fff176", "#ffeb3b",
          "#fbc02d", "#f57f17", "#ffff00", "#8bc34a", "#dcedc8",
          "#9ccc65", "#7cb342", "#558b2f", "#ccff90", "#69f0ae"
          ]);
​
// Pattern
        // .range([
        //   "url(#g)", 
        //   "url(#circles-1)", 
        //   "url(#diagonal-stripe-1)", 
        //   "url(#houndstooth)", 
        //   "url(#dots-7)",
        //   "url(#circles-9)", 
        //   "url(#vertical-stripe-4)", 
        //   "url(#horizontal-stripe-7)", 
        //   "url(#circles-2)", 
        //   "url(#diagonal-stripe-6)",
        //   "url(#dots-9)", 
        //   "url(#horizontal-stripe-1)", 
        //   "url(#circles-4)", 
        //   "url(#vertical-stripe-1)", 
        //   "url(#whitecarbon)",
        //   "url(#aaa)", 
        //   "url(#circles-1)", 
        //   "url(#circles-1)", 
        //   "url(#circles-1)", 
        //   "url(#circles-1)"
        //   ]);
​
        // .range([
        //   "#e57373", "#f06292", "#ba68c8", "#9575cd", "#7986cb",
        //   "#64b5f6", "#4fc3f7", "#4dd0e1", "#4db6ac", "#81c784",
        //   "#aed581", "#dce775", "#fff176", "#ffd54f", "#ffb74d",
        //   "#ff8a65", "#a1887f", "#e0e0e0", "#90a4ae", "wheat"
        //   ]);
​
        //.range(["red", "yellow" ,"blue", "purple", "salmon"]);
        //.range([d3.rgb("#007AFF"), d3.rgb('#FFF500')]);
​
    var svg = d3.select('.heatmap')
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
​
​
    var cells = svg.selectAll('rect')
        .data(data)
        .enter().append('g').append('rect')
        .attr('class', 'cell')
        .attr('width', cellSize)
        .attr('height', cellSize/2)
        .attr('y', function(d) { return yScale(d.country); })
        .attr('x', function(d) { return xScale(d.discipline); })
        //.attr('fill', function(d) { return colorScale(d.value); })
        .on("mouseover", mouseover)
            .on("mousemove", mousemove)
            .on("mouseout", mouseout);
​
    var div = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("display", "none");
    
    //var tooltip = d3.select("body")
    //.append("div")
    //.style("position", "absolute")
    //.style("z-index", "10")
    //.style("visibility", "hidden")
    //.text("a simple tooltip");
​
   // .on("mouseover", function(){return tooltip.style("display","inline");})
   // .on("mousemove", function(){return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
    //.on("mouseout", function(){return tooltip.style("display", "none");});
  
     function mouseover() {
      div.style("display", "inline");
   }
​
     function mousemove() {
      div.text("Student Name" + d3.event.pageX)
     .style("left",100+"px")
     .style("top", 100+ "px");
  }
​
    function mouseout() {
    div.style("display", "none");
   }
     
    
​
​
​
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .selectAll('text')
        .style("fill", "transparent")
        .attr('font-weight', 'normal');
​
    svg.append("g")
        .attr("class", "x axis")
        .call(xAxis)
        .selectAll('text')
        .attr('font-weight', 'normal')
        .style("text-anchor", "start")
        .style("fill", "#de0d78")
        .attr("dx", ".8em")
        .attr("dy", ".5em")
        .attr("transform", function (d) {
            return "rotate(-60)";
        });
​
​
  });
</script> 
​
​
​
​
​
​
​
​
​
​
​
    