D3 chart for Nitish Mumbai

Author: Roydon D' Souza www.roydondsouza.com

by Roydon DSouza

HTML

<script src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<div id="chart"></div>


<div id="cover">
    <div id="popup">
    <span class="close">X</span>
    <span id="popup_content"></span>
    </div>
</div>

CSS

body{
    color: black;
    font-family: Arial;   
}
#popup{
    z-index:200;
    position: absolute;
    width: 200px;
    height: 100px;
    top:100px;
    left:100px;
    background:#fff;
    border: 1px solid #000;
    display: block;
    padding: 20px;
    border-radius: 10px;
}

.item{
    cursor: pointer;
}

.close{
    top: -10px;
    left: 195px;
    cursor:pointer;
    position: relative; 
}

#cover {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width:100%;
  height:100%
  z-index: 190;
  background-color: rgb(255,255,255);
  background-color: rgba(255,255,255,.9);
  -webkit-animation: fade-in .25s ease-in;
  -moz-animation-name: fade-in .25s ease-in;
  -ms-animation-name: fade-in .25s ease-in;
  -o-animation-name: fade-in .25s ease-in;
  animation-name: fade-in .25s ease-in;
}

li {
    list-style-type: none;
}

JavaScript

//defining the height and width of the svg container here
//will be assigning it to svg later
var width = 960,
    height = 500,
    // get this data from a http request using jquery AJAX 
    // or using some front-end http library
    // since I use angularJS I usually rely on promises in JS
    data = [{
        name: "Twitter",
        id: 245,
        link: "twitter.com"
    },{
        name: "Google",
        id: 243,
        link: "google.com"
    },{
        name: "Github",
        id: 344,
        link: "github.com"
    }];
    
 
// appending svg inside the container
var svg = d3.select("#chart").append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .append("svg:g");

 
// Add a group for each cause.
var item = svg.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("class", "item")

item.append("rect")
//change this logic below to place object on the svg canvas
    .attr("x", function(d,i) { return i * 110; })
    .attr("y", function(d,i) { return 1; })
    .attr("height", 100)
    .attr("width", 100)
    .style("fill", 'black')

item.on('click', function(d){
    //using jquery here to full content into the div
    //there are better ways to do it, explore it online
    $('#cover').show();
    $('#popup_content').html("<li>"+d.name+" :"+d.id+"</li><li><a target='_blank' href='http://"+d.link+"/"+d.id+"'>click here</a></li>");
    
})

item.append("text")
.text(function(d){
    return d.name+ " :"+d.id ;
})
.attr("x", function(d,i) { return (100*i) + (i*10); })
.attr("y", function(d,i) { return 100/2; })
.attr("fill",'#fff');




//jQuery for popup controls
//relace this with a library like light box to take care of you html popup

$('.close').click(function(){
        $('#cover').hide();
})
$('#cover').click(function(){
        $('#cover').hide();
})