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

关键词

Flask | Python | D3.js | 数据可视化 | 共生矩阵图

梗概

示例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

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

{
  "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提取文本并获取每篇论文的关键词。

创建可视化

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

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);

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

源代码

🏈page指点迷津 | Brief