Как создать диаграмму разложения данных по категориям? - PullRequest
Новая
       38

Как создать диаграмму разложения данных по категориям?

0 голосов
/ 28 августа 2018

Я ищу программы или библиотеки, которые позволяют создавать графику, представленную ниже:

Идея заключается в следующем:

  • W имеет начальное значение
  • Он делится на разные состояния
  • Эти деления могут встречаться несколько раз
  • Мы хотим представить имя и значение, связанные с каждым состоянием

Возможно ли сгенерировать такое изображение в Wolfram Mathematica? Если да, какие функции мне следует использовать.

enter image description here

График, представленный на этом изображении, показывает историю использования приложения Tinder.

Источник:

https://www.reddit.com/r/dataisbeautiful/comments/83ttdq/oc_my_28_days_on_tinder/

1 Ответ

0 голосов
/ 03 января 2019

Я решил не использовать Mathematica, но создаю этот график в JavaScript.

https://www.amcharts.com/docs/v4/chart-types/sankey-diagram/

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 *
 * For more information visit:
 * https://www.amcharts.com/
 *
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.SankeyDiagram);

chart.data = [
  { "from": "A", "to": "D", "value": 10 },
  { "from": "B", "to": "D", "value": 8 },
  { "from": "B", "to": "E", "value": 4 },
  { "from": "C", "to": "E", "value": 3 },
  { "from": "D", "to": "G", "value": 5 },
  { "from": "D", "to": "I", "value": 2 },
  { "from": "D", "to": "H", "value": 3 },
  { "from": "E", "to": "H", "value": 6 },
  { "from": "G", "to": "J", "value": 5 },
  { "from": "I", "to": "J", "value": 1 },
  { "from": "H", "to": "J", "value": 9 }
];

chart.dataFields.fromName = "from";
chart.dataFields.toName = "to";
chart.dataFields.value = "value";
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 300px;
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
...