tensorflowJS入门以及数据可视化美国金县的房价预测

本文链接：https://blog.youkuaiyun.com/little_boyyy/article/details/121911760

本文是作者使用TensorFlow.js进行机器学习的实践记录，主要涉及线性回归模型的构建和美国金县房屋销售数据的预测。首先介绍了tensorflowJS和数据可视化库tfjs-vis的引入，接着详细阐述了如何加载csv数据、绘制散点图、实现数据的最小-最大-归一化以及模型训练过程。文章提供了完整的代码示例，包括训练模型的步骤和训练过程中loss变化的可视化。

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

前言

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.