數(shù)據(jù)可視化基礎實驗8：完成統(tǒng)計分布類型的圖表

1實驗概述針對一組數(shù)據(jù)進行可視化，可以有效的展示其統(tǒng)計分布規(guī)律。這也是一類常見的圖表，本實驗選取其中最常用的盒形圖和直方圖。實驗目的完成本實驗后，應該能夠制作盒形圖制作直方圖實驗準備為了更好的進行前端代碼編程，我們推薦使用Hbuilder的編輯器，可以到其官網(wǎng)dcloud.io上下載其最新版本。在其“邊改邊看模式”進行代碼修改，可以直接看到顯示效果。在服務器上下載本實驗的代碼模板，插件和數(shù)據(jù)，加入到Hbuilder的項目目錄中，完成實驗環(huán)境準備，就可以開始實驗了。實驗步驟數(shù)據(jù)背景：鳶尾花樣本數(shù)據(jù)是做統(tǒng)計分析中的常見數(shù)據(jù)。本實驗就利用這個數(shù)據(jù)，顯示花萼以及花瓣的統(tǒng)計數(shù)據(jù)。進入實驗環(huán)境：1、使用編輯器打開MyDemo\Test-08\0801-box-plots.html2、設置需要統(tǒng)計的類型，在注釋#1出編寫代碼使用封裝好的boxvarchart=d3.box().whiskers(iqr(1.5))2.height(height);functionconvert(jsonData,type){vardata=d3.nest().key(function(d){}).entries(jsonData);vartemp=[];data.forEach(function(d){varinner=[],i=0;while(d.values.length>i){inner.push(d.values[i][type]);i++;}temp.push(inner)chart.domain([d3.min(jsonData,function(d){returnd[type]}),d3.max(jsonData,function(d){returnd[type]})]);returntemp;}繪制盒子圖在注釋#2出編寫代碼vardata=convert(jsonData,filterKey);varw=30;chart.width(w);varboxPlots=g.selectAll(".box").data(data).enter().append("g").attr("class","box").attr("width",w).attr("height",height).attr("transform",function(d,i){return"translate("+i*(width/data.length)+",0)".call(chart);添加按鈕事件，用于切換展示數(shù)據(jù)d3.selectAll("button").on("click",function(){vard=convert(jsonData,this.innerText);d3.selectAll("button.current").classed("current",false);d3.select(this).classed("current",true)boxPlots.data(d).call(chart.duration(1000))36、使用Chrome打開界面呈現(xiàn)效果如下數(shù)據(jù)背景：根據(jù)2016年的上海每日溫度數(shù)據(jù)，了解上海的溫度的分布特點。我們通過直方圖的對溫度數(shù)據(jù)進行展示。1、使用編輯器打開MyDemo\Test-08\0802-histogram.htmlvarx=d3.scaleLinear().rangeRound([0,width]);vary=d3.scaleLinear().rangeRound([height,0]);使用D3histogramlayout,并設置X，Y軸值域x.domain(d3.extent(csvData));varhistogram=d3.histogram().domain(x.domain()).thresholds(x.ticks(50));vardata=histogram(csvData);y.domain([0,d3.max(data,function(d){returnd.length;})]);4g.append("g").attr("class","axisaxis-x").attr("transform","translate(0,"+height+")").call(d3.axisBottom(x).ticks(50))g.append("g").attr("class","axisaxis-y").call(d3.axisLeft(y));g.selectAll("rect").data(data).enter().append("rect").attr("x",function(d){returnx(d.x0);.attr("y",function(d){returny(d.length);.attr("width",function(d){returnx(d.x1)-x(d.x0);.attr("height",function(d){returnheight-y(d.length);.attr("fill",d3.schemeCategory10[0])6、運行后結果顯示如下7、打開MyDemo\Test-08\0803-histogram-detail.html8、添加提示文字bar.append("text").attr("text-anchor","middle")5.attr("x","1").attr("y","-2").attr("dx",function(d){return(x(d.x1)-x(d.x0))/2.text(function(d){returnd.length;9、添加坐標單位g.append("text").attr("x","0").attr("y","0").attr("dx","-20").attr("text-anchor","middle").text("day");g.append("text").attr("x",width+20).attr("y",