本文是汉化版的Danfo notebook对应修改的demo，与原版demo内容相比，请求csv的路径发生了变化，且部分文字汉化了。该汉化版本在博主发布的资源中可以找到。
由于G内网无法访问该文档，故制作了汉化版并挂在此处方便G内新技术爱好者使用，也可以使用制作的汉化及静态文件本地化版本的Dnotebook软件包。

Dnotebook汉化版demo与Getting Started

快速链接
Dafo 笔记本 demo
Dafo 笔记本 汉化Getting Started文档
G内网可用且汉化的软件包

demo部分

demo

快速可视化

[1]

var df2
load_csv("//localhost:4400/javascripts/datas/train.csv").then((df)=>{df2 = df
})

[2]

table(df2.head())

Out

Product_Identifier Supermarket_Identifier Product_Supermarket_Identifier Product_Weight Product_Fat_Content Product_Shelf_Visibility Product_Type Product_Price Supermarket_Opening_Year Supermarket _Size Supermarket_Location_Type Supermarket_Type Product_Supermarket_Sales
0 DRA12 CHUKWUDI010 DRA12_CHUKWUDI010 11.6 Low Fat 0.068535039 Soft Drinks 357.54 2005 NaN Cluster 3 Grocery Store 709.08
1 DRA12 CHUKWUDI013 DRA12_CHUKWUDI013 11.6 Low Fat 0.040911824 Soft Drinks 355.79 1994 High Cluster 3 Supermarket Type1 6381.69
2 DRA12 CHUKWUDI017 DRA12_CHUKWUDI017 11.6 Low Fat 0.041177505 Soft Drinks 350.79 2014 NaN Cluster 2 Supermarket Type1 6381.69
3 DRA12 CHUKWUDI018 DRA12_CHUKWUDI018 11.6 Low Fat 0.041112694 Soft Drinks 355.04 2016 Medium Cluster 3 Supermarket Type2 2127.23
4 DRA12 CHUKWUDI035 DRA12_CHUKWUDI035 11.6 Ultra Low fat 0 Soft Drinks 354.79 2011 Small Cluster 2 Supermarket Type1 2481.77

[3]

table(df2.describe())

Out

Product_Shelf_Visibility Product_Price Supermarket_Opening_Year Product_Supermarket_Sales
count 4990 4990 4990 4990
mean 0.066916 391.803772 2004.783447 6103.52002
std 0.053058 119.378259 8.283151 4447.333835
min 0 78.730003 1992 83.230003
median 0.053564 393.86 2006 5374.675
max 0.328391 667.219971 2016 32717.410156
variance 0.002815 14251.168763 68.610594 19778778.23941

[4]

//Display the number of rows and columns
console.log(df2.shape)

Out
[4990,13]

[5]

console.log(df2.dtypes)

Out
[string,string,string,string,string,float32,string,float32,int32,string…3 more]

为了同时查看列及其类型。让我们创建一个序列，然后将索引设置为列名，并将值设置为tyoe

[6]

let dtypes = new dfd.Series(df2.dtypes,{index: df2.columns})
table(dtypes)

Out

0
Product_Identifier string
Supermarket_Identifier string
Product_Supermarket_Identifier string
Product_Weight string
Product_Fat_Content string
Product_Shelf_Visibility float32
Product_Type string
Product_Price float32
Supermarket_Opening_Year int32
Supermarket _Size string
Supermarket_Location_Type string
Supermarket_Type string
Product_Supermarket_Sales float32

[7]

//Remove Id columns
let cols_2_remove = ['Product_Identifier', 'Supermarket_Identifier', 'Product_Supermarket_Identifier']
var new_df = df2.drop({columns:cols_2_remove,axis:1}) // drop the columns
table(new_df.head())

Out

Product_Weight Product_Fat_Content Product_Shelf_Visibility Product_Type Product_Price Supermarket_Opening_Year Supermarket _Size Supermarket_Location_Type Supermarket_Type Product_Supermarket_Sales
0 11.6 Low Fat 0.068535039 Soft Drinks 357.54 2005 NaN Cluster 3 Grocery Store 709.08
1 11.6 Low Fat 0.040911824 Soft Drinks 355.79 1994 High Cluster 3 Supermarket Type1 6381.69
2 11.6 Low Fat 0.041177505 Soft Drinks 350.79 2014 NaN Cluster 2 Supermarket Type1 6381.69
3 11.6 Low Fat 0.041112694 Soft Drinks 355.04 2016 Medium Cluster 3 Supermarket Type2 2127.23
4 11.6 Ultra Low fat 0 Soft Drinks 354.79 2011 Small Cluster 2 Supermarket Type1 2481.77

[8]

console.log(df2.dtypes)

Out

[string,string,string,string,string,float32,string,float32,int32,string....3 more]

为了一起查看columns及其类型。让我们创建一个Series ，然后将索引设置为列名，并将值设置为tyoe。

let dtypes = new dfd.Series(df2.dtypes,{index: df2.columns})
table(dtypes)

Out

0
Product_Identifier string
Supermarket_Identifier string
Product_Supermarket_Identifier string
Product_Weight string
Product_Fat_Content string
Product_Shelf_Visibility float32
Product_Type string
Product_Price float32
Supermarket_Opening_Year int32
Supermarket _Size string
Supermarket_Location_Type string
Supermarket_Type string
Product_Supermarket_Sales float32 
//Remove Id columns
let cols_2_remove = ['Product_Identifier', 'Supermarket_Identifier', 'Product_Supermarket_Identifier']
var new_df = df2.drop({columns:cols_2_remove,axis:1}) // drop the columns

table(new_df.head())
Product_Weight Product_Fat_Content Product_Shelf_Visibility Product_Type Product_Price Supermarket_Opening_Year Supermarket_Size Supermarket_Location_Type Supermarket_Type Product_Supermarket_Sales
0 11.6 Low Fat 0.068535039 Soft Drinks 357.54 2005 NaN Cluster 3 Grocery Store 709.08
1 11.6 Low Fat 0.040911824 Soft Drinks 355.79 1994 High Cluster 3 Supermarket Type1 6381.69
2 11.6 Low Fat 0.041177505 Soft Drinks 350.79 2014 NaN Cluster 2 Supermarket Type1 6381.69
3 11.6 Low Fat 0.041112694 Soft Drinks 355.04 2016 Medium Cluster 3 Supermarket Type2 2127.23
4 11.6 Ultra Low fat 0 Soft Drinks 354.79 2011 Small Cluster 2 Supermarket Type1 2481.77 
//print the shape
console.log(new_df.shape)

Out

[4990,10]

//list out the categorical and numerical variable
var cat_cols = ['Product_Fat_Content','Product_Type','Supermarket _Size', 'Supermarket_Location_Type','Supermarket_Type' ]var num_cols = ['Product_Weight', 'Product_Shelf_Visibility','Product_Price', 'Supermarket_Opening_Year', 'Product_Supermarket_Sales']

for(let i in cat_cols){let col = cat_cols[i]let counts = new_df[col].value_counts()var layout = {title: `Bar Plot for ${col}`}viz(`cat_viz${i}`, x =>{counts.plot(x).bar({layout:layout})})}






for(let i in num_cols){let col = num_cols[i]let layout ={xaxis:{title: col},yaxis: {title:'Product_Supermarket_Sales'}}viz(`num_col${i}`, x=>{new_df.plot(x).scatter({x:col,y:'Product_Supermarket_Sales'})})
}






for(let i in cat_cols){let col = cat_cols[i]let layout ={xaxis:{title: col},yaxis: {title:'Product_Supermarket_Sales'}}viz(`cat_cols${i}`, x=>{new_df.plot(x).box({x:col, y:'Product_Supermarket_Sales'})})
}





Getting Started 部分

Getting Started

使用Dnotebooks的快速指南

安装

要安装Dnotebooks，必须安装Node.js。如果您没有，请按照这里的官方指南进行安装。

安装Node.js后，您可以通过在终端上运行以下命令来安装Dnotebook:

npm install -g dnotebook

建议如上全局安装Dnotebook。这使得从任何地方启动服务器都很容易。

运行 Dnotebook

安装后，在您打开的终端中运行以下命令:

dnotebook

这将在您的默认网页浏览器中打开一个url为 http://localhost:4400 的新选项卡.应该如下图所示:

此页面是默认的笔记本界面。从这里你可以开始写JavaScript或者Markdown。

单元格（Cells）

单元格（Cell）们构成了笔记本的主体。 在上面的截图中，黑色的单元格（Cell）为空单元格. 有两种类型的单元格，即:

  • Code cell: 这些单元格包含要执行的JavaScript代码，输出如下所示。
  • Markdown cell: 这些包含使用 Markdown 的文本.

代码单元格（Code Cell）

新笔记本的第一个单元格始终是代码单元格。任何JavaScript代码都可以在代码单元中编写和执行。让我们用经典的hello world示例来测试一下。键入console.log("Hello World!")输入代码单元格，然后单击运行按钮。

将鼠标悬停在代码单元格上，会显示Run按钮。或者，可以使用快捷键****Ctrl + Enter** (Win)或者Command + Enter (Mac) 来运行代码单元格。

结果应该如下所示:

Markdown

Markdown 是一种轻量级标记语言，可用于向纯文本文档添加格式元素。标记写在文本单元格中。要创建文本单元格，请将鼠标悬停在任意单元格上，然后单击 text 按钮。您可以选择在当前单元格的上方或下方添加降价单元格。

在文本框中，您可以添加任何减价文本。例如，将下面的文本复制并粘贴到标记文本框中。

# This is a level 1 heading
## This is a level 2 headingThis is some plain text that forms a paragraph.
Add emphasis via **bold** and __bold__, or *italic* and _italic_.
Paragraphs must be separated by an empty line.
* Sometimes we want to include lists.
* Which can be indented.
1. Lists can also be numbered.
2. For ordered lists.
[It is possible to include hyperlinks](https://www.example.com)
Inline code uses single backticks: `foo()`, and code blocks use triple backticks:​```
bar()
​```
Or can be indented by 4 spaces:foo()
And finally, adding images is easy: ![Alt text](https://www.example.com/image.jpg)

要运行markdown 单元格，您可以双击它，或使用运行按钮。这将代替markdown 呈现输出。

要再次编辑一个markdown 单元格，你再次双击即可.

持久化/State

笔记本的每个实例都运行一个持久状态，并且在任何单元格中声明的变量对所有单元格都可用。

例如，如果您在一个单元格中加载包或声明变量，它们将在另一个单元格中可用。通过这种方式，您可以认为笔记本文档有点类似于脚本文件，只是它是多媒体。让我们试试这个来感受一下。首先，我们将加载danfo.js和tensorflow.js包，然后创建一个简单的模型。

//load package downloads and install any JavaScript package via its CDNload_package(["https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest","https://cdn.jsdelivr.net/npm/danfojs@0.2.4/dist/index.min.js"])

load_package是一种内置方法，可帮助您通过库/包的CDN链接将其加载到笔记本中。它可以接受一系列链接。

一旦我们执行了上面的单元，我们就可以在任何其他单元中引用tf (Tensorflow.js)和dfd (Danfo.js)。例如，我们可以从下面的代码创建一个Danfo DataFrame：

 json_data = [{ A: 0.4612, B: 4.28283, C: -1.509, D: -1.1352 },{ A: 0.5112, B: -0.22863, C: -3.39059, D: 1.1632 },{ A: 0.6911, B: -0.82863, C: -1.5059, D: 2.1352 },{ A: 0.4692, B: -1.28863, C: 4.5059, D: 4.1632 }]df = new dfd.DataFrame(json_data)
table(df)

要显示Danfo对象(DataFrame/Series)，请通过传递要显示的对象来使用内置的table函数。如果使用普通的print()语句，结果会打印到浏览器控制台

添加一个新的代码单元，并创建一些简单的张量，如下所示:

var xs = tf.tensor2d([[0,0],[0,1],[1,0],[1,1]])
var ys = tf.tensor2d([[0],[1],[1],[0]])function getModel(){var model = tf.sequential()model.add(tf.layers.dense({units:8, inputShape:2, activation: 'tanh'}))model.add(tf.layers.dense({units:1, activation: 'sigmoid'}))model.compile({optimizer: 'sgd', loss: 'binaryCrossentropy', lr:0.1})return model
}

您可以使用console.log函数打印出任何对象。这将在浏览器控制台和单元格下的输出div中打印对象。

console.log(xs)

键入 Option + ⌘ + J (在 macOS系统上), 或者 Shift + CTRL + J (在 Windows/Linux系统上)以打开网页浏览器的console。我们鼓励您在实验时打开控制台，因为控制台中的错误消息格式正确。

在下面的新单元中，您可以创建和训练一个简单的模型:

var loss = []
var epochs = []
const model = getModel()model.fit(xs, ys, {batchSize: 1,epochs: 50,callbacks: {onEpochEnd: async(epoch, logs)=>{epochs.push(epoch); loss.push((logs.loss).toFixed(4))}}
})

我们保存了每个epoch后的loss，因此我们可以使用Danfo.js内置的绘图方法进行绘图。

s = new dfd.Series(loss)
s.plot(this_div()).line()

要使用Danfo.js绘图，您需要指定一个div名称。您可以通过调用函数**this_div( )**来访问每个代码单元格下的输出div

文件选项

单击Option选项卡会为您的笔记本显示几个文件选项:

你可以重命名、下载和上传笔记本。

重命名笔记本

单击重命名选项会打开一个模态框，您可以在其中输入名称。完成后，单击关闭按钮。

下载你的笔记本

你可以下载一个笔记本供以后使用。下载按钮将笔记本保存为JSON对象，可以重新上传到Dnotebooks。例如，您将下载您创建的示例笔记本，并在下面重新上传:

导入保存的笔记本

您可以上传上例中保存的笔记本。首先，刷新页面，在新实例中，单击option 然后upload。

选择你早期下载的笔记本 (myNotebook.json). 这将自动加载并显示文件:

您还可以像使用任何其他笔记本一样进行交互和运行笔记本。

Extra Functions

load_package()

加载包方法可以帮助您通过CDN链接轻松地将外部包/库添加到笔记本中。例如，要加载Tensorflow.js和Plotly.js，您可以执行以下操作:

load_package(["https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest", "https://cdn.plot.ly/plotly-latest.min.js"])

加载包后，您可以像在HTML页面中一样访问它们。例如，您可以绘制如下所示的交互式图表:

var trace1 = {x: [1, 2, 3, 4],y: [10, 11, 12, 13],mode: 'markers',marker: {size: [40, 60, 80, 100]}
};var data = [trace1];var layout = {title: 'Marker Size',showlegend: false,height: 600,width: 600
};Plotly.newPlot(this_div(), data, layout); //this_div is a function that returns the current output div name

load_csv()

load_csv函数帮助您通过互联网将csv文件异步加载到Danfo.js DataFrame中。在读取大文件并且想要跟踪进度的时候，应该用这个代替Danfo.js内置的read_csv函数。load_csv在导航栏上显示一个微调器，以指示加载方法的状态。

将下面一行代码添加到代码单元格中，然后运行它。

var df
load_csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")
.then((d)=>{df = d
})

如果您观察右上角，您会注意到一个指示单元格状态的微调器。

table()

要轻松显示Danfo.js的DataFrame/series，可以使用内置的table函数。只需从任何单元格中调用它，并传入DataFrame对象。例如，加载上述finance数据集后，您可以如下所示显示它:

table(df) //displays object as a formated table

this_div()

函数this_div()将返回当前代码单元格输出的id。这可以在绘图时使用，或者当您想要在输出单元格中显示内容时使用。

请参见下面的示例，该示例根据日期索引绘制了finance DataFrame 中的两列。

var layout = {title: 'A financial charts',xaxis: {title: 'Date',},yaxis: {title: 'Count',}
}new_df = df.set_index({ key: "Date" })
new_df.plot(this_div()).line({ columns: ["AAPL.Open", "AAPL.High"], layout: layout })

forlog()

当循环（looping）时，**console.log()**将只显示输出单元格中循环的最后一个元素:

for(let i=0; i<10; i++){console.log(i)
}

要查看输出单元格中循环的所有元素，可以使用如下所示的forlog 方法:

for(let i=0; i<10; i++){console.forlog(i)
}

Danfo.js专题 - 附：Dnotebook（Danfo Notebook）单机资源与汉化文档相关推荐

  1. Danfo.js专题 - Danfo.js与Dnotebook简介与入门

    Danfo.js与Dnotebook -- pandas.jupyter的JavaScript版本 [前言]:谷歌公司不仅推出了tensorflow的JavaScript版本tensorflow.js ...

  2. Danfo.js专题 - Series对象

    Danfo.js专题 - Series对象 jcLee95 的 CSDN 博客 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550 ...

  3. JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库

    JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈 ...

  4. js基础3 dom基础/绑定获取事件/图片切换练习/文档加载/全选全不选/dom的其他属性/dom的增加/添加删除练习

    dom基础 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8 ...

  5. （附源码）springboot基于WEB的高校文档打印系统 毕业设计101004

    Springboot 高校文档打印系统 摘要 信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以 ...

  6. 量子计算机到底神在哪里说明文,说明文专题专项训练题（26页）-原创力文档

    2020说明文专题专项训练题 一.人的体质有酸碱之分吗 (2019湖北十堰中考试题) ①人的体质有酸碱之分,酸性体质会导致各种疾病,甚至诱发癌症.纠正偏酸的体质,就能治愈疾病,维持健康,食物也有酸碱之 ...

  7. vue项目中，js根据文件名后缀，判断文件图片、视频、文档、pdf等类型的方法

    vue项目中,在获得文件名信息,需要根据文件名的后缀来区分文件类型的方法如下:其中,文件后缀可自由拓展. // 根据文件名后缀区分 文件类型/** @param: fileName - 文件名称* @ ...

  8. Proteus元件库对照表常用器件的英文名称(附元件库资源包和DOC文档)

    Proteus元件库对照表常用器件的英文名称 元件库资源包和DOC文档(放在文章末尾) Proteus元件库对照表常用器件的英文名称 稳压二极管 ZENER DIODE 肖特基二极管 SCHOTTKY ...

  9. nodejs学习文档(一) 认识node.js

    Node.js 主要应用领域 RESTFul API api是当前web应用最常见的请求方式,尤其是如angularjs.react等框架实现的单页面应用,请求离不开GET,POST,HEAD,UPD ...

最新文章

  1. 敏捷开发中如何定义“完成”？
  2. mysql 2014_mysql错误之2014
  3. 软件测试面试题-如何测试复制粘贴功能
  4. selenium python 一些操作和定位收集
  5. 服务发现 注册中心 consul 的介绍、部署和使用
  6. Python高级编程(二)
  7. 微软图表控件MsChart使用说明[转]
  8. 【错误记录】C 语言中通过指针操作字符串常量出错记录 ( 只有 栈内存 或 堆内存 中的数据才能通过指针修改 | 不要通过指针修改常量区的字符串 )
  9. 26. Leetcode 206. 反转链表 (链表-反转链表)
  10. python教程：getattr函数和hasattr函数的用法
  11. POJ-3067 Japan（树状数组、线段树）
  12. 模块讲解----shutil模块（copy、压缩、解压）
  13. Attempt to save the map xxx.m failed
  14. 十一、MySQL视图学习笔记（详解）
  15. 信息学奥赛一本通（2043：【例5.11】杨辉三角形）
  16. Linux离线同步时间
  17. c++调用栈库函数_大华 | C/C++ 校招笔试题
  18. ios浏览器微信支付回调页面_iOS微信系列,WKWebview加载H5进行微信支付返回浏览器解决方案!...
  19. 输入法里打出特殊符号
  20. USB3.0 HUB方案之GL3520

热门文章

  1. Matlab之semilogx、semilogx、loglog函数
  2. 机器学习回顾篇（2）：最小二乘法
  3. Python导入jar包
  4. tornado SQLAlchemy
  5. spring Assert
  6. python编程基础之六
  7. POJ 2528 Mayor's posters 贴海报 线段树 区间更新
  8. PECL PEAR php扩展模块的简便安装方式
  9. 爱奇艺全国高校算法大赛初赛A
  10. 数组的合并，去重，排序