D3-GDP_ST

In this example below you will see how to do a D3-GDP_ST with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by qinghaozhao, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright qinghaozhao ©
  • HTML
  • CSS
  • JavaScript
    <div class="title"><h2>美国GDP</h2></div>
<div class="chart">

<div class="d3Demo"></div>
  
  </div>

/*Downloaded from https://www.codeseek.co/qinghaozhao/d3-gdp_st-RGymyV */
    .title{
  text-align:center;
}

.chart{
   width:1100px;
    height:600px;
   margin: 0px auto;
}
.d3Demo{
  width:1020px;
  height:600px;
  margin: 0px auto;
  background-color:#eeeeee;

}
.svg{
 padding:1px;
 margin:2px auto;
 width:1000;
  height:600;
}
.tooltip{
	position:absolute;
	background-color:#aaaaaa;
}
.rect{
	fill: #4AB5F0;
}
.rect:hover{
	fill: #00ff00;
}


/*Downloaded from https://www.codeseek.co/qinghaozhao/d3-gdp_st-RGymyV */
    $(document).ready(onReady)
function onReady(){
	var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
	var formatCurrency = d3.format("$,.2f");
   var url = 'http://2am.ninja/json/gdp.json';
   $.getJSON(url,function(jsonData){
      console.log(1);
      var data = jsonData.data;
     
      //d3.select(".d3Demo").append("text").text(jsonData.description);
     
    //margin
     var margin = { top: 20,
        right: 20,
        bottom: 20,
        left: 20}
     //宽高 以及单个柱图宽
     var width = 1020- margin.left - margin.right;
     var height= 600- margin.top-margin.bottom;
     var xwidth = width/data.length;
    
     //最大时间最小时间
    minDate = new Date(data[0][0]);
    maxDate = new Date(data[274][0]);
     //x比例与y比例定义
     var xs = d3.scaleTime().domain([minDate,maxDate]).range([0,width]);
     var ys = d3.scaleLinear().range([height,0]).domain([0,d3.max(data,function(d){
       return d[1];
     })]);
     //拿到x轴 y轴
     var xAxis = d3.axisBottom(xs);
     xs.ticks(20);
     
     var yAxis = d3.axisLeft(ys);
     //这个定义没有用,应该是time轴自己有特殊定义
     ys.ticks(15);
      
     //tooltip的div
                  
       var div = d3.select(".d3Demo").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);
      
     
     //svg 定义宽高 引用样式 
     var svg = d3.select(".d3Demo").append("svg");
     svg.attr("class","svg");
     svg.attr("width",1000);
     svg.attr("height",600);
     //x轴的标尺显示
     svg.append("g")
       .attr("transform","translate(60,"+height+")")
       .attr("class","xAxis")
       .call(xAxis);
     //y轴标尺显示
     svg.append("g")
       .attr("transform", "translate(55,18)")
       .attr("class","yAxis")
       .call(yAxis);
     //单个柱图
     rect = svg.selectAll(".rect")
       .data(data)
       .enter()
       .append("rect");
     
     //每个柱图的位置宽高
     rect.attr("transform","translate(60,0)");
     rect.attr("class", "rect");
     rect.attr("x",function(d,i){
       return xs(new Date(d[0]));
     });
     rect.attr("y",function(d){
       return ys(d[1]);
     });
     rect.attr("width",xwidth);
     rect.attr("height",function(d){
       return height-ys(d[1]);
     })
     //移入柱图时添加tip
     rect.on("mouseover",function(d){
     	 var rect = d3.select(this);
        var currentDateTime = new Date(d[0]);
        var year = currentDateTime.getFullYear();
        var month = currentDateTime.getMonth();	
        var dollars = d[1];
        div.transition()
          .duration(200)
          .style("opacity", 0.9);
        div.html("<span class='amount'>" + formatCurrency(dollars) + "&nbsp;Billion </span><br><span class='year'>" + year + ' - ' + months[month] + "</span>")
          .style("left", (d3.event.pageX + 5) + "px")
          .style("top", (d3.event.pageY - 50) + "px");
     })
     //移除清空
     rect.on("mouseout",function(){
     	div.html("");
     })
   });
}

Comments