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

1實(shí)驗(yàn)概述針對(duì)一組數(shù)據(jù)進(jìn)行可視化，可以有效的展示其統(tǒng)計(jì)分布規(guī)律。這也是一類常見(jiàn)的圖表，本實(shí)驗(yàn)選取其中最常用的盒形圖和直方圖。實(shí)驗(yàn)?zāi)康耐瓿杀緦?shí)驗(yàn)后，應(yīng)該能夠制作盒形圖制作直方圖實(shí)驗(yàn)準(zhǔn)備為了更好的進(jìn)行前端代碼編程，我們推薦使用Hbuilder的編輯器，可以到其官網(wǎng)dcloud.io上下載其最新版本。在其“邊改邊看模式”進(jìn)行代碼修改，可以直接看到顯示效果。在服務(wù)器上下載本實(shí)驗(yàn)的代碼模板，插件和數(shù)據(jù)，加入到Hbuilder的項(xiàng)目目錄中，完成實(shí)驗(yàn)環(huán)境準(zhǔn)備，就可以開(kāi)始實(shí)驗(yàn)了。實(shí)驗(yàn)步驟數(shù)據(jù)背景：鳶尾花樣本數(shù)據(jù)是做統(tǒng)計(jì)分析中的常見(jiàn)數(shù)據(jù)。本實(shí)驗(yàn)就利用這個(gè)數(shù)據(jù)，顯示花萼以及花瓣的統(tǒng)計(jì)數(shù)據(jù)。進(jìn)入實(shí)驗(yàn)環(huán)境：1、使用編輯器打開(kāi)MyDemo\Test-08\0801-box-plots.html2、設(shè)置需要統(tǒng)計(jì)的類型，在注釋#1出編寫(xiě)代碼使用封裝好的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出編寫(xiě)代碼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打開(kāi)界面呈現(xiàn)效果如下數(shù)據(jù)背景：根據(jù)2016年的上海每日溫度數(shù)據(jù)，了解上海的溫度的分布特點(diǎn)。我們通過(guò)直方圖的對(duì)溫度數(shù)據(jù)進(jìn)行展示。1、使用編輯器打開(kāi)MyDemo\Test-08\0802-histogram.htmlvarx=d3.scaleLinear().rangeRound([0,width]);vary=d3.scaleLinear().rangeRound([height,0]);使用D3histogramlayout,并設(shè)置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、運(yùn)行后結(jié)果顯示如下7、打開(kāi)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、添加坐標(biāo)單位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",