31:T610,styel = { return htl.html` ` }32:[] 2f:{"title":"ML Case Study | Unleash the power of Python plus JavaScript","cells":[{"id":0,"value":"# ML Case Study | Unleash the power of Python plus JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":1140,"value":"citation = {\n return htl.html`\n

\n Any application that can be written in JavaScript, will eventually be written in JavaScript.\n - Jeff Atwood (Co-founder of stackoverflow.com)\n

\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"> Pyodide is a port of CPython to WebAssembly/Emscripten, which makes it possible to install and run Python packages in the browser to unleash the power of Python plus JavaScript. This means many popular Python data analysis and machine learning packages (such as _numpy_, _pandas_, and _scikit-learn_) can be used easily with JavaScript to create dynamic user interfaces in web and mobile applications.\n>\n> In this case study, we use an example from the awesome book Hands-on Machine Learning with Scikit-Learn, Keras and TensorFlow (by Aurélien Geron) to show how to work Python with JavaScript together.","pinned":false,"hidden":false,"mode":"md"},{"id":184,"value":"

\n**Python Packages Loaded:**","pinned":false,"hidden":false,"mode":"md"},{"id":328,"value":"pills = {\n return html `\n

\n ${loadingPackages.map(d => '

'+d+'

')}\n

\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1190,"value":"Load CSV file in a pandas data frame","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"housing = {\n const url = 'https://raw.githubusercontent.com/ageron/handson-ml2/master/datasets/housing/housing.csv'\n return p.pd.read_csv(pyodide.pyodide_py.open_url(url))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1194,"value":"pd.DataFrame can be transferred to an array of objects","pinned":false,"hidden":false,"mode":"md"},{"id":209,"value":"housing_obj = df2Obj(housing)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1201,"value":"Pandas data frame functions such as head() and describe() are here to quickly check the data","pinned":false,"hidden":false,"mode":"md"},{"id":466,"value":"Inputs.table(df2Obj(housing.head(10)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":470,"value":"Inputs.table(df2Obj(housing.describe()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1219,"value":"{\n return html`

\n
Javascript dynamic visualizations make the Descriptive Statistics much easier and more clear, providing stronger capability of data exploration and story telling.
\n

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"Distributions of each variable","pinned":false,"hidden":false,"mode":"md"},{"id":288,"value":"viewof varName = Inputs.select(Object.keys(housing_obj[0]).slice(0 , Object.keys(housing_obj[0]).length-1), {label: \"Variable Name:\", value: Object.keys(housing_obj[0])[2]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"Plot.plot({\n height: 200,\n y: {\n grid: true\n },\n marks: [\n Plot.rectY(housing_obj, Plot.binX({y: \"count\"}, {x: varName, fill: 'steelblue'})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1251,"value":"Use geographic information to demonstrate the housing value and population segmentations","pinned":false,"hidden":false,"mode":"md"},{"id":428,"value":"viewof varNames = Inputs.form({\n x: Inputs.select(Object.keys(housing_obj[0]).slice(0 , Object.keys(housing_obj[0]).length-2), {label: \"X:\", value: Object.keys(housing_obj[0])[0]}),\n y: Inputs.select(Object.keys(housing_obj[0]).slice(0 , Object.keys(housing_obj[0]).length-2), {label: \"Y:\", value: Object.keys(housing_obj[0])[1]}),\n size: Inputs.select(Object.keys(housing_obj[0]).slice(0 , Object.keys(housing_obj[0]).length-2), {label: \"Size:\", value: Object.keys(housing_obj[0])[5]}),\n color: Inputs.select(Object.keys(housing_obj[0]).slice(0 , Object.keys(housing_obj[0]).length-2), {label: \"Color:\", value: Object.keys(housing_obj[0])[Object.keys(housing_obj[0]).length-3]}),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"Plot.plot({\n y: {\n },\n color: {\n type: \"linear\",\n scheme: \"BuRd\",\n legend: true\n },\n marks: [\n // Plot.ruleY([0]),\n Plot.dot(housing_obj, {x: varNames.x, y: varNames.y, r:d => Math.sqrt(d[varNames.size]), fill: varNames.color, opacity: 0.3})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1257,"value":"Correlation check for feature engineering and derived variable generation","pinned":false,"hidden":false,"mode":"md"},{"id":515,"value":"{\n let temp = []\n const corr = df2Obj(housing.corr())\n const arr = Object.keys(corr[0])\n\n for (let i = 0; i < arr.length; ++i) {\n temp.push({...corr[i], x: arr[i]})\n }\n\n // return temp\n const corrData = aq.from(temp).fold(aq.not(['x'])).objects()\n\n return Plot.plot({\n height: 500,\n width: 500,\n padding: 0.05,\n marginLeft: 120,\n marginTop: 120,\n grid: true,\n x: {\n axis: \"top\",\n label: null,\n tickRotate: -90,\n },\n y: {\n label: null,\n \n },\n color: {\n type: \"linear\",\n scheme: \"PiYG\",\n legend: true\n },\n marks: [\n Plot.cell(corrData, {\n x: \"x\",\n y: \"key\",\n fill: \"value\",\n }),\n Plot.text(corrData, {\n x: \"x\",\n y: \"key\",\n text: d => d.value?.toFixed(3),\n // title: \"title\"\n })\n ]\n })\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1268,"value":"{\n return html`

\n
Data preprocessing by using pandas and scikit-learn
\n

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1274,"value":"Check missing values for each variable","pinned":false,"hidden":false,"mode":"md"},{"id":575,"value":"housing.isna().sum().to_string()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1278,"value":"Pandas\n* remove observations with missing values\n* preprocessing.OrdinalEncoder to treat categorical variable\n\nSklearn\n* model_selection.train_test_split to split training and test datasets with seed\n* Scaling for training dataset\n * Standard Scaler\n * Min-Max Scaler","pinned":false,"hidden":false,"mode":"md"},{"id":640,"value":"data = {\n \n const tempResult = await py`housing_clean = ${housing}.dropna(subset=['total_bedrooms'])\n\nhousing_cat = housing_clean[['ocean_proximity']]\nordinal_encoder = ${p.sk_pre.OrdinalEncoder}()\nhousing_cat_encoded = ordinal_encoder.fit_transform(housing_cat)\nhousing_clean['housing_cat_encoded'] = housing_cat_encoded\nhousing_clean = housing_clean.drop(['ocean_proximity'], axis=1)\n\ntrain, test = ${p.sk_ms.train_test_split}(housing_clean, test_size=0.2, random_state=42)\ntrain_X = train.drop(['median_house_value'], axis=1)\ntrain_y = ${p.pd.DataFrame}(train['median_house_value'])\ntest_X = test.drop(['median_house_value'], axis=1)\ntest_y = ${p.pd.DataFrame}(test['median_house_value'])\n{'train_X':train_X, 'train_y':train_y, 'test_X':test_X, 'test_y':test_y}\n`\n\n let temp = {};\n const arr = Array.from(tempResult.keys());\n for (const k of arr) {\n temp[k] = tempResult.get(k);\n }\n return temp;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"viewof scalerSelection = Inputs.select(new Map([\n[\"Standard Scaler\", \"StandardScaler\"],\n [\"Min Max Scaler\", \"MinMaxScaler\"]\n]), {label: \"Select Scaler\", value: \"StandardScaler\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"train_prepared = {\n return py`housing_clean = ${data.train_X}\n\nscaler = ${scalerSelection == 'StandardScaler' ? p.sk_pre.StandardScaler : p.sk_pre.MinMaxScaler}()\n# scaler = ${p.sk_pre.StandardScaler}()\nhousing_clean_scale = ${p.pd.DataFrame}(scaler.fit_transform(${data.train_X}), columns=housing_clean.columns)\nhousing_clean_scale`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1296,"value":"{\n return html`

\n
Model Training:
\nModules from Sklearn vs Custom Matrix Calculation from Numpy
\n

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"Linear regression (normal equation method) by using sklearn LinearRegression ","pinned":false,"hidden":false,"mode":"md"},{"id":615,"value":"lin_rmse = {\nreturn py`lin_reg = ${p.sk_lm.LinearRegression}()\nlin_reg.fit(${train_prepared}, ${data.train_y})\ntrain_predictions = lin_reg.predict(${train_prepared})\ntest_predictions = lin_reg.predict(${data.test_X})\ntrain_rmse = ${p.np.sqrt}(${p.sk_mt.mean_squared_error}(${data.train_y}, train_predictions))\ntest_rmse = ${p.np.sqrt}(${p.sk_mt.mean_squared_error}(${data.test_y}, test_predictions))\n{'train_rmse':train_rmse, 'test_rmse':test_rmse, 'params': [lin_reg.intercept_, lin_reg.coef_.flatten()]}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1311,"value":"Linear regression (stochastic gradient descent method) using sklearn SGDRegressor ","pinned":false,"hidden":false,"mode":"md"},{"id":669,"value":"sgd_rmse = {\nreturn py`old_stdout = ${p.sys}.stdout\n${p.sys}.stdout = mystdout = ${p.io}.StringIO()\n\nlin_sgd = ${p.sk_lm.SGDRegressor}(verbose=1)\nlin_sgd.fit(${train_prepared}, ${data.train_y})\n\n${p.sys}.stdout = old_stdout\nloss_history = mystdout.getvalue()\n\ntrain_predictions = lin_sgd.predict(${train_prepared})\ntest_predictions = lin_sgd.predict(${data.test_X})\ntrain_rmse = ${p.np.sqrt}(${p.sk_mt.mean_squared_error}(${data.train_y}, train_predictions))\ntest_rmse = ${p.np.sqrt}(${p.sk_mt.mean_squared_error}(${data.test_y}, test_predictions))\n\n{'train_rmse':train_rmse, 'test_rmse':test_rmse, 'params': [lin_sgd.intercept_, lin_sgd.coef_], 'loss':loss_history}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":737,"value":"Custom Normal Equation by _Numpy_\n\nRecall normal equation with Regularization (Ridge):
\n${tex.block`\\hat{\\theta}=\\left(X^{T} X+\\lambda I\\right)^{-1} X^{T} Y \\\\~\\\\`}","pinned":false,"hidden":false,"mode":"md"},{"id":961,"value":"viewof lamda = Inputs.radio([0.001, 0.01, 0.1, 1, 2, 10, 100], {label: tex`\\text {Regularization} \\ (\\lambda)`, value: 2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"normalEquation = {\n return py`X = ${p.np.concatenate}(([${p.np.ones}(${train_prepared}.shape[0])], ${p.np.array}(${train_prepared}).T), axis=0).T\ny = ${p.np.array(data.train_y)}\none = ${p.np.identity}(X.shape[1])\none[0,0] = 0\nlamda = ${lamda}\ntheta = ${p.np.linalg.pinv}(X.T.dot(X) + lamda * one).dot(X.T).dot(y)\nprediction = X.dot(theta)\nrmse = ${p.np.sqrt}(${p.sk_mt.mean_squared_error}(${data.train_y}, prediction))\n{'theta':theta, 'prediction':prediction, 'rmse':rmse}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1324,"value":"Custom Gradient Descent by _Numpy_","pinned":false,"hidden":false,"mode":"md"},{"id":1354,"value":"> Cost function:\n> ${tex.block`\nJ(w,b) = \\frac{1}{N} \\sum_{i=1}^n (y_i - (mx_i + b) )^2\n`}\n\n> Gradient:\n> ${tex.block`\n\\frac{\\partial J(w)}{\\partial w} = \\frac{1}{N} \\sum -2 x_i (mx_i + b) \\\\~\\\\\n\\frac{\\partial J(b)}{\\partial b} = \\frac{1}{N} \\sum -2 (mx_i + b) \\\\~\\\\\n`}\n\n> Update parameters repeatedly until convergence (${tex`\\alpha`} is the learning rate):\n> ${tex.block`\nw := w - \\alpha \\frac{\\partial J(w)}{\\partial w} \\\\~\\\\\nb := b - \\alpha \\frac{\\partial J(b)}{\\partial b} \\\\~\\\\\n`}\n> ","pinned":false,"hidden":false,"mode":"md"},{"id":1021,"value":"lin_gd = {\n const temp = await py`X = ${p.np.array(train_prepared)}\ny = ${p.np.array(data.train_y)}\n\nm, n = X.shape\nl2_penality = 0.0001\nW = ${p.np.reshape}(${p.np.zeros}(n), (-1,1))\nb = 0\nlearning_rate = 0.01\niterations = 200\n\nparams = []\n\nfor i in range(iterations):\n Y_pred = X.dot(W) + b\n loss = ${p.np.sum}((y - Y_pred)**2) / m\n dW = ( -1 * ( 2 * ( X.T ).dot(y - Y_pred)) + ( 2 * l2_penality * W ) ) / m\n db = - 2 * ${p.np.sum}( y - Y_pred ) / m \n \n W = W - learning_rate * dW\n b = b - learning_rate * db\n params.append([i+1, W, b, loss])\n\nparams`\n\n return temp.map(d => ({'i':d[0], 'W':d[1], 'b':d[2], 'loss':d[3]}))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1328,"value":"Convergence of loss function","pinned":false,"hidden":false,"mode":"md"},{"id":1092,"value":"{\n return Plot.plot({\n marginLeft: 100,\n height:300,\n x:{\n label: 'Iterations →',\n },\n y: {\n label: '↑ Loss',\n grid: true,\n },\n marks: [\n Plot.line(lin_gd, {x: d=>d.i, y: d=>d.loss, stroke: 'steelblue'})\n ]\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1332,"value":"Comparison of parameters from different models","pinned":false,"hidden":false,"mode":"md"},{"id":898,"value":"Inputs.table(\n aq.table({\n Parameters: ['Intercept', ...d3.range(9).map(d => 'θ'+(d+1))],\n 'Sklearn Linear Reg': [...lin_rmse.get('params')[0], ...lin_rmse.get('params')[1]].map(d=>d.toFixed(0)),\n 'Sklearn SGD': [...sgd_rmse.get('params')[0], ...sgd_rmse.get('params')[1]].map(d=>d.toFixed(0)),\n 'Normal Equation' : [...normalEquation.get('theta').map(d=>d[0])].map(d=>d.toFixed(0)),\n 'Custom GD' : [lin_gd[lin_gd.length-1].b.toFixed(0), ...lin_gd[lin_gd.length-1].W.map(d=>d[0].toFixed(0))]\n }).objects()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1336,"value":"{\n return html`

\n
Thanks for reading!
\n
If you are interested in machine learning,
I have some notes and thoughts in this collection
\n

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"

\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"df2Obj = (df) => {\n return df.to_dict('records').toJs().map(Object.fromEntries)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"libs = py`import pandas as pd \nimport numpy as np \nimport sklearn.model_selection as ms\nimport sklearn.preprocessing as pre\nimport sklearn.linear_model as lm\nimport sklearn.metrics as mt\nimport sys \nimport io \n{'pd':pd, 'np':np, 'sk_ms':ms, 'sk_pre':pre, 'sk_lm':lm, 'sk_mt':mt, 'sys':sys, 'io':io}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"p = {\n let temp = {};\n const arr = Array.from(libs.keys());\n for (const k of arr) {\n temp[k] = libs.get(k);\n }\n return temp;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"loadingPackages = {\n let i = 1;\n while(i < 30) {\n yield Object.keys(pyodide.loadedPackages);\n await Promises.tick(500);\n i++;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"py = async (strings, ...expressions) => {\n let globals = {};\n const code = strings.reduce((result, string, index) => {\n if (expressions[index]) {\n const name = `x${index}`;\n globals[name] = expressions[index];\n return result + string + name;\n }\n return result + string;\n }, '');\n await pyodide.loadPackagesFromImports(code);\n const result = await pyodide.pyodide_py.eval_code_async(\n code,\n pyodide.toPy(globals)\n );\n if (result?.toJs) return result.toJs();\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"pyodide = {\n const pyodide = await require(\"//cdn.jsdelivr.net/pyodide/v0.19.1/full/pyodide.js\");\n return pyodide.loadPyodide({\n indexURL: \"https://cdn.jsdelivr.net/pyodide/v0.19.1/full/\"\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1146,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1222,"value":"import { style, styles, mds, compile } from '@elisk/styles'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}