Projet Data Visualisation

forked from mbostock's block: Nested Treemap

<style>

.toolTip {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: absolute;
        display: none;
        width: auto;
        height: auto;
        background: none repeat scroll 0 0 white;
        border: 0 none;
        border-radius: 8px 8px 8px 8px;
        box-shadow: -3px 3px 15px #888888;
        color: black;
        font: 12px sans-serif;
        padding: 5px;
        text-align: center;
    }
  
  
  
.node circle {
  fill: #999;
}
.node text {
  font: 10px sans-serif;
}
.node--internal circle {
  fill: #555;
}
.node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
  
.link {
  fill: none;
  stroke: #555;
  stroke-opacity: 0.4;
  stroke-width: 1.5px;
} 
text {
  font: 10px sans-serif;
}
g .youyou {
  font: 15px sans-serif;
}
.lien {
  font: 13px sans-serif;
}
.legende {
  font: 13px sans-serif;
  color:#C0C0C0;
}
.legende {
  font: 16px sans-serif;
  color:#C0C0C0;
}
  .titre {
  font: 60px sans-serif;
}
tspan:last-child {
  font-size: 9px;
  fill-opacity: 0.8;
}
.node rect {
  shape-rendering: crispEdges;
}
.node--hover rect {
  stroke: #000;
}
.link {
  fill: none;
  stroke: #555;
  stroke-opacity: 0.4;
  stroke-width: 1.5px;
}
</style>
</head>
<body>
<svg width="965" height="750"></svg>
<script src="//d3js.org/d3.v4.0.0-alpha.35.min.js"></script>

var div = d3.select("body").append("div").attr("class", "toolTip");
  
  var svg = d3.select("svg"),
    width = +svg.attr("width")/2,
    height = +svg.attr("height")/2;

g2 = svg.append("g").attr("transform", "translate(" + (0) + "," + (100) + ")"); 
  
  svg.call(d3.zoom()
    .scaleExtent([100, 100])
    .on("zoom", zoomed));

function zoomed() {
  g1.attr("transform", d3.event.transform);
}

var container1 = svg.append('g').attr("id","sommaire");  
var svg1= d3.select("body").append("svg").attr("width", 960).attr("height", 2000);
  g1 = svg1.append("g").attr("transform", "translate(" + (width / 2 +800) + "," + (800) + ")");
    var texte = svg.append("text")
    		.text("Fichiers d'un utilisateur (Windows)")
    		.attr('x',10)
    		.attr('y',50)
        .attr("class","titre")
    		.attr("font-size", "50px")
  			.attr("font-family","Times New Roman")      
  			.attr("fill", "#2F4F4F");
  var texte = container1.append("text")
    		.text("Espace total occupé par chaque types de fichier")
    		.attr('x',610)
    		.attr('y',150)
        .attr("class","youyou")
    		.attr("font-size", "20px")
  			.attr("font-family","Times New Roman")      
  			.attr("fill", "#2F4F4F");
  
var stratify1 = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
var tree = d3.tree()
    .size([360, 500])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

//********************************************************************* 
d3.csv("flare.csv", function(error, data) {
  
  if (error) throw error;

d3.csv("dossiers", function(error, data) {
  
  if (error) throw error;
 
  
 var types = ["pdf)", "txt)","png)","jpg)", "mp4)","jar)","zip)","csv)","json","pptx","docx)"];
toString =JSON.stringify(types);
  for (var i=0; i<data.length; i++){

if (!(typeof data[i].value === "undefined")){
     type=data[i].id.split("(")[1];

switch (type) { 
      case "pdf)": 
         // console.log(data[i].value);
        result[0].valeur+=+data[i].value;
        break;
      case "txt)":
                result[1].valeur+=+data[i].value;
        break;
      case "png)":
                result[2].valeur+=+data[i].value;
        break;
      case "jpg)":
                result[3].valeur+=+data[i].value;
        break;
      case "mp4)":
          result[4].valeur+=+data[i].value;
        break;
       case "jar)":
          result[5].valeur+=+data[i].value;
        break;
         case "zip)":
          result[6].valeur+=+data[i].value;
        break;
                case "csv)":
          result[7].valeur+=+data[i].value;
        break;
                case "json)":
          result[8].valeur+=+data[i].value;
        break;
                case "pptx)":
          result[9].valeur+=+data[i].value;
        break;
                case "docx)":
          result[10].valeur+=+data[i].value;
        break;

default:
   
    }
     
   }
  }
  //"pdf)", "txt)","png)","jpg)", "mp4)","jar)","zip)","csv)","json","pptx","docx)"
  data = [{cat:"pdf)",value:result[0].valeur},{cat:"txt)",value:result[1].valeur},
         {cat:"png)",value:result[2].valeur},{cat:"jpg)",value:result[3].valeur},
         {cat:"mp4)",value:result[4].valeur},{cat:"jar)",value:result[5].valeur},
         {cat:"zip)",value:result[6].valeur},{cat:"csv)",value:result[7].valeur},
         {cat:"json)",value:result[8].valeur},{cat:"pptx)",value:result[9].valeur},
         {cat:"docx)",value:result[10].valeur}];
  
  var bars=container1.selectAll("rect")
	.data(data)
	.enter()
		.append("rect")
			.attr("width", function(d){ console.log(d.value);  return (2/3)*d.value/100000;})
			.attr("height", 40)
		  .attr("x", 700)  
			.attr("y", function(i,j){return j*50 +200;})
			.attr("fill", function(d){console.log(d.cat); return colorBar(d.cat); });
 
  container1.append("text").text("pdf").attr('x',660).attr('y',230).attr("class","legende");
container1.append("text").text("txt").attr('x',660).attr('y',280).attr("class","legende");
container1.append("text").text("png").attr('x',660).attr('y',330).attr("class","legende");
container1.append("text").text("jpg").attr('x',660).attr('y',380).attr("class","legende");
  container1.append("text").text("mp4").attr('x',660).attr('y',430).attr("class","legende");
container1.append("text").text("jar").attr('x',660).attr('y',480).attr("class","legende");
container1.append("text").text("zip").attr('x',660).attr('y',530).attr("class","legende");
container1.append("text").text("csv").attr('x',660).attr('y',580).attr("class","legende");
container1.append("text").text("json").attr('x',660).attr('y',630).attr("class","legende");
container1.append("text").text("pptx)").attr('x',660).attr('y',680).attr("class","legende");         container1.append("text").text("docx").attr('x',660).attr('y',730).attr("class","legende");
container1.append("text").text("Radial Tidy Tree (Mike Bostock)").attr("class","tiddy").attr('x',10).attr('y',730).attr("class","legende");
          
});

//*********************************************************************

https://d3js.org/d3.v4.0.0-alpha.35.min.js

https://d3js.org/d3.v4.min.js