数据可视化基础实验8：完成统计分布类型的图表

1实验概述针对一组数据进行可视化，可以有效的展示其统计分布规律。这也是一类常见的图表，本实验选取其中最常用的盒形图和直方图。实验目的完成本实验后，应该能够制作盒形图制作直方图实验准备为了更好的进行前端代码编程，我们推荐使用Hbuilder的编辑器，可以到其官网dcloud.io上下载其最新版本。在其“边改边看模式”进行代码修改，可以直接看到显示效果。在服务器上下载本实验的代码模板，插件和数据，加入到Hbuilder的项目目录中，完成实验环境准备，就可以开始实验了。实验步骤数据背景：鸢尾花样本数据是做统计分析中的常见数据。本实验就利用这个数据，显示花萼以及花瓣的统计数据。进入实验环境：1、使用编辑器打开MyDemo\Test-08\0801-box-plots.html2、设置需要统计的类型，在注释#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);添加按钮事件，用于切换展示数据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打开界面呈现效果如下数据背景：根据2016年的上海每日温度数据，了解上海的温度的分布特点。我们通过直方图的对温度数据进行展示。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",