数据可视化 词云图与连接数据库

最新推荐文章于 2024-09-02 06:48:04 发布
最新推荐文章于 2024-09-02 06:48:04 发布
阅读量240 收藏
点赞数
文章标签： 信息可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DoKiDoK/article/details/131342797
版权

静态词云图

 

<html>
<head>
    <title>中国高校占地面积前四十排行</title>
    <meta charSet="utf-8">
</head>
<style>
    body {
        background-image: url("https://img1.baidu.com/it/u=1711981318,546215830&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=394");
        background-size: cover;
        background-position: center;
    }
</style>
<body>
<script src="d3.min.js" charSet="utf-8"></script>
<script src="d3.layout.cloud.js"></script>
<script>
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    w = w * 0.98;
    h = h * 0.9;
    var fill = d3.scale.category20();
    var words = [
        { text: "西北农林科技大学", size: 45262 },
        { text: "南京农业大学", size: 13500 },
        { text: "吉林大学", size: 10815 },
        { text: "西南大学", size: 9600 },
        { text: "中山大学", size: 9255 },
        { text: "厦门大学", size: 9000 },
        { text: "华南农业大学", size: 8250 },
        { text: "南昌大学", size: 8036 },
        { text: "浙江大学", size: 7770 },
        { text: "华中农业大学", size: 7425 },
        { text: "四川大学", size: 7050 },
        { text: "华中科技大学", size: 6597 },
        { text: "郑州大学", size: 6493 },
        { text: "东南大学", size: 5841 },
        { text: "重庆大学", size: 5700 },
        { text: "南京大学", size: 5537.7 },
        { text: "西南交通大学", size: 5400 },
        { text: "山东大学", size: 5355 },
        { text: "清华大学", size: 5340 },
        { text: "武汉大学", size: 5167 },
        { text: "哈尔滨工业大学", size: 5145 },
        { text: "山东农业大学", size: 5145 },
        { text: "西北工业大学", size: 5100 },
        { text: "福州大学", size: 5100 },
        { text: "北京大学", size: 5085 },
        { text: "中南大学", size: 5045 },
        { text: "电子科技大学", size: 5000 },
        { text: "上海交通大学", size: 4840 },
        { text: "广西大学", size: 4608 },
        { text: "云南大学", size: 4551.84 },
        { text: "大连理工大学", size: 4550 },
        { text: "中国石油大学(华东)", size: 4500 },
        { text: "华南理工大学", size: 4414.4 },
        { text: "中国矿业大学(徐州)", size: 4413 },
        { text: "北京理工大学", size: 4342 },
        { text: "扬州大学", size: 4300 },
        { text: "贵州大学", size: 4193 },
        { text: "武汉理工大学", size: 4000 },
        { text: "西安电子科技大学", size: 4000 },
        { text: "河南大学", size: 4000 }
    ];
     words = words.map(item => ({
        text: item.text,
        size: item.size / 400 // update the "size" field as per requirement
    }));
    var wc = d3.layout.cloud()
        .size([w, h])
        .words(words)
        .padding(5)
        .rotate(function () {
            return ~~(Math.random() * 2) * 90;
        })
        .font("Impact")
        .fontSize(function (d) {
            return d.size;
        })
        .on("end", draw)
        .start();

    function draw(words) {
        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
        //console.log(h)
        svg.append("text")
            .attr("font-size", "40px")
            .attr("font-family", "Fantasy")
            .attr("text-anchor", "middle")
            .attr("x", w / 2)
            .attr("y", h / 17)
            .text("中国高校占地面积四十强排行");
        svg.append("text")
            .attr("font-size", "15px")
            .attr("text-anchor", "middle")
            .attr("x", w / 2)
            .attr("y", h / 10.5)
            .text("数据来源:https://m.edu28.cn/jy/60169.html");
        svg.attr("width", w)
            .attr("height", h)
            .append("g")
            .attr("transform", "translate(800,500)")
            .selectAll("text")
            .data(words)
            .enter().append("text")
            .style("font-size", function (d) {
                return d.size + "px";
            })
            .style("font-family", "Impact")
            .style("fill", function (d, i) {
                return fill(i);
            })
            .attr("text-anchor", "middle")
            .attr("transform", function (d) {
                return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
            })
            .text(function (d) {
                return d.text;
            });

        svg.append("text")
            .attr("font-size", "20px")
            .attr("fill", "rgb(124,84,57)")
            .attr("font-family", "Fantasy")
            .attr("text-anchor", "middle")
            .attr("x", w / 2)
            .attr("y", h - 5)
            .text("数科 ");
    }


</script>
</body>
</html>

连接数据库的词云图

这里的语言需要改成jsp文件，且需要mysql的连接数据库的jar文件，这里自己去网上下载即可

 

<!DOCTYPE html>
<style>
  body {
    background-image: url("https://img1.baidu.com/it/u=1711981318,546215830&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=394");
    background-size: cover;
    background-position: center;
  }
</style>
<body>
<div id="wc"></div>
<%@ page contentType="text/html; charset=gb2312" %>
<%@ page language="java" %>
<%@ page import="com.mysql.jdbc.Driver" %>
<%@ page import="java.sql.*" %>
<%
  //??????????
  String driverName="com.mysql.jdbc.Driver";
  //??????????
  String userName="root";
  //????
  String userPasswd="123456";
  //???????
  String dbName="test";
  //????
  String tableName="xuexiao";
  //?????????
  String url="jdbc:mysql://localhost/"+dbName+"?user="+userName+"&password="+userPasswd;
  Class.forName("com.mysql.jdbc.Driver").newInstance();
  Connection connection=DriverManager.getConnection(url);
  Statement statement = connection.createStatement();
  int[] count=new int[41];
  String[] name=new String[41];
  int j=0;
  String sql="SELECT * FROM "+tableName;
  ResultSet rs = statement.executeQuery(sql);
  while(rs.next()) {
      count[j]=rs.getInt(3);
      name[j]=rs.getString(2);
      j++;
  }
%>
<script src="d3.min.js" charset="utf-8"></script>
<script src="d3.layout.cloud.js"></script>
<script>
  var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  w = w * 0.98;
  h = h * 0.9;
  var fill = d3.scale.category20();
  var dataset=new Array(40);

  <% for (int i=0;i<40;i++){%>
  dataset[<%=i%>]=<%=count[i]%>
  <%}%>
  var data=[];
      <% for (int i=0;i<40;i++){%>
        data.push("<%= name[i] %>");
  <%}%>
  var words = data.map((text, index) => ({ text: text, size: dataset[index]/400 }));

  var wc = d3.layout.cloud()
          .size([w, h])
          .words(words)
          .padding(5)
          .rotate(function () {
            return ~~(Math.random() * 2) * 90;
          })
          .font("Impact")
          .fontSize(function (d) {
            return d.size;
          })
          .on("end", draw)
          .start();

  function draw(words) {
    var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
    //console.log(h)
    svg.append("text")
            .attr("font-size", "40px")
            .attr("font-family", "Fantasy")
            .attr("text-anchor", "middle")
            .attr("x", w / 2)
            .attr("y", h / 17)
            .text("�й���Уռ�������ʮǿ����");
    svg.append("text")
            .attr("font-size", "15px")
            .attr("text-anchor", "middle")
            .attr("x", w / 2)
            .attr("y", h / 10.5)
            .text("������Դ:http://www.360doc.com/content/18/0814/11/54278970_778159616.shtml");

    svg.attr("width", w)
            .attr("height", h)
            .append("g")
            .attr("transform", "translate(800,500)")
            .selectAll("text")
            .data(words)
            .enter().append("text")
            .style("font-size", function (d) {
              return d.size + "px";
            })
            .style("font-family", "Impact")
            .style("fill", function (d, i) {
              return fill(i);
            })
            .attr("text-anchor", "middle")
            .attr("transform", function (d) {
              return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
            })
            .text(function (d) {
              return d.text;
            });

    svg.append("text")
            .attr("font-size", "20px")
            .attr("fill", "rgb(124,84,57)")
            .attr("font-family", "Fantasy")
            .attr("text-anchor", "middle")
            .attr("x", w / 2)
            .attr("y", h - 5)
            .text("���� ������");
  }
</script>

</body>

链接数据库直方图绘制

 

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    background-image: url("https://img1.baidu.com/it/u=1711981318,546215830&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=394");
    background-size: cover;
    background-position: center;
  }
</style>
<body>
<div id="wc"></div>
<%@ page contentType="text/html; charset=gb2312" %>
<%@ page language="java" %>
<%@ page import="com.mysql.jdbc.Driver" %>
<%@ page import="java.sql.*" %>
<%
  //����������
  String driverName="com.mysql.jdbc.Driver";
  //���ݿ��û���
  String userName="root";
  //����
  String userPasswd="123456";
  //���ݿ���
  String dbName="test";
  //����
  String tableName="xuexiao";
  //�����ַ���
  String url="jdbc:mysql://localhost/"+dbName+"?user="+userName+"&password="+userPasswd;
  Class.forName("com.mysql.jdbc.Driver").newInstance();
  Connection connection=DriverManager.getConnection(url);
  Statement statement = connection.createStatement();
  int[] count=new int[41];
  String[] name=new String[41];
  int j=0;
  String sql="SELECT * FROM "+tableName;
  ResultSet rs = statement.executeQuery(sql);
  while(rs.next()) {
    count[j]=rs.getInt(3);
    name[j]=rs.getString(2);
    j++;
  }
%>

<script src="d3.layout.cloud.js"></script>
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script charset="utf-8">
  var w = window.innerWidth
          || document.documentElement.clientWidth
          || document.body.clientWidth;

  var h = window.innerHeight
          || document.documentElement.clientHeight
          || document.body.clientHeight;

  var dataset=new Array(40);

  <% for (int i=0;i<40;i++){%>
  dataset[<%=i%>]=<%=count[i]%>
  <%}%>
  var data1=[];
  <% for (int i=0;i<40;i++){%>
  data1.push("<%= name[i] %>");
  <%}%>
  var data= data1.map((text, index) => ({ key: text, value: dataset[index]/100 }));
  let Xdatas = data.map(function(d) {return d.key}),
          Ydatas = data.map(function(d) {return d.value});
  let width = w*1.5, height = h*0.95;
  let x = d3.scaleBand().domain(Xdatas).rangeRound([0, width]).padding(0.1);
  let y = d3.scaleLinear().domain([0, d3.max(Ydatas)]).rangeRound([height, 0]);

  let padding = {left: 50, top: 70, right: 50, bottom: 100};
  let svg = d3.select('body').append('svg').attr('width', width + padding.left)
          .attr('height', height + padding.bottom);
  let g = svg.append('g').attr('transform', 'translate(' + padding.left + ',' + padding.top + ')');
  // 表头
  svg.append('text').attr('transform', 'translate(' + (width/2 - padding.left) + ',' + padding.top/2 + ')')
          .attr('font-weight', 600).text('占地面积');
  svg.append('text').attr('transform', 'translate(' + (width-200 ) + ',' + (padding.top-50/2) + ')')
          .attr('font-weight', 400).text('单位：百万');
  // x轴和y轴
  g.append('g').attr('transform', 'translate(0,' + height + ')')
          .call(d3.axisBottom(x));
  g.append('g').call(d3.axisLeft(y).ticks(10));

  chart = g.selectAll('.bar').data(data).enter().append('g');
  // 矩形
  chart.append('rect')
          .attr('x', function(d) {
            return x(d.key);
          })
          .attr('cursor', 'pointer')
          .attr('y', function(d) {
            return y(y.domain()[0]) - 5;
          })
          .attr('fill', function(d) {
            // 生成随机颜色
            return '#'+Math.floor(Math.random()*0xffffff).toString(16);
          })
          .attr('stroke', '#FFF').attr('stroke-width', '3px')
          .transition()
          .delay(function(d, i) {
            return (i + 1) * 50
          })
          .duration(2000).ease(d3.easeBounceIn)
          .attr('y', function(d) {
            return y(d.value) - 5;
          })
          .attr('width', x.bandwidth())
          .attr('height', function(d) {
            return height - y(d.value);
          });
  // 矩形文字
  chart.append('text').attr('fill', '#FFF')
          .attr('x', function(d) {
            return x(d.key) ;
          })
          .attr('y', function(d) {
            return y(y.domain()[0]);
          })
          .transition()
          .delay(function(d, i) {
            return (i + 1) * 100
          })
          .duration(2000).ease(d3.easeBounceIn)
          .attr('y', function(d) {
            return y(d.value);
          })
          .attr('dx', function(d) {
            return (x.bandwidth() - padding.left) / 2;
          })
          .attr('dy', 20)
          .text(function(d) {
            return d.value
          });
</script>


</body>

数据库中的格式

 

无bug代码搬运工
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Python数据分析与可视化】期末复习试题集
风口IT猪的成长录
12-03 2万+
1.Jupyter notebook不具备的功能是 （） Jupyter notebook可以直接生成一份交互式文档 Jupyter notebook可以安装Python库 Jupyter notebook可以导出HTML文件 Jupyter notebook可以将文件分享给他人 right_answers: Jupyter notebook可以将文件分享给他人 2.在Jupyter notebook的命令模式下，要查看所有快捷..
python爬虫前程无忧——数据分析+词云图
HESHIQI9927的博客
07-08 3069
要求： 1.爬取字段：职位名称、薪资水平、招聘单位、工作地点、工作经验、学历要求、工作内容（岗位职责）、任职要求（技能要求）。 2.数据存储：将爬取的数据存储到MongoDB数据库中。 3.数据分析与可视化： （1）分析“数据分析”、“大数据开发工程师”、“数据采集”等岗位的平均工资、最高工资、最低工资，并作条形图将结果展示出来； （2）分析“数据分析”、“大数据开发工程师”、“数据采集”等大数据相关岗位在成都、北京、上海、广州、深圳的岗位数，并做饼图将结果展示出来。 （3）分析大数据相关岗位1-3年工作经
六、数据可视化—Wordcloud词云（爬虫及数据可视化）
qq_44870829的博客
07-08 601
wordcloud
数据可视化实践 JSP连接数据库
RACHAEL_Z的博客
07-22 1653
通过jsp连接mySQL数据库，将map_enword表中的相关内容显示在jsp网页中。 1.创建数据库，导入map_enword表 在mySQL-FONT中创建数据库，命名为dict。 选中创建的数据库dict，向其中输入已有的map_enword.sql文件。注意输入时选中字符集为“UTF-8”。 2. 添加驱动 将已有的mysql-connector-java-5.0.4.jar包拷贝进tomcat的lib目录下。该步骤是为jsp脚本提供连接mySQL的驱动程序。 ...
商品评论获取与词云图可视化分析
m0_54759841的博客
06-11 2262
电商平台评论统计分析以及可视化
10个实用的数据可视化的图表总结
deephub
11-28 7286
数据可视化是数据科学中不可缺少的一部分。在数据科学中，我们与数据打交道。手工分析少量数据是可以的，但当我们处理数千个数据时它就变得非常麻烦。如果我们不能发现数据集的趋势和洞察力，我们可能无法使用这些数据。希望上面介绍的的图可以帮助你深入了解数据。作者：Md. Zubair。
【Python】数据分析与可视化——爬虫搭建词云
m0_58683132的博客
10-25 847
题目：某年度政府工作报告的词云绘制要求：利用所学知识爬取某年度政府工作报告，并进行词频排序，输出top50,在将top50绘制成词云，词云颜色可自选，形状是某年。
推荐10款好用的数据可视化工具，赶紧收藏
热门推荐
BeWorkingMan的博客
09-01 1万+
没有十全十美的工具，但是如果确立（可视化）目标，就能找到合适的工具去实现。数据分析过程可以分为：确定目标数据、数据采集、数据清洗、数据存储、数据分析、结果可视化及结果支持和决策等步骤。本文简单分为五大类，每一环节选取两个评价较好的工具，大家也可以将自己认为好的工具补充在评论区。...
前程无忧岗位数据可视化分析报告
m0_52382330的博客
03-01 3193
利用python进行对前程无忧网站的数据爬取后进行的一系列数据分析及可视化处理
基于Python编写的中国城市轨道交通数据可视化分析项目源码+项目说明.zip
04-10
通过这个项目可以练习使用Python数据可视化分析相关的强大的库和模块，练习绘制简单的GUI界面并且连接数据库，更加深了对Python语言的学习和拓展。本项目也可作为学校的大作业、大实验实践或者课程设计等的选题项目...
echarts词云图画法读取数据库数据
08-29
ECharts词云图是一种数据可视化的方式，通过使用ECharts库可以实现对数据库中的数据进行读取和展示。实现该功能主要有以下几个步骤： 1. 连接数据库：首先需要使用适当的方式连接到数据库，可以使用MySQL、SQLite、...
基于大数据的电信诈骗行为可视化系统含预测研究【lightGBM，XGBoost，随机森林】
迷茫与徘徊只会让你陷入绝境，欢迎私信博主，带你开始提升变现价值！
08-28 1351
本项目旨在开发一个综合性的电信诈骗预测与分析系统,通过对海量电信诈骗数据的深入分析和机器学习模型的应用,实现对潜在诈骗行为的有效识别和预防。该系统不仅提供了多维度的数据可视化分析,还集成了先进的机器学习算法,为电信运营商、监管机构以及普通用户提供了一个强大的反诈骗工具。
FlowUs：强大图表功能与多维表结合，开启便捷办公新时代
weixin_66534253的博客
08-30 496
只需要选择多维表中的数据，然后选择图表类型，FlowUs 就会自动生成相应的图表。我们还可以对图表进行进一步的设置和调整，如标题、坐标轴、颜色等，以满足个性化的需求。而 FlowUs 以其强大的图表功能结合多维表的能力，为我们带来了前所未有的便捷体验。FlowUs 的强大图表功能结合多维表的能力，为我们提供了一种全新的数据管理和可视化方式。它可以将多维表中的数据以直观的图表形式呈现出来，让我们一目了然地了解数据的分布和趋势。我们可以根据数据的特点选择合适的图表类型，更好地展示数据的特征。
python从入门到精通：数据可视化-图形开发
2401_83283514的博客
08-29 1256
• Json是一种轻量级的数据交互格式，可以按照Json指定的格式去组织和封装数据• Json本质上是一种带有特殊格式的字符串主要功能：json就是一种在各个编程语言中流通的数据格式，负责不同编程语言中的数据传递和交互，类似于：• 国际通用语言-英语• 中国不同名族的通用语言-中文（普通话）• 各种编程语言存储数据的容器不尽相同，在python中有字典dict这样的数据类型，而其它语言可能没有对应的字典。为了让不同的语言都能够相互通用的互相传递数据，Json就是一种非常良好的数据中转格式。
基于大数据分析景区消费行为影响因素研究【消费等级预测、携程，去哪网数据抓取】
迷茫与徘徊只会让你陷入绝境，欢迎私信博主，带你开始提升变现价值！
08-28 1472
网络爬虫，亦称为网络蜘蛛或网络机器人，是一种自动化的网络程序，其核心功能在于浏览互联网并从中提取信息。这一过程通常涉及网络爬虫按照一定的规则自动访问网页，分析页面内容，然后根据预设的逻辑寻找新的链接继续访问，如此循环往复，形成一张庞大的网络数据网。网络爬虫的应用广泛，从搜索引擎的数据索引到数据挖掘和市场分析，都离不开它们的身影。
基于大数据的水资源管理与调度优化研究【Web可视化、灰色预测、大屏设计】
迷茫与徘徊只会让你陷入绝境，欢迎私信博主，带你开始提升变现价值！
08-28 1088
本研究旨在分析年度水资源与供水用水情况数据，并通过灰色预测模型预测未来三年的供水总量，以提高对数据变化趋势的认识和理解。系统采用Python作为主要开发语言，并通过pandas对数据进行处理和分析。 首先，研究从公开数据源收集国家年度水资源与供水用水情况数据，包括供水总量(亿立方米)、水资源总量(亿立方米)、地表水供水总量(亿立方米)等多个情况数据。数据收集涵盖了2014年至2022年的时间范围，确保了数据的丰富性和多样性。收集到的数据经过预处理和清洗，以适用于后续的分析和建模。 在数据处理阶段，本研究使用
Prometheus+Grafana监控数据可视化
escaping的博客
08-30 666
上一篇文章讲了prometheus的简单使用，这一篇就先跳过中间略显枯燥的内容，来到监控数据可视化。一方面，可视化的界面看着更带劲，另一方面，也更方便我们直观的查看监控数据，方便后面的学习。
pyecharts可视化数据大屏
最新发布
丁爸的博客
09-02 1756
PyECharts 可视化数据大屏是一种基于 Python 的数据可视化解决方案，它结合了 PyECharts 的数据处理能力和 ECharts 的图表绘制能力，使得数据可视化变得更加便捷和高效。大屏可视化数据大屏通常是指在大屏幕上展示的多维度、多层次、高分辨率的数据可视化图表，它能够帮助用户更好地理解和分析数据，适用于各种业务场景，如金融、电商、教育等。
python数据可视化词云图
01-19
以下是使用Python进行数据可视化词云图的示例代码： ```python from wordcloud import WordCloud import matplotlib.pyplot as plt # 创建词云对象 wc = WordCloud(font_path='c:\Windows\Fonts\simfang.ttf', width=800, height=600) # 生成词云图 wc.generate_from_frequencies(tf) # 设置背景颜色为白色 wc.background_color = 'white' # 显示词云图 plt.imshow(wc) plt.axis('off') plt.show() # 将词云图保存为图片 wc.to_file('gb.jpg') ``` 这段代码使用了`WordCloud`库来创建词云对象，并通过`generate_from_frequencies`方法生成词云图。然后，通过设置`background_color`属性将背景颜色设为白色。最后，使用`imshow`方法显示词云图，并使用`to_file`方法将词云图保存为图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值