利用深度学习实现手绘数据可视化的生成

最新推荐文章于 2023-12-09 09:08:16 发布

JKX_geek

最新推荐文章于 2023-12-09 09:08:16 发布

阅读量935

点赞数

本文链接：https://blog.csdn.net/JKX_geek/article/details/104562843

版权

本文介绍了如何利用深度学习技术，特别是CycleGan和pix2pix，将基于Canvas的图表转换为手绘风格。作者分享了从数据准备、神经网络训练到实际应用的完整流程，并探讨了未来可能的改进方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人博客导航页（点击右侧链接即可打开个人博客）：大牛带你入门技术栈

前一段时间，我开发了Sketchify，该工具可以把任何以SVG为渲染技术的可视化转化为手绘风格。（参考手绘风格的数据可视化实现 Sketchify）

那么问题来了，很多的chart是以Canvas为渲染技术的，那要怎么办？

我拍脑袋一想，为什么不使用深度学习技术来做呢？

原理很简单：

首先用相同的数据分别生成原始的和手绘风格的数据可视化图数据。
然后利用深度神经网络，使用该数据训练一个模式，输入是数据图，输出的手绘风格的图。这样就可以训练一个生成手绘风格数据可视化的神经网络了。
然后对于任何新的数据图，输入该网络就可以输出一个手绘风格的图。

这听起来就像如何把大象放到冰箱里一样的简单直接。

废话少说，开始干。

准备数据

数据准备要生成一定数量的原始图和手绘图，利用Sketchify就可以完成功能，但是具体如何做到？参考如下架构：

VizServer是一个web服务，用nodejs开发，代码在这里https://github.com/gangtao/handyModel/tree/master/vizService
VizServer使用restify提供RestAPI接口，利用squirrelly.js的模版引擎生成一个包含可视化的Html页面。模版如下：

<!doctype html>
<html>
  <head>
    <title>{
    {sketchify}}</title>
    <meta charset="UTF-8">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rough.js/3.1.0/rough.js"></script>
    <script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/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://cdn.jsdelivr.net/gh/gangtao/sketchify/dist/sketchify.min.js"></script>
    
  </head>
  <body>
      <div id="chart" style="height: 400px; width: 600px"></div>
  </body>
  <script>
    $(function() {
      var data = {
    {dataset| safe}};
      var chart = new G2.Chart({
          container: 'chart',
          forceFit: true,
          height: 400,
          animate: false,
          renderer: 'svg'
      });
      chart.source(data);
      chart.scale('sales', {
          tickInterval: 20
      });
      chart.interval().position(