# 共生矩阵Flask和D3.js可视化销售数据和Python分析论文重叠主题

{% tabs %}
{% tab title="关键词" %}
Flask | Python | D3.js | 数据可视化 | 共生矩阵图
{% endtab %}

{% tab title="梗概" %}
### 示例1：矩阵图可视化销售数据

应用矩阵图可视化销售额数据，建立一个矩阵显示品牌的共现。

### 构建Flask

在Flask以结构化格式复现销售额度数据。结构：

* /templates: index.html 仪表盘页面的 HTML 源代码
* /js/libs：用于渲染 D3.js 的 javascript 库
* /js/matrix.js：用于使用 miserables.json 呈现仪表板的脚本
* /static/miserables.json：matrix.js 用来渲染的 JSON 文件
* /CSS：用于呈现页面的 CSS 文件

使用Flask和D3.js 渲染数据。

### 数据集转换成JSON

构建数据间的节点和连接。最终结果，

```json
{
  "links": [
    {
      "source": 0, 
      "target": 0, 
      "value": 1947
    }, 
    {
      "source": 0, 
      "target": 1, 
      "value": 4
    } 
   ],
    "nodes": [
    {
      "group": 2, 
      "name": "Givenchy"
    }, 
    {
      "group": 2, 
      "name": "Skii"
    }
   ]
}
```

### 矩阵图脚本

将矩阵图脚本添加到数据中，添加工具提示以显示悬停时选择的品牌对，调整 HTML 代码以添加标题

### 源代码

### 示例2：Python矩阵图分析论文中的重叠主题

#### Python获取论文列表

创建爬虫类处理分页并提取数据，使用Request下载PDF，使用PyPDF2 和 spaCy提取文本并获取每篇论文的关键词。

#### 创建可视化

使用矩阵图创建可视化。让我们首先创建一个矩形并将其添加到背景中：

```jsx
var margin = {
        top: 285,
        right: 0,
        bottom: 10,
        left: 285
    },
    width = 700,
    height = 700;
var svg = d3.select("graph").append("svg").attr("width", width).attr("height", height);
svg.append("rect")
    .attr("class", "background")
    .attr("width", width - margin.right)
    .attr("height", height - margin.top)
    .attr("transform", "translate(" + margin.right + "," + margin.top + ")");
svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height);
```

数据转换，放置正方形并添加颜色，添加列，添加文本标签，添加分类功能，

#### 源代码
{% endtab %}
{% endtabs %}

{% content-ref url="../zhi-dian-mi-jin-brief" %}
[zhi-dian-mi-jin-brief](../zhi-dian-mi-jin-brief)
{% endcontent-ref %}
