Old school D3 from simpler times

All examples By author By category About

JuanSMartinez

Full window Github gist

Bono Parcial

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
<body>
  <div id="charts"></div>
  <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
  <script>
    var margin = {top: 20, right: 20, bottom: 30, left: 300},
    totalWidth = 850,
    totalHeight = 700,
    width = totalWidth - margin.left - margin.right,
    height = totalHeight - margin.top - margin.bottom,
    tolerance = 50,
    effHeight = height/2 - tolerance;
    
    //Scales for X and Y axis for linear chart
    var xScaleHacks = d3.scaleLinear().range([0, width]);
    var yScaleHacks = d3.scaleLinear().range([0, effHeight]);
    
    //Scales for X and Y axis for bar chart
    var xScaleEntities = d3.scaleLinear().range([0, width]);
    var yScaleEntities = d3.scaleOrdinal();
  
    //charts
 		var svg = d3.select("#charts").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 + ")");

function plot(data){
      var selection = "hacked";
      var filtered = [];
      for(i in data){
        var noinsert = $.inArray(data[i].name, filtered) > -1 || $.inArray(selection, data[i].methods) == -1;
        if(!noinsert){
          filtered.push(data[i].name);
        }
      }
      var space = effHeight/filtered.length;
      var ranges = [];
      for(i in filtered){
        ranges.push(space*i);
      }
      console.log("Filtered:",filtered);
      console.log("Ranges:", ranges);
      var fnAccXHacks = function(d){return d.year;};
      var fnAccXEntities = function(d){return d.records;};
      var fnAccYHacks = function(d){return d.records;};
      
      
      //X Axis
      xScaleHacks.domain([d3.min(data, fnAccXHacks), d3.max(data, fnAccXHacks)]);
      xScaleEntities.domain([d3.min(data, fnAccXEntities), 
                             d3.max(data, fnAccXEntities)]);
      var xAxis1 = d3.axisBottom(xScaleHacks);
      var xAxis2 = d3.axisBottom(xScaleEntities);
      
      //Y Axis
      yScaleHacks.domain([d3.max(data, fnAccYHacks), d3.min(data, fnAccYHacks)]);
      yScaleEntities.domain(filtered).range(ranges);
      
      var yAxis1 = d3.axisLeft(yScaleHacks);
      var yAxis2 = d3.axisLeft(yScaleEntities);
      
    	svg.append('g')
      		.attr("transform", "translate(0," + effHeight + ")")
        	.call(xAxis1);
      svg.append('g')
        	.call(yAxis1);
      svg.append('g')
        	.attr("transform", "translate(0," + (effHeight+tolerance)+ ")")
        	.call(xAxis2);
      svg.append('g')
      		.attr("transform", "translate(0," + (effHeight+tolerance)+ ")")
        	.call(yAxis2);
 
      
      //Enter
     
     	
      //Exit
      
      //Update
      
      
    }
    
    d3.csv('data2016.csv',function(hacks){
      var data = [];
      hacks.forEach(function(d){
        var object = new Object();
        if(parseInt(d["metric_001"])){
          object.name = d["name"];
          object.year = parseInt(d["primaryvalue"]) + 2004; 
          object.records = parseInt(d["metric_001"]);
          var types = d["type"].split(",");
          object.methods = types.map(function(method){
            return method.trim();
          });
          data.push(object);
        }
      })
      plot(data);
    });

</script>
</body>

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

https://code.jquery.com/jquery-3.1.1.min.js