使用boxplot 和histogram 可视化疫情数据或其他自己感兴趣的数据选择数据时，要考虑数据本身是否适合boxplot和histogram的特点
boxplot 箱型图又称为盒须图或箱线图，是一种用作显示一组数据分散情况资料的统计图。它主要用于反映原始数据分布的特征，还可以进行多组数据的分布特征的比较。主要包含6个数据节点，将一组数据从大到小排列，分别计算出它的上边缘，上四分位数Q3，中位数，下四分位数Q1，下边缘，还有一个异常值。
可视化的内容是疫情期间华东地区2月5号-2月15号的现存确诊人数，其中华东地区包括上海、江苏、浙江、安徽、江西五个省份。
可视化的过程：首先引入echarts插件文件到html网页中，准备一个具备大小的DOM容器，初始化echarts实例对象，指定配置项和数据（series系列列表，xAxis直角坐标系grid中的X轴，yAxis直角坐标系grid中的Y轴，grid直角坐标系内绘图网格，title标题组件，tooltip提示框组件，legend图例组件），将配置项设置给echarts实例对象
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; var data = echarts.dataTool.prepareBoxplotData([ [238,243,250,250,250,253,252,255,255,235,203], [347,370,396,417,420,431,449,439,456,444,427], [873,908,921,902,891,867,852,818,788,753,730], [568,631,686,719,754,768,777,777,762,746,724], [563,616,643,668,668,676,691,701,712,702,685] ]); option = { title: [ { text:'华东地区2月5号-15号', left: 'center', }, { text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR', borderColor: '#999', borderWidth: 1, textStyle: { fontSize: 14 }, left: '10%', top: '90%' } ], tooltip: { trigger: 'item', axisPointer: { type: 'shadow' } }, grid: {//直角坐标系 left: '10%', right: '10%', bottom: '15%' }, xAxis: { type: 'category', name:'地区', data: ['上海','江苏','浙江','安徽','江西'], boundaryGap: true, nameGap: 30,//坐标轴名称和轴线之间的距离 splitArea: { show: false//坐标轴在grid区域内的分隔区域 }, splitLine: { show: false//是否显示坐标轴线 } }, yAxis: { type: 'value', name: '人数', splitArea: { show: true } }, series: [ { name: 'boxplot', type: 'boxplot', data: data.boxData, tooltip: { formatter: function (param) { return [ 'Experiment ' + param.name + ': ', '上边界: ' + param.data[5], '上四分位数: ' + param.data[4], '中位数: ' + param.data[3], '下四分位数: ' + param.data[2], '下边界: ' + param.data[1] ].join('<br/>'); } } }, { name: '异常值', type: 'scatter', data: data.outliers } ] };; if (option && typeof option === "object") { myChart.setOption(option, true);//使用刚指定的配置项和数据显示 } </script> </body> </html>histogram 直方图又称质量分布图，是一种统计报告图，由一系列高度不等的的纵向条纹或线段表示数据分布的情况，是连续变量的概率分布估计。它可以显示各组频数分布的情况和显示各组之间频数的差别
可视化的内容是疫情期间安徽省2月5号-2月15号的现存确诊人数
可视化的过程：首先引入d3文件到html网页中，先放入数据，定义x轴和y轴的比例尺，设置表头，x轴和y轴，绘制图形，绘制矩形，绘制坐标轴的直线，绘制坐标轴的分隔符直线，绘制文字
<!doctype html> <html> <body></body> <style> div{ background: #F2F4FF; width: 100px; height: 40px; position: absolute; opacity: 0; text-align: center; font-size: 12px; line-height: 40px; } </style> <script src="https://d3js.org/d3.v5.min.js"></script> <script> //数据 let data = [{ key: '2月5号', value: 568 }, { key: '2月6号', value: 631 }, { key: '2月7号', value: 686 }, { key: '2月8号', value: 719 }, { key: '2月9号', value: 754 }, { key: '2月10号', value: 768 }, { key: '2月11号', value: 777 }, { key: '2月12号', value: 777 }, { key: '2月13号', value: 762 }, { key: '2月14号', value: 746 }, { key: '2月15号', value: 724 } ]; let Xdatas = data.map(function(d) {return d.key}), Ydatas = data.map(function(d) {return d.value}); let width = 800, height = 500; //创建x和y的缩放 let x = d3.scaleBand().domain(Xdatas).rangeRound([0, width]).padding(0.1); let y = d3.scaleLinear().domain([0, d3.max(Ydatas)]).rangeRound([height, 0]); let padding = {left: 50, top: 70, right: 50, bottom: 100}; let svg = d3.select('body').append('svg').attr('width', width + padding.left) .attr('height', height + padding.bottom); let g = svg.append('g').attr('transform', 'translate(' + padding.left + ',' + padding.top + ')'); // 表头 svg.append('text').attr('transform', 'translate(' + (width/2 - padding.left) + ',' + padding.top/2 + ')') .attr('font-weight', 600).text('安徽2月5号-15号现存确诊人数'); // x轴和y轴 g.append('g').attr('transform', 'translate(0,' + height + ')') .call(d3.axisBottom(x)) g.append('g').call(d3.axisLeft(y).ticks(10)) .append("text") .attr("fill","#000") .attr("transform","rotate(-90)") .attr("y",6) .attr("dy","0.71em") .attr("text-anchor","end") .text("人数"); chart = g.selectAll('.bar').data(data).enter().append('g'); // 矩形 chart.append('rect') .attr('x', function(d) { return x(d.key); }) .attr('cursor', 'pointer') .attr('y', function(d) { return y(y.domain()[0]) - 5; }) .attr('fill', function(d) { // 生成随机颜色 return '#003366' }) .attr('stroke', '#FFF').attr('stroke-width', '3px') .transition() .delay(function(d, i) { return (i + 1) * 50 }) .duration(2000).ease(d3.easeBounceIn) .attr('y', function(d) { return y(d.value) - 5; }) .attr('width', x.bandwidth()) .attr('height', function(d) { return height - y(d.value); }); // 矩形文字 chart.append('text').attr('fill', '#FFF') .attr('x', function(d) { return x(d.key) + 14; }) .attr('y', function(d) { return y(y.domain()[0]); }) .transition() .delay(function(d, i) { return (i + 1) * 100 }) .duration(2000).ease(d3.easeBounceIn) .attr('y', function(d) { return y(d.value); }) .attr('dx', function(d) { return (x.bandwidth() - padding.left) / 2; }) .attr('dy', 20) .text(function(d) { return d.value }); // 悬浮提示框 tooltip = d3.select('body').append('div'); // hover事件 chart.on('mouseover', function() { d3.select(this).attr('opacity', 0.5); // 悬浮在直方图上时，显示提示框 tooltip.html('我是提示框').transition().duration(500).style('left', d3.event.pageX - 20) .style('top', d3.event.pageY + 20).style('opacity', 1.0); }).on('mouseout', function() { d3.select(this).transition().delay(100).duration(500).attr('opacity', 1.0); }); // 当鼠标移出svg画布时，就将提示框隐藏掉，考虑到鼠标移出时显示的动画还未完成，需要加transition()过滤 svg.on('mouseout', function() { tooltip.transition().style('opacity', 0); }); </script> </html>