数据可视化期末大作业——食品安全可视化

最新推荐文章于 2024-04-21 08:35:52 发布

眼里进沙子好疼

最新推荐文章于 2024-04-21 08:35:52 发布

阅读量4.5k

点赞数 6

分类专栏：食品可视化鱼眼图

本文链接：https://blog.csdn.net/weixin_44850594/article/details/114993227

版权

食品可视化同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

鱼眼图

1 篇文章 0 订阅

订阅专栏

因为涉及到的软件比较复杂，所以直接贴上了最终录制好的视频。

食品安全数据可视化

下面简单介绍下其中的鱼眼图的制作。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="container"></div>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script>

<script>
let fisheye = new G6.Fisheye({
  r: 100,
  showLabel: true,
});
const colors = [
  '#8FE9FF',
  '#87EAEF',
  '#FFC9E3',
  '#A7C2FF',
  '#FFA1E3',
  '#FFE269',
  '#BFCFEE',
  '#FFA0C5',
  '#D5FF86',
];

const graphDiv = document.getElementById('container');
const container = document.getElementById('container');
const width = container.scrollWidth || 100;
const height = container.scrollHeight || 550;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  plugins: [fisheye],
});


fetch('./1.json')
  .then((res) => res.json())
  .then((data) => {
    data.nodes.forEach((node) => {
      node.label = node.id;
      node.size = Math.random() * 30 + 10;
      node.style = {
        fill: colors[Math.floor(Math.random() * 9)],
        lineWidth: 1,
      };
    });
    graph.data(data);
    graph.render();
    graph.getNodes().forEach((node) => {
      node
        .getContainer()
        .getChildren()
        .forEach((shape) => {
          if (shape.get('type') === 'text') shape.hide();
        });
    });
  });

if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.get('destroyed')) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.changeSize(container.scrollWidth, container.scrollHeight);
  };
    </script>
  </body>
</html>

{
  "nodes": [

    {
      "id": "鸡蛋",
      "x": 622.22242753596396,
      "y": 221.58991461580462
    },
    {
      "id": "糖精",
      "x": 565.1218339265034,
      "y": 171.59761511302105
    },
    {
      "id": "味精",
      "x": 599.78639359854327,
      "y": 133.57398015667923
    },
    {
      "id": "豆浆",
      "x": 582.69786358028415,
      "y": 191.50678051232913
    },
    {
      "id": "鹅肉",
      "x": 634.4562033716733,
      "y": 148.86340203151713
    },
    {
      "id": "地瓜",
      "x": 659.6758601570104,
      "y": 158.51932058679517
    },
    {
      "id": "兔肉",
      "x": 608.6408107258377,
      "y": 80.08978211784734
    },
    {
      "id": "鲤鱼",
      "x": 629.1208783621155,
      "y": 89.50783923513406
    },
    {
      "id": "菠萝",
      "x": 651.31710942912247,
      "y": 95.62381874446997
    },
    {
      "id": "螃蟹",
      "x": 490.0990966456606,
      "y": 153.6649901350214
    },
    {
      "id": "红糖",
      "x": 603.2794454950651,
      "y": 170.87469919068386
    },
    {
      "id": "茶",
      "x": 586.9038607953858,
      "y": 94.82364610010669
    },
    {
      "id": "牛奶",
      "x": 637.7295856292113,
      "y": 187.2760733153313
    },
    {
      "id": "柿子",
      "x": 583.8431887426204,
      "y": 267.7101161193055
    },
    {
      "id": "大米",
      "x": 617.6539018281542,
      "y": 300.0586304481375
    },
    {
      "id": "蜂蜜",
      "x": 643.4495217104461,
      "y": 248.14013534143953
    },
    {
      "id": "杏",
      "x": 668.6281356589531,
      "y": 263.5847126845181
    },
    {
      "id": "马肉",
      "x": 677.3520676841103,
      "y": 176.72534157485532
    },
    {
      "id": "苍耳",
      "x": 691.75313851634024,
      "y": 156.5212161097912
    },
    {
      "id": "红豆",
      "x": 534.8199749437348,
      "y": 195.99976079362335
    },
    {
      "id": "红枣",
      "x": 586.4937544345336,
      "y": 227.73420851527578
    },
    {
      "id": "虾皮",
      "x": 550.02919011143416,
      "y": 231.2513211913802
    },
    {
      "id": "红豆",
      "x": 587.02919011143416,
      "y": 181.2513211913802
    },
    {
      "id": "羊肝",
      "x": 480.02919011143416,
      "y": 241.2513211913802
    },
    {
      "id": "羊肚",
      "x": 470.02919011143416,
      "y": 152.2513211913802
    },
    {
      "id": "盐",
      "x": 590.02919011143416,
      "y": 151.2513211913802
    },
    {
      "id": "醋",
      "x": 580.02919011143416,
      "y": 131.2513211913802
    },
    {
      "id": "猪骨汤",
      "x": 620.02919011143416,
      "y": 121.2513211913802
    },
    {
      "id": "青菜",
      "x": 620.02919011143416,
      "y": 211.2513211913802
    },
    {
      "id": "海参",
      "x": 650.02919011143416,
      "y": 231.2513211913802
    },
    {
      "id": "鳗鱼",
      "x": 675.4668487891018,
      "y": 202.783515421686
    },
    {
      "id": "鳝鱼",
      "x": 670.1700307319093,
      "y": 139.4810861650384
    },
    {
      "id": "生葱",
      "x": 704.6422482933774,
      "y": 216.58364918349568
    },
    {
      "id": "虾",
      "x": 699.2513775912632,
      "y": 183.03026453336724
    },
    {
      "id": "皮蛋",
      "x": 700.90996667472837,
      "y": 194.79658513642403
    },
    {
      "id": "甜酒",
      "x": 719.38361105364334,
      "y": 148.69180823448008
    },
    {
      "id": "竹笋",
      "x": 675.2946100421193,
      "y": 307.66682817782345
    },
    {
      "id": "蛋清",
      "x": 560.66757416917164,
      "y": 279.0949406815367
    },
    {
      "id": "酒",
      "x": 568.68796660221636,
      "y": 365.8200533034293
    },
    {
      "id": "鲫鱼",
      "x": 534.53762633403787,
      "y": 303.08504254821366
    },
    {
      "id": "牛肉",
      "x": 604.29126463264043,
      "y": 254.05392981470945
    },
    {
      "id": "豆腐",
      "x": 650.35613429759803,
      "y": 214.42252912270644
    },
    {
      "id": "菠菜",
      "x": 737.51920169330805,
      "y": 160.14388411785757
    },
    {
      "id": "猪肝",
      "x": 750.1406569699257,
      "y": 327.7456828911454
    },
    {
      "id": "牛奶",
      "x": 766.0856874797108,
      "y": 368.0210264990602
    },
    {
      "id": "羊肉",
      "x": 693.6973181801981,
      "y": 380.40382743216634
    },
    {
      "id": "四环素",
      "x": 638.1148595335302,
      "y": 286.4434006942807
    },
    {
      "id": "花生",
      "x": 577.12320020410266,
      "y": 317.4384382481713
    },
    {
      "id": "黄瓜",
      "x": 557.52167498720337,
      "y": 306.4604520400414
    },
    {
      "id": "小白菜",
      "x": 607.71325168392366,
      "y": 318.0074114921048
    },
    {
      "id": "开水",
      "x": 497.63137784390082,
      "y": 325.2999365859076
    },
    {
      "id": "大米",
      "x": 594.4105849543593,
      "y": 296.53686533697186
    },
    {
      "id": "韭菜",
      "x": 636.3436812430268,
      "y": 350.8376519695578
    },
    {
      "id": "白糖",
      "x": 690.6807729530675,
      "y": 322.9175698803163
    },
    {
      "id": "羊肉",
      "x": 666.77554563642803,
      "y": 445.26666512175433
    },
    {
      "id": "药",
      "x": 676.9421415192702,
      "y": 371.1750781444891
    },
    {
      "id": "咖啡",
      "x": 697.0516872015465,
      "y": 416.38478793328625
    },
    {
      "id": "香烟",
      "x": 609.0241345496318,
      "y": 426.44215271462605
    },
    {
      "id": "黑木耳",
      "x": 614.71137563489117,
      "y": 456.80172690673896
    },
    {
      "id": "啤酒",
      "x": 632.8405296045364,
      "y": 435.8881866127797
    },
    {
      "id": "核桃",
      "x": 643.1268360879219,
      "y": 466.9404473411801
    },
    {
      "id": "巧克力",
      "x": 605.84814130923144,
      "y": 382.89355947309724
    },
    {
      "id": "果汁",
      "x": 671.447442010866,
      "y": 415.99688422022257
    },
    {
      "id": "橘子",
      "x": 670.72651876919826,
      "y": 466.96671298340794
    },
    {
      "id": "香蕉",
      "x": 724.04457501182867,
      "y": 461.9373924104361
    },
    {
      "id": "生鱼",
      "x": 644.1315821958891,
      "y": 323.7890765583486
    },
    {
      "id": "酸性饮料",
      "x": 667.3969014122835,
      "y": 319.2359576043117
    },
    {
      "id": "生姜",
      "x": 603.23885194199465,
      "y": 347.8041412708572
    },
    {
      "id": "汽水",
      "x": 622.6528688110919,
      "y": 330.01757397802925
    },
    {
      "id": "烟熏食物",
      "x": 606.6921797724685,
      "y": 277.05255454452566
    },
    {
      "id": "玉米",
      "x": 661.1652068827243,
      "y": 387.9769951347244
    },
    {
      "id": "黄豆",
      "x": 715.98942162128606,
      "y": 432.37341762016945
    },
    {
      "id": "米汤",
      "x": 630.44198511493056,
      "y": 394.6025799878689
    },
    {
      "id": "钙粉",
      "x": 694.43875881505835,
      "y": 450.4056149101193
    },
    {
      "id": "萝卜",
      "x":700.43875881505835,
      "y": 460.4056149101193
    },
    {
      "id": "醋",
      "x":710.43875881505835,
      "y": 480.4056149101193
    }
  ],
  "edges": [
    {
      "source": "鸡蛋",
      "target": "糖精",
      "value": 1
    },
    {
      "source": "鸡蛋",
      "target": "味精",
      "value": 8
    },
    {
      "source": "鸡蛋",
      "target": "豆浆",
      "value": 10
    },
    {
      "source": "鸡蛋",
      "target": "鹅肉",
      "value": 6
    },
    {
      "source": "鸡蛋",
      "target": "地瓜",
      "value": 1
    },
    {
      "source": "鸡蛋",
      "target": "兔肉",
      "value": 10
    },
    {
      "source": "鸡蛋",
      "target": "鲤鱼",
      "value": 1
    },
    {
      "source": "鸡蛋",
      "target": "菠萝",
      "value": 1
    },
    {
      "source": "鸡蛋",
      "target": "螃蟹",
      "value": 2
    },
    {
      "source": "鸡蛋",
      "target": "树薯",
      "value": 1
    },
    {
      "source": "鸡蛋",
      "target": "红糖",
      "value": 1
    },
    {
      "source": "鸡蛋",
      "target": "茶",
      "value": 3
    },
    {
      "source": "鸡蛋",
      "target": "牛奶",
      "value": 3
    },
    {
      "source": "鸡蛋",
      "target": "柿子",
      "value": 5
    },
    {
      "source": "大米",
      "target": "蜂蜜",
      "value": 1
    },
    {
      "source": "大米",
      "target": "杏",
      "value": 1
    },
    {
      "source": "大米",
      "target": "马肉",
      "value": 1
    },
    {
      "source": "大米",
      "target": "苍耳",
      "value": 1
    },
    {
      "source": "大米",
      "target": "红豆",
      "value": 4
    },
    {
      "source": "红枣",
      "target": "虾皮",
      "value": 4
    },
    {
      "source": "红枣",
      "target": "鳗鱼",
      "value": 4
    },
    {
      "source": "红枣",
      "target": "鳝鱼",
      "value": 4
    },
    {
      "source": "红枣",
      "target": "生葱",
      "value": 4
    },
    {
      "source": "红枣",
      "target": "虾",
      "value": 4
    },
    {
      "source": "豆浆",
      "target": "蜂蜜",
      "value": 3
    },
    {
      "source": "豆浆",
      "target": "Listolier",
      "value": 3
    },
    {
      "source": "鸡蛋",
      "target": "Fameuil",
      "value": 3
    },
    {
      "source": "红糖",
      "target": "皮蛋",
      "value": 4
    },
    {
      "source": "红糖",
      "target": "甜酒",
      "value": 3
    },
    {
      "source": "红糖",
      "target": "竹笋",
      "value": 3
    },
    {
      "source": "红糖",
      "target": "豆浆",
      "value": 3
    },
    {
      "source": "红糖",
      "target": "茶",
      "value": 3
    },
    {
      "source": "红糖",
      "target": "酒",
      "value": 5
    },
    {
      "source": "红糖",
      "target": "鲫鱼",
      "value": 3
    },
    {
      "source": "红糖",
      "target": "虾",
      "value": 3
    },
    {
      "source": "红糖",
      "target": "牛肉",
      "value": 3
    },
    {
      "source": "豆腐",
      "target": "蜂蜜",
      "value": 3
    },
    {
      "source": "豆腐",
      "target": "葱",
      "value": 4
    },
    {
      "source": "豆腐",
      "target": "菠菜",
      "value": 4
    },
    {
      "source": "豆腐",
      "target": "牛奶",
      "value": 3
    },
    {
      "source": "豆腐",
      "target": "猪肝",
      "value": 3
    },
    {
      "source": "豆腐",
      "target": "羊肉",
      "value": 3
    },
    {
      "source": "花生",
      "target": "螃蟹",
      "value": 3
    },
    {
      "source": "花生",
      "target": "黄瓜",
      "value": 4
    },
    {
      "source": "花生",
      "target": "小白菜",
      "value": 4
    },
    {
      "source": "蜂蜜",
      "target": "豆腐",
      "value": 4
    },
    {
      "source": "蜂蜜",
      "target": "大米",
      "value": 2
    },
    {
      "source": "蜂蜜",
      "target": "韭菜",
      "value": 9
    },
    {
      "source": "茶",
      "target": "白糖",
      "value": 2
    },
    {
      "source": "茶",
      "target": "鸡蛋",
      "value": 7
    },
    {
      "source": "茶",
      "target": "羊肉",
      "value": 13
    },
    {
      "source": "牛奶",
      "target": "糖",
      "value": 1
    },
    {
      "source": "牛奶",
      "target": "巧克力",
      "value": 12
    },
    {
      "source": "牛奶",
      "target": "橘子",
      "value": 4
    },
    {
      "source": "牛奶",
      "target": "韭菜",
      "value": 31
    },
    {
      "source": "牛奶",
      "target": "生鱼",
      "value": 1
    },
    {
      "source": "牛奶",
      "target": "黄豆",
      "value": 1
    },
    {
      "source": "牛奶",
      "target": "红糖",
      "value": 17
    },
    {
      "source": "牛奶",
      "target": "米汤",
      "value": 5
    },
    {
      "source": "牛奶",
      "target": "钙粉",
      "value": 5
    },
    {
      "source": "牛奶",
      "target": "酸性饮料",
      "value": 1
    },
    {
      "source": "牛奶",
      "target": "菜花",
      "value": 1
    },
    {
      "source": "牛奶",
      "target": "菠菜",
      "value": 8
    },
    {
      "source": "牛奶",
      "target": "萝卜",
      "value": 1
    },
    {
      "source": "牛奶",
      "target": "醋",
      "value": 1
    },
    {
      "source": "咖啡",
      "target": "香烟",
      "value": 1
    },
    {
      "source": "咖啡",
      "target": "黑木耳",
      "value": 2
    },
    {
      "source": "酒",
      "target": "柿子",
      "value": 1
    },
    {
      "source": "酒",
      "target": "韭菜",
      "value": 2
    },
    {
      "source": "酒",
      "target": "茶",
      "value": 3
    },
    {
      "source": "酒",
      "target": "咖啡",
      "value": 2
    },
    {
      "source": "酒",
      "target": "核桃",
      "value": 1
    },
    {
      "source": "酒",
      "target": "汽水",
      "value": 1
    },
    {
      "source": "酒",
      "target": "生姜",
      "value": 2
    },
    {
      "source": "酒",
      "target": "牛肉",
      "value": 1
    },
    {
      "source": "酒",
      "target": "玉米",
      "value": 3
    },
    {
      "source": "红豆",
      "target": "羊肝",
      "value": 2
    },
    {
      "source": "红豆",
      "target": "羊肚",
      "value": 3
    },
    {
      "source": "红豆",
      "target": "盐",
      "value": 3
    },
    {
      "source": "醋",
      "target": "猪骨汤",
      "value": 2
    },
    {
      "source": "醋",
      "target": "青菜",
      "value": 2
    },
    {
      "source": "醋",
      "target": "胡萝卜",
      "value": 2
    },
    {
      "source": "醋",
      "target": "鳗鱼",
      "value": 2
    },
    {
      "source": "醋",
      "target": "海参",
      "value": 1
    }
  ]
}