小提琴图 - AntV

其他

小提琴图

小提琴图（Violin Plot）用于显示数据分布及概率密度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>小提琴图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<style>
    #mountNode{
        border: 1px solid grey;
        border-radius: 4px;
    }
</style>
<div id="control-panel" style="text-align: center;">
    <label for="bandwidth">bandwidth</label>
    <input id="bandwidth" type="range" min="0.04" max="0.3" step="0.005">
    <span id="bandwidth-value" style="display: inline-block; width: 40px;"></span>
    <label for="step">step</label>
    <input id="step" type="range" min="0.01" max="0.2" step="0.005">
    <span id="step-value" style="display: inline-block; width: 40px;"></span>
</div>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/iris.json', function(data) {
    var $bw = $('#bandwidth');
    var $bwVal = $('#bandwidth-value');
    $bwVal.text($bw.val());
    var $step = $('#step');
    var $stepVal = $('#step-value');
    $stepVal.text($step.val());
    var ds = new DataSet({
      state: {
        bandwidth: parseFloat($bw.val(), 10),
        step: parseFloat($step.val(), 10)
      }
    });
    // #bandwidth input 值变更时更新 bandwidth 值
    $bw.on('input', function() {
      ds.setState('bandwidth', parseFloat($bw.val()));
      $bwVal.text($bw.val());
    });
    // #step input 值变更时更新 step 值
    $step.on('input', function() {
      ds.setState('step', parseFloat($step.val()));
      $stepVal.text($step.val());
    });
    var fields = ['PetalWidth', 'PetalLength', 'SepalWidth', 'SepalLength'];
    // 小提琴图用 KDE transform 提供数据
    var dv1 = ds.createView().source(data).transform({
      type: 'kde',
      bandwidth: '$state.bandwidth', // 计算概率函数的 bandwidth
      step: '$state.step', // 计算采样点的数据间隔。注意不能比采样数据范围大
      extent: [0, 8], // 采样范围
      fields: fields,
      as: ['key', 'y', 'size'], // 生成的统计字段：字段名、采样点、采样点对应的概率值
      groupBy: ['Species'],
      minSize: 0.01 // 小于这个值的概率将被忽略
    });
    // 需要根据分组提供分位值等统计数据，所以提前拍平数据
    var dv2 = ds.createView().source(data);
    dv2.transform({
      type: 'fold',
      fields: fields
    });
    // 计算 95% 分位值，用于画 95% 分位线
    var dv3 = ds.createView().source(dv2).transform({
      type: 'bin.quantile',
      field: 'value',
      as: 'y',
      groupBy: ['key', 'Species'],
      p: [0.025, 0.975]
    });
    // 计算 Q1 和 Q3 分位值，用于画分位线
    var dv4 = ds.createView().source(dv2).transform({
      type: 'bin.quantile',
      field: 'value',
      as: 'y',
      groupBy: ['key', 'Species'],
      p: [1 / 4, 3 / 4]
    });
    // 计算中位值
    var dv5 = ds.createView().source(dv2).transform({
      type: 'aggregate',
      fields: ['value'],
      operations: ['median'],
      as: ['y'],
      groupBy: ['key', 'Species']
    });
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight - $('#control-panel').height() - 2,
      padding: 'auto',
      theme: {
        widthRatio: {
          column: 0.7 // 小提琴图最宽处占总宽度的比例
        }
      }
    });
    chart.scale({
      key: {
        sync: true
      }, // key 字段在其中一个 view 映射到 color 了，在其他所以需要同步，否则
      y: {
        sync: true
      }
    });
    // chart.coord('polar');
    chart.axis('key', {
      grid: {
        zIndex: -1,
        align: 'center',
        alternateColor: '#f5f5f5',
        type: 'polygon',
        lineStyle: {
          stroke: 'white'
        }
      },
      tickLine: {
        alignWithLabel: false
      }
    });
    chart.axis('y', {
      line: G2.Global.axis.top.line,
      tickLine: G2.Global.axis.top.tickLine,
      grid: null
    });
    var adjustCfg = [{
      type: 'dodge',
      marginRatio: 1 / 32
    }];
    // violin plot
    var view1 = chart.view();
    view1.source(dv1);
    view1.violin().position('key*y').color('Species').adjust(adjustCfg)
      // .shape('smooth')
      // .shape('smoothHollow')
      .size('size').style({
        lineWidth: 1,
        fillOpacity: 0.3,
        strokeOpacity: 0.75
      }).tooltip(false);
    // 95% confidence interval
    var view3 = chart.view();
    view3.source(dv3);
    view3.interval().position('key*y').color('Species').adjust(adjustCfg).size(1).style({
      fill: 'black',
      lineWidth: 0
    }).tooltip(false);
    // Q1 / Q3
    var view4 = chart.view();
    view4.source(dv4);
    view4.interval().position('key*y').color('Species').adjust(adjustCfg).size(8).style({
      fill: 'black',
      fillOpacity: 1
    }).tooltip('y', function(value) {
      return {
        name: 'Q1-Q3',
        value: value
      };
    });
    // median
    var view5 = chart.view();
    view5.source(dv5);
    view5.point().position('key*y').color('Species').adjust(adjustCfg).size(3).style({
      fill: 'white',
      lineWidth: 0
    }).tooltip('y', function(value) {
      return {
        name: 'Median',
        value: value
      };
    });
    chart.render();
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>小提琴图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<style>
    #mountNode{
        border: 1px solid grey;
        border-radius: 4px;
    }
</style>
<div id="control-panel" style="text-align: center;">
    <label for="bandwidth">bandwidth</label>
    <input id="bandwidth" type="range" min="0.04" max="0.3" step="0.005">
    <span id="bandwidth-value" style="display: inline-block; width: 40px;"></span>
    <label for="step">step</label>
    <input id="step" type="range" min="0.01" max="0.2" step="0.005">
    <span id="step-value" style="display: inline-block; width: 40px;"></span>
</div>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/iris.json', function(data) {
    var $bw = $('#bandwidth');
    var $bwVal = $('#bandwidth-value');
    $bwVal.text($bw.val());
    var $step = $('#step');
    var $stepVal = $('#step-value');
    $stepVal.text($step.val());
    var ds = new DataSet({
      state: {
        bandwidth: parseFloat($bw.val(), 10),
        step: parseFloat($step.val(), 10)
      }
    });
    // #bandwidth input 值变更时更新 bandwidth 值
    $bw.on('input', function() {
      ds.setState('bandwidth', parseFloat($bw.val()));
      $bwVal.text($bw.val());
    });
    // #step input 值变更时更新 step 值
    $step.on('input', function() {
      ds.setState('step', parseFloat($step.val()));
      $stepVal.text($step.val());
    });
    var fields = ['PetalWidth', 'PetalLength', 'SepalWidth', 'SepalLength'];
    // 小提琴图用 KDE transform 提供数据
    var dv1 = ds.createView().source(data).transform({
      type: 'kde',
      bandwidth: '$state.bandwidth', // 计算概率函数的 bandwidth
      step: '$state.step', // 计算采样点的数据间隔。注意不能比采样数据范围大
      extent: [0, 8], // 采样范围
      fields: fields,
      as: ['key', 'y', 'size'], // 生成的统计字段：字段名、采样点、采样点对应的概率值
      groupBy: ['Species'],
      minSize: 0.01 // 小于这个值的概率将被忽略
    });
    // 需要根据分组提供分位值等统计数据，所以提前拍平数据
    var dv2 = ds.createView().source(data);
    dv2.transform({
      type: 'fold',
      fields: fields
    });
    // 计算 95% 分位值，用于画 95% 分位线
    var dv3 = ds.createView().source(dv2).transform({
      type: 'bin.quantile',
      field: 'value',
      as: 'y',
      groupBy: ['key', 'Species'],
      p: [0.025, 0.975]
    });
    // 计算 Q1 和 Q3 分位值，用于画分位线
    var dv4 = ds.createView().source(dv2).transform({
      type: 'bin.quantile',
      field: 'value',
      as: 'y',
      groupBy: ['key', 'Species'],
      p: [1 / 4, 3 / 4]
    });
    // 计算中位值
    var dv5 = ds.createView().source(dv2).transform({
      type: 'aggregate',
      fields: ['value'],
      operations: ['median'],
      as: ['y'],
      groupBy: ['key', 'Species']
    });
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight - $('#control-panel').height() - 2,
      padding: 'auto',
      theme: {
        widthRatio: {
          column: 0.7 // 小提琴图最宽处占总宽度的比例
        }
      }
    });
    chart.scale({
      key: {
        sync: true
      }, // key 字段在其中一个 view 映射到 color 了，在其他所以需要同步，否则
      y: {
        sync: true
      }
    });
    // chart.coord('polar');
    chart.axis('key', {
      grid: {
        zIndex: -1,
        align: 'center',
        alternateColor: '#f5f5f5',
        type: 'polygon',
        lineStyle: {
          stroke: 'white'
        }
      },
      tickLine: {
        alignWithLabel: false
      }
    });
    chart.axis('y', {
      line: G2.Global.axis.top.line,
      tickLine: G2.Global.axis.top.tickLine,
      grid: null
    });
    var adjustCfg = [{
      type: 'dodge',
      marginRatio: 1 / 32
    }];
    // violin plot
    var view1 = chart.view();
    view1.source(dv1);
    view1.violin().position('key*y').color('Species').adjust(adjustCfg)
      // .shape('smooth')
      // .shape('smoothHollow')
      .size('size').style({
        lineWidth: 1,
        fillOpacity: 0.3,
        strokeOpacity: 0.75
      }).tooltip(false);
    // 95% confidence interval
    var view3 = chart.view();
    view3.source(dv3);
    view3.interval().position('key*y').color('Species').adjust(adjustCfg).size(1).style({
      fill: 'black',
      lineWidth: 0
    }).tooltip(false);
    // Q1 / Q3
    var view4 = chart.view();
    view4.source(dv4);
    view4.interval().position('key*y').color('Species').adjust(adjustCfg).size(8).style({
      fill: 'black',
      fillOpacity: 1
    }).tooltip('y', function(value) {
      return {
        name: 'Q1-Q3',
        value: value
      };
    });
    // median
    var view5 = chart.view();
    view5.source(dv5);
    view5.point().position('key*y').color('Species').adjust(adjustCfg).size(3).style({
      fill: 'white',
      lineWidth: 0
    }).tooltip('y', function(value) {
      return {
        name: 'Median',
        value: value
      };
    });
    chart.render();
  });
</script>
</body>
</html>

图表简介

小提琴图（Violin Plot）用于显示数据分布及概率密度

图表用法

小提琴图结合了箱型图和密度图的特征，用于展示数据的分布形状。粗黑线表示四分数范围，延伸的细线表示95%的置信区间，白点为中位数。小提琴图弥补了箱型图的不足，可以展示数据分布是双模还是多模

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

相关链接