tensorflowJS入门以及数据可视化 美国金县的房价预测
前言
tensorflowJS是一个基于javascript的机器学习库，由tensorflow官方团队移植到javascript并进行维护。可以在web和node环境下运行。为了方便数据可视化，将在html中进行编程。本文完成后会提供在线体验网页。
本文为博主的入门实操记录，对于理论性的内容不会提到太多，想更好的了解机器学习原理，强烈建议先看台湾大学李宏毅教授关于机器学习的课程p2~p3， 里面会提到一些机器学习的基础概念并且讲的非常好！
(强推)李宏毅2021春机器学习课程
本文跟随tensorflowJS视频教程，使用美国金县房屋销售数据进行线性回归训练，对房价进行预测。提供本文样本数据下载，以及相关的参考资料连接。
跟随视频：
使用 TensorFlow.js 在 JavaScript 中进行机器学习
api文档：
tensorflowJS API
数据可视化 tfjs-vis API
美国金县房屋销售数据：
kc_house_data.csv
关于机器学习的理解仅为博主个人观点，可能存在偏差，欢迎交流指正。
1 项目初始化
1）创建文件夹命名为 csdn范例。
2）进入文件夹，并创建 tensorflowJS.html 文件，基于最终要实现的功能进行简单的页面设计。
3）将数据集 kc_house_data.csv 放入文件夹中。
2 tensorflwJS 和 数据可视化库的引入
在 tensorflowJS.html 文件中的 head 标签中引入 tensorflowJS 以及数据可视化库 tfjs-vis
<!-- 通过'script'标签 加载 tensorflowJS 以及数据可视化插件 tfvis --><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis"></script>
3 加载csv文件，映射房屋面积与房价，并数据可视化
调用 tf 即可获取 tensorflowJS 的单例对象
tf.data.csv() 方法可通过传入url字符串加载csv文件。由于浏览器限制无法加载本地文件，只能通过超链接获取。所以先通过node环境的 http-serve 模块建立一个小型的服务器。
ps. node环境下在url基础上加上前缀 "file://" 即可
3.1 小型服务器实现
1）通过node的npm包管理下载 http-server 模块
npm i http-server -g
2）打开终端（或cmd，powershell）进入项目目录，输入命令行启动小型服务器
http-server -c-1
3）启动后可看到控制台提供的ip地址，选择其中一个通过浏览器打开，可以看到项目的目录，这时候就可以通过ip地址访问 html 和获取 csv 文件了。
！！！一定要通过ip地址访问html文件，否者在请求csv文件时会存在跨域问题！！！
3.2初始化变量定义
在html中创建 <script> 标签来执行javascript代码。先初始化一些变量，获取按钮dom，和用于log的div的dom
let// 数据dataset = null, // 初始数据集pointDataset = null, // 面积与房价 x~y 点集featureArray = null, // 因素集labelArray = null, // 结果集featureTensor = null, // 因素张量（tensor）集labelTensor = null, // 结果张量（tensor）集normalizedFeature = null, // 最小-最大-归一化 后的因素数据集normalizedLabel = null, // 最小-最大-归一化 后的结果数据集trainingFeatureTensor = null, // 用于训练的因素张量testingFeatureTensor = null, // 用于测试的因素张量trainingLabelTensor = null, // 用于训练的结果张量testingLabelTensor = null, // 用于测试的结果张量model = null, // 模型// 信息打印窗口获取traningInfo = document.getElementById("traningInfo"),predictInfo = document.getElementById("predictInfo"),// 按钮获取loadBtn = document.getElementById("loadBtn"),trainingBtn = document.getElementById("trainingBtn"),predictBtn = document.getElementById("predictBtn"),toggleVisorBtn = document.getElementById("toggleVisorBtn");
3.3 准备画散点图的函数
调用 tfvis 即可获取数据可视化库的单例对象
tfvis.render.scatterplot() 调用该函数画散点图
// 散点图 tfvis.render.scatterplot() 的 params：表名、点集和该点的含义、最后 x坐标名，y坐标名async function plot(pointsArray, featureName) {tfvis.render.scatterplot({name: `${featureName} vs House Price`}, {values: [pointsArray],series: ['original']}, {xLabel: featureName,yLabel: "price"})}
3.4 加载csv文件并完成数据可视化
为加载按钮编写响应函数 load() ，通过该函数：
1）加载 .csv 文件。
2）映射房屋面积与房价生成点集。
3）打乱点集顺序以防点集自身的一些规律影响模型的准确度。
4）画散点图。
tf.data.csv() 调用该函数加载 .csv 文件。返回 tf.data.CSVDataset 对象
tf.data.CSVDataset.toArray() 调用该函数，异步返回数据集的数组形式。返回 Array 对象
tf.util.shuffle() 调用该函数打乱一个数组对象顺序。返回 Array 对象。
// 加载函数async function load() {// 禁用一些按钮loadBtn.setAttribute("disabled", "disabled");trainingBtn.setAttribute("disabled", "disabled");predictBtn.setAttribute("disabled", "disabled");loadBtn.classList.add('disabled');trainingBtn.classList.add('disabled');predictBtn.classList.add('disabled');// 加载文件traningInfo.innerHTML = `正在加载 kc_house_data.csv ... ...\n`;dataset = tf.data.csv("http://192.168.158.1:8080/kc_house_data.csv");traningInfo.innerHTML += `kc_house_data.csv 加载完成！\n`;traningInfo.innerHTML += `可视化数据集中 ... ...\n`;// 映射房屋面积与价格，生成点集pointset = dataset.map(record => ({x: record.sqft_living, // 房屋面积y: record.price, // 房屋价格}))// 随机排列数据pointsArray = await pointsDataset.toArray();if (pointsArray.length % 2 !== 0) { // 保证数据是偶数个 方便后面拆分数据集pointsArray.pop();}tf.util.shuffle(pointsArray);// 画散点图 查看面积为x，价格为y 的散点分布情况plot(pointsArray, "square feet");traningInfo.innerHTML += `数据可视化完成！\n`;// 启用一些按钮loadBtn.removeAttribute("disabled");loadBtn.classList.remove('disabled');trainingBtn.removeAttribute("disabled");trainingBtn.classList.remove('disabled');}// 绑定加载函数到按钮loadBtn.onclick = load;
测试：正常加载,并且可以在网页右侧看到散点图
4 可视化面板展开隐藏功能实现
tfvis.visor().toggle() 调用以切换面板显示或隐藏
// 可视化面板显示隐藏函数function toggleVisor() {tfvis.visor().toggle();}// 绑定面板显示隐藏按钮点击事件toggleVisorBtn.onclick = toggleVisor;
5 训练模型
5.1 “最小-最大-归一化” 以及 “逆向最小-最大-归一化”的函数编写
最小最大归一化是将一组数据的特征保留的同时，将数的最小最大范围缩小到0~1。
例如 ：
[10, 20, 30] 中，将最小的 10 归一化后为下边界 0，最大数 30 归一化后为上边界 1，而 20 根据在数组中的特征，记为 0.5。
即归一化后数组为： [0, 0.5, 1]。
记 x 为数组中的一个数，min 为数组中的最小数， max 为数组中的最大数。x’ 为归一化后的数，x’的计算公式为：
x’ = (x - min) / (max - min)
下面两个函数中 tensor 为张量对象，下面是一些会用到的该对象的简单计算函数
.min() 取张量中的最小值
.max() 取张量中的最大值
.sub() 减去一个数
.add() 加上一个数
.div() ➗一个数
.mul() 乘以一个数
5.1.1 归一化函数
//
tensorflowJS入门以及数据可视化 美国金县的房价预测相关推荐
- 毕设IDEA2019之ssm+Echarts框架快速入门实现数据可视化（图表统计）
当后台管理系统有一定的数据量后,我们可能需要对这些数据进行统计.分析,提炼出更多有用的信息,而为了使这些冰冷的数据显得更平易近人,更直观的传达信息,我们可以使用图表来将数据表达出来,实现数据可视化.E ...
- 数据分析入门之数据可视化(散点图、折线图、饼图、柱状图、直方图)
文章目录 1.散点图 1.1.导入数据 1.2.数据可视化 1.3.设置参数 1.4.自定义样式 1.5.解决中文不能显示 2.折线图 2.1.导入数据 2.2.日期类型转换 2.3.数据可视化 3. ...
- 最适合新手入门的数据可视化大屏制作软件，现在支持免费使用
如果你是刚刚接触数据可视化的新手,那么这款数据可视化大屏软件绝对适合你,这款软件不仅可以免费使用,而且提供了海量的大屏模板,操作也非常简单方便. 接下来让我们一起看看这款软件的特色之处. 海量大屏模板 ...
- 使用Matplotlib让你轻松入门Python数据可视化
Matplotlib matplotlib开发环境搭建 绘制基础 绘制直线 绘制折线 设置标签文字和线条粗细 绘制一元二次方程的曲线y=x^2 绘制正弦曲线和余弦曲线 散点图 绘制柱状图 绘制饼状图 ...
- 数据分析入门——Matplotlib数据可视化
1.创建画布 import matplotlib.pyplot as plt plt.figure(figsize=(4,4)) import numpy as np x=np.arange(10) ...
- python房价数据挖掘_Python数据分析及可视化实例之帝都房价预测
数据集下载易一网络科技 - 付费文章www.intumu.com 加载数据 import pandas as pd df=pd.read_csv("MYUNOI.csv") # ...
- 数据可视化学习（数据可视化基本概念）
本篇文章翻译自数据可视化入门教程 数据可视化(Data Visualization)和信息可视化(Infographics)是两个相近的专业领域名词.狭义上的数据可视化指的是数据用统计图表方式呈现,而 ...
- 数学建模学习(108)：帮助小白快速实现批量机器学习建模训练和批量的数据可视化
本文主要针对机器学习知识薄弱,不太擅长搭建模型同学使用. 本文主要是讲解可以快速轻松实现可视化.数据预处理.批量模型构建.帮助大家轻松做到可视化和建模.特别是机器学习不扎实同学. 数据科学模型开发管道 ...
- python如何读取mat文件可视化_python Matplotlib数据可视化（1）：简单入门
1 matplot入门指南 matplotlib是Python科学计算中使用最多的一个可视化库,功能丰富,提供了非常多的可视化方案,基本能够满足各种场景下的数据可视化需求.但功能丰富从另一方面来说也意 ...
最新文章
- SQL Server：使用 PIVOT 行转列和 UNPIVOT 列转行
- Python version 2.7 required, which was not found in the registry
- leetcode 212. Word Search II | 212. 单词搜索 II（Trie，回溯，DFS）
- SQL SERVER 2012修改数据库名称（包括 db.mdf 名称的修改）
- jmeter web监听结果_Jmeter性能测试
- pyspider 数据存储到mongoDB中
- C语言-指针的比较/指针加减
- 什么叫做项目孵化_什么叫创业孵化服务？
- 如何加快C++代码的编译速度
- java基础 题和知识点总结, 关于String s是否默认初始化为null......,new一个对象和类静态域,是不是在内存中不是一个地方...
- 卡皇稳了，RTX3090获鲁大师Q1季度最强显卡！
- win10下如何快速安装迷你迅雷
- 739. 每日温度/C++
- 有关于APICLOUD打印条码功能的操作
- python计算复数的辐角,（Python 3）1051复数乘法（15分）,python31051
- ZZULIOJ1097: 计算平均成绩（函数专题）
- Linux上安装VIM
- Java是剑客;.NET是刀客(转载)
- Linux防火墙开放端口
- [SYSS-2018-033]: Fujitsu Wireless Keyboard Set LX901 - Keystroke Injection Vulnerability
热门文章