静态词云图
<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>
数据库中的格式