Advance Chart

forked from Dlanka's block: Chart

forked from Dlanka's block: Advance Chart

<!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>
  <script>
    
   	var h   = 500,
        w   = 800,
        margin = {top:20,right:20,bottom:20,left:30},
   			height = h - (margin.top + margin.bottom),
        width  = w - (margin.left + margin.right);
    
    var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h);
   
    var yScale = d3.scaleLinear()
      .range([height,0]);
    
    var yAxis = d3.axisLeft()
      .scale(yScale);
        
    var xScale = d3.scaleOrdinal()
    .range([0,100,200,300,400,500]);
    
    var xAxis = d3.axisBottom()
      .scale(xScale);
    
    d3.json('data.json',function(error,data){
      
      var max = d3.max(data,function(d){return d.count});
      var city = data.map(function(d){
        return d.name;
      })
      
    	yScale.domain([0,max]);
           
      xScale.domain(city);
      
      var leftAxis = svg.append('g')
      .attr('transform','translate('+[margin.left,margin.top]+')')
      .call(yAxis);
          
      var bottomAxis = svg.append('g')
      .attr('transform','translate('+[30,480]+')')
      .call(xAxis);
      
    });

</script>
</body>

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