D3 Examples - Interactive Color Heatmap and Legend

Interactive Color Heatmap and Legend

This visualization was made for Datacanvas: Sense Your City, Data Art Visualization Challenge. The paired colors represent different environmental data from the sensors. The whole chart includes one week of March 2015. Each rectangle represents data from one hour. Dust data measurements are in pcs/mL.

I wanted a heatmap that represented changing environmental factors in each city. I wanted to use contrasting colors that popped. I also created an extra javascript file to make the legend. You can see the final version in my webpage Databayou.

Built with blockbuilder.orgBuilt with blockbuilder.org

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="sensedata.json"></script>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<style>
#top {
        width: 650px;
        margin: 0 auto; 
    }
#bottom {
    width: 700px;
    margin: 0 auto; 
}
input:hover {
  background: #E6E6FA;
}
.city {
    -webkit-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
    -moz-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
    box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
    background-color:#fff;
    border:1px solid #4682B4;
    font-family:'Lucida Grande',Tahoma,Verdana,Arial,sans-serif;
    font-size:12px;
    font-weight:700;
    padding:2px 6px;
    height:25px;
    color:#4682B4;
    border-radius:2px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    margin:0 auto;
}
#viz {
    width: 1024px;
    margin: 0 auto;
}
.leyenda {
    width: 300px;
    margin: 0 auto;
}
.element {
    -webkit-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
    -moz-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
    box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
    background-color:#fff;
    border:1px solid #FF0000;
    font-family:'Lucida Grande',Tahoma,Verdana,Arial,sans-serif;
    font-size:12px;
    font-weight:700;
    padding:2px 6px;
    height:25px;
    color:#FF0000;
    border-radius:2px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    width:100px;
} 
.tooltip {   
    position: absolute;
    top:40px;
    left:40px;
    width: 350;
    height: 200;          
    text-align: left;
    padding: 4px;             
    font: 13px Arial, Verdana, sans-serif;        
    background: white;  
    border: 3px;
    border-radius: 8px;  
    border-color: #4682B4;
    color: #4682B4;
    display: block; 
    z-index: 1;
}   
​
</style>
​
</head>
    <body>
    <div class="header">
        
                <div id="top">
                            <input name="ban" 
                                   class="city"
                                   type="button" 
                                   value="Bangalore" 
                                   onclick="banData()" />
                            <input name="bos" 
                                   class="city"
                                   type="button" 
                                   value="Boston" 
                                   onclick="bosData()" />   
                            <input name="gen"  
                                   class="city"
                                   type="button" 
                                   value="Geneva" 
                                   onclick="genData()" />   
                            <input name="rio" 
                                   class="city"
                                   type="button" 
                                   value="Rio de Janeiro" 
                                   onclick="rioData()" />     
                            <input name="san" 
                                   class="city" 
                                   type="button" 
                                   value="San Francisco" 
                                   onclick="sanData()" />                                                   
                           <input name="shang" 
                                  class="city"
                                  type="button" 
                                  value="Shanghai" 
                                  onclick="shangData()" />  
                          <input name="sing" 
                                 class="city"
                                  type="button" 
                                  value="Singapore" 
                                  onclick="singData()" />         
                </div>                                
                                 
    </div>
                <div id="viz">
                     <script type="text/javascript" src="sense.js"></script>
                     <script type="text/javascript"></script> 
                </div>
    
                <div id="legend" class="leyenda">
                    <script type="text/javascript" src="legend.js"></script>
                     <script type="text/javascript"></script>
                </div>   
         
 
    <div id="bottom">
            
                            <input name="temp" 
                                   class="element"
                                   type="button" 
                                   value="Temperature" 
                                   onclick="tempData(); legtempData();" />
                    
                            <input name="lig" 
                                   class="element"
                                   type="button" 
                                   value="Light" 
                                   onclick="ligData() ;legligData();" /> 
               
                            <input name="air" 
                                   class="element"
                                  type="button" 
                                  value="Air Pollution" 
                                  onclick="airData(); legairData();" />
              
                            <input name="sou" 
                                   class="element"
                                   type="button" 
                                   value="Noise" 
                                   onclick="souData(); legsouData();" /> 
                                   
                            <input name="hum" 
                                   class="element"
                                   type="button" 
                                   value="Humidity" 
                                   onclick="humData(); leghumData();"  /> 
                                   
                           <input name="dus" 
                                  class="element"
                                  type="button" 
                                  value="Dust" 
                                  onclick="dusData(); legdusData();" />
    </div>  
        
    </body>
</html>
​
    