(一)色階圖


1.  前言

     色階圖適合二維的數據,而且橫軸跟縱軸的標簽都比較多。本期的數據:

     Example data shows concurrent user sessions over time, taken from a development environment.

     翻譯過來大意就是:展示的是隨着時間的推移用戶會話並發的個數

     數據結構:

 星期數 時間點 會話數
day hour value
1 1 16

     資料來源鏈接

     圖形:

          

 

2.  色階圖

        1)本地鏈接本地色階圖demo展示

        2)知識點:  1.   怎么畫色階圖

                      2.   讀取csv格式數據畫圖,並且解決中文亂碼問題

                      3.   圖形的轉變效果: d3.transition().duration()

                      4.   x軸文字豎放以及標簽突出重點

        3)圖形效果:

             自己應用的場景:某品牌商想重點關注自己的產品型號在重點電商店鋪的銷量情況,這里涉及的型號和店鋪都很多,導致excel數據表非常的龐大而稀疏,所以用色階圖會比較直觀的展示出top-N的店鋪里哪種型號賣的好,某些特定的型號會在哪些店鋪買的好。顏色的深淺就代表銷量的多少,越深越多,越淺越少。

                    

        4)完整的網頁代碼(內含詳細解釋)

  1 <!DOCTYPE html>
  2 <meta charset="utf-8">
  3 <html>
  4   <head>
  5     <style>   //css樣式區
  6       rect.bordered {stroke: #E6E6E6;stroke-width:2px;}
  7       text.mono {font-size: 9pt;font-family: Consolas, courier;fill: #aaa;}
  8       text.axis-workweek {fill: #000;}
  9       text.axis-worktime {fill: #000;}
 10     </style>
 11     <script src="http://d3js.org/d3.v3.js"></script>
 12   </head>
 13   <body>
 14     <div id="chart"></div>
 15     <div id="dataset-picker">
 16     </div>
 17     <script type="text/javascript">
 18     //1. 先定義一些全局變量
 19       var margin = { top: 80, right: 0, bottom: 100, left: 150 },
 20           width = 1000 - margin.left - margin.right,
 21           height = 800 - margin.top - margin.bottom,
 22           gridSize = Math.floor(width / 73),//格子的大小
 23           legendElementWidth = gridSize*5, //圖例的寬度
 24           buckets = 9,
 25           colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9]
 26           times=[['E408','0'],['E488','0'],['E518','0'],['E568','0'],['G1800','1'],['G2800','1'],['G3800','1'],['IP110','0'],['IP1188','0'],['IP2780','1'],['IP2880S','1'],['IP7280','1'],['IP8780','0'],['IX6580','0'],['IX6780','0'],['IX6880','0'],['LBP151dw','0'],['LBP2900+','0'],['LBP5960(A3)','0'],['LBP6018L','1'],['LBP6018W','0'],['LBP6230dn','1'],['LBP6230dw','0'],['LBP6300dn','0'],['LBP7010C','1'],['LBP7100Cn','0'],['LBP7200Cd','0'],['LBP8100n(A3)','0'],['LBP9100Cdn(A3)','0'],['MF211','0'],['MF212w','1'],['MF215','0'],['MF216n','0'],['MF226dn','0'],['MF229dw','0'],['MF3010','0'],['MF4712','1'],['MF4752','1'],['MF6140dn','0'],['MF621Cn','0'],['MF623Cn','0'],['MF628Cw','0'],['MF725Cdn','0'],['MF727Cdw','0'],['MF810Cdn','0'],['MG2400','0'],['MG2580S','1'],['MG2980','0'],['MG3680','1'],['MG5780','0'],['MG6880','0'],['MG7780','1'],['MP236','0'],['MP288','1'],['MX498','0'],['MX538','0'],['MX728','0'],['MX928','0'],['PRO-1','0'],['PRO-10','0'],['PRO-100','0'],['PRO-500','0']]
 27           days = ['店鋪1','店鋪2','店鋪3','店鋪4','店鋪5','店鋪6','店鋪7','店鋪8','店鋪9','店鋪10','店鋪11','店鋪12','店鋪13','店鋪14','店鋪15','店鋪16','店鋪17','店鋪18','店鋪19','店鋪20','店鋪21','店鋪22','店鋪23','店鋪24','店鋪25','店鋪26','店鋪27','店鋪28','店鋪29','店鋪30','店鋪31','店鋪32','店鋪33','店鋪34','店鋪35','店鋪36','店鋪37','店鋪38','店鋪39','店鋪40','店鋪41','店鋪42','店鋪43','店鋪44','店鋪45','店鋪46','店鋪47','店鋪48','店鋪49','店鋪50','店鋪51','店鋪52','店鋪53','店鋪54','店鋪55','店鋪56','店鋪57','店鋪58','店鋪59','店鋪60','店鋪61','店鋪62','店鋪63','店鋪64','店鋪65','店鋪66','店鋪67','店鋪68','店鋪69','店鋪70','店鋪71','店鋪72','店鋪73','店鋪74','店鋪75','店鋪76','店鋪77','店鋪78','店鋪79','店鋪80','店鋪81','店鋪82','店鋪83','店鋪84','店鋪85','店鋪86','店鋪87','店鋪88','店鋪89','店鋪90','店鋪91','店鋪92','店鋪93','店鋪94','店鋪95','店鋪96','店鋪97','店鋪98','店鋪99','店鋪100','店鋪101','店鋪102','店鋪103','店鋪104','店鋪105','店鋪106','店鋪107','店鋪108','店鋪109','店鋪110','店鋪111','店鋪112','店鋪113','店鋪114','店鋪115','店鋪116','店鋪117','店鋪118','店鋪119','店鋪120']
 28           datasets = ["data.csv", "data2.csv"];  //數據文件變量
 29      //2. 畫布
 30       var svg = d3.select("#chart").append("svg")
 31           .attr("width", width + margin.left + margin.right)
 32           .attr("height", height + margin.top + margin.bottom)
 33           .append("g")
 34           .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 35      //3. 軸Y
 36      var dayLabels = svg.selectAll(".dayLabel")
 37           .data(days)
 38           .enter().append("text")
 39             .text(function (d) { return d; })
 40             .attr("x", 0)
 41             .attr("y", function (d, i) { return i * gridSize; })
 42             .style("text-anchor", "end")
 43             .attr("transform", "translate(-6," + gridSize / 1.5 + ")")
 44             .attr("class", function (d, i) { return ((i >= 0 && i <= 29) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); }) ;//軸標簽是否明顯顯示
 45       //4. 軸X
 46       var timeLabels = svg.selectAll(".timeLabel")
 47           .data(times)
 48           .enter().append("text")
 49             .text(function(d) { return d[0]; })
 50             .attr("x",gridSize)
 51             .attr("y", 0)
 52             .style("text-anchor", "start")
 53             .attr("transform",function(d,i) { return "translate(" + gridSize*(i+1) + ", 8)rotate(" + (- 90) + ")"}) //x軸文字豎放
 54             .attr("class", function(d, i) {console.log(d);return ((d[1]==1) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); })//軸標簽是否明顯顯示
 55 
 56       //5. 定義heatmapChart函數,輸入文件路徑即可畫圖
 57       var heatmapChart = function(tsvFile) {
 58         var csv = d3.dsv(",", "text/csv;charset=gb2312"); //解決中文轉碼
 59         csv(tsvFile,function(d) { return {day: +d.day,hour: +d.hour,value: +d.value};},
 60 
 61         function(error, data) {
 62           var colorScale = d3.scale.quantile() //比例尺:與quantize類似,但輸入值域是獨立的值,適合已經對數據分類的情形。
 63               .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
 64               .range(colors);
 65 
 66           var cards = svg.selectAll(".hour")
 67               .data(data, function(d) {return d.day+':'+d.hour;});
 68 
 69           cards.append("title");
 70 
 71           cards.enter().append("rect")
 72               .attr("x", function(d) { return (d.hour - 1) * gridSize; })
 73               .attr("y", function(d) { return (d.day - 1) * gridSize; })
 74               .attr("rx", 4)
 75               .attr("ry", 4)
 76               .attr("class", "hour bordered")
 77               .attr("width", gridSize)
 78               .attr("height", gridSize)
 79               .style("fill", colors[0]);
 80 
 81          //顏色漸變效果
 82           cards.transition().duration(1000)
 83               .style("fill", function(d) { return colorScale(d.value); });
 84 
 85           cards.select("title").text(function(d) { return d.value; });
 86 
 87           cards.exit().remove();
 88 
 89          //添加圖例
 90           var legend = svg.selectAll(".legend")
 91               .data([0].concat(colorScale.quantiles()), function(d) { return d; });
 92 
 93           legend.enter().append("g")
 94               .attr("class", "legend");
 95 
 96           legend.append("rect")
 97             .attr("x", width-150)
 98             .attr("y",function(d, i) { return legendElementWidth * i; })
 99             .attr("width", legendElementWidth)
100             .attr("height", gridSize / 2)
101             .style("fill", function(d, i) { return colors[i]; });
102 
103           legend.append("text")
104             .attr("class", "mono")
105             .text(function(d) { return "" + Math.round(d); })
106             .attr("x", width-150+gridSize*2)
107             .attr("y",function(d, i) { return legendElementWidth * i-gridSize; })
108              .style("fill", "black");
109           legend.exit().remove();
110 
111         });
112       };
113 
114       //6. 調用前面的heatmapChart函數,輸入數據文件名稱
115       heatmapChart(datasets[0]);
116 
117       //7. 按鈕
118       var datasetpicker = d3.select("#dataset-picker").selectAll(".dataset-button")
119         .data(datasets);
120 
121       datasetpicker.enter()
122         .append("input")
123         .attr("value", function(d){ return "Dataset " + d })
124         .attr("type", "button")
125         .attr("class", "dataset-button")
126         .on("click", function(d) {
127           heatmapChart(d);
128         });
129     </script>
130   </body>
131 </html>
View Code

 

   


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM