diff --git a/docs/source/api.rst b/docs/source/api.rst
index 9e10bb8e9..15b90cb68 100644
--- a/docs/source/api.rst
+++ b/docs/source/api.rst
@@ -136,6 +136,12 @@ These methods generate sklearn models and evaluate them.
.. autofunction:: machine.learn.skl_utils.plot_confusion_matrix
+.. autofunction:: machine.learn.skl_utils.plot_learning_curve
+
+.. autofunction:: machine.learn.skl_utils.plot_pca_2d
+
+.. autofunction:: machine.learn.skl_utils.plot_tsne_2d
+
.. autofunction:: machine.learn.skl_utils.plot_roc_curve
.. autofunction:: machine.learn.skl_utils.plot_imp_score
diff --git a/machine/learn/skl_utils.py b/machine/learn/skl_utils.py
index e984cd6a4..7c1edc57a 100644
--- a/machine/learn/skl_utils.py
+++ b/machine/learn/skl_utils.py
@@ -50,6 +50,10 @@
import matplotlib.colors as mcolors
from matplotlib.patches import Patch
from sklearn.manifold import TSNE
+from sklearn.model_selection import learning_curve
+
+
+
mpl.use('Agg')
@@ -503,7 +507,7 @@ def generate_results(model, input_data,
plot_pca_2d(tmpdir,_id,features,target)
# plot_pca_3d(tmpdir,_id,features,target)
# plot_pca_3d_iris(tmpdir,_id,features,target)
- plot_tsne(tmpdir,_id,features,target)
+ plot_tsne_2d(tmpdir,_id,features,target)
if type(model).__name__ == 'Pipeline':
step_names = [step[0] for step in model.steps]
@@ -1082,10 +1086,27 @@ def plot_imp_score(tmpdir, _id, coefs, feature_names, imp_score_type):
return top_features, indices
def plot_learning_curve(tmpdir,_id,model,features,target,cv,return_times=True):
+ """Make learning curve.
+
+ Parameters
+ ----------
+ tmpdir: string
+ Temporary directory for saving experiment results
+ _id: string
+ Experiment ID in Aliro
+ model: user specified model
+ features: np.darray/pd.DataFrame
+ Features in training dataset
+ target: np.darray/pd.DataFrame
+ Target in training dataset
+ cv: int, cross-validation generator or an iterable
- from sklearn.model_selection import learning_curve
- from matplotlib import pyplot as plt
- import numpy as np
+ Returns
+ -------
+ None
+ """
+
+
features = np.array(features)
@@ -1094,7 +1115,6 @@ def plot_learning_curve(tmpdir,_id,model,features,target,cv,return_times=True):
target[target == -1] = 0
-
train_sizes, train_scores, test_scores, fit_times, _ = learning_curve(model,features,target,None, np.linspace(0.1, 1.0, 5), cv,return_times=True)
plt.xlabel("Training examples")
@@ -1108,9 +1128,6 @@ def plot_learning_curve(tmpdir,_id,model,features,target,cv,return_times=True):
plt.grid()
- # print('train_scores_mean',train_scores_mean)
- # print('test_scores_mean',test_scores_mean)
- # print('train_sizes',train_sizes)
plt.fill_between(train_sizes, train_scores_mean - train_scores_std,
train_scores_mean + train_scores_std, alpha=0.1,
@@ -1126,16 +1143,12 @@ def plot_learning_curve(tmpdir,_id,model,features,target,cv,return_times=True):
plt.title('Learning curve')
plt.legend(loc='best')
- # plt.legend(loc="lower right")
plt.savefig(tmpdir + _id + '/learning_curve_' + _id + '.png')
plt.close()
- # train_scores_mean = np.mean(train_scores, axis=1)
- # train_scores_std = np.std(train_scores, axis=1)
- # test_scores_mean = np.mean(test_scores, axis=1)
- # test_scores_std = np.std(test_scores, axis=1)
+
if np.isnan(train_sizes.tolist()).all():
#replace nan with -1
@@ -1158,26 +1171,31 @@ def plot_learning_curve(tmpdir,_id,model,features,target,cv,return_times=True):
def plot_pca_2d(tmpdir,_id,features,target):
- # import numpy as np
- # import matplotlib.pyplot as plt
-
-
- # from sklearn import decomposition
- # import matplotlib.colors as mcolors
- # from matplotlib.patches import Patch
+ """Make PCA on 2D.
+ Parameters
+ ----------
+ tmpdir: string
+ Temporary directory for saving 2d pca plot and json file
+ _id: string
+ Experiment ID in Aliro
+
+ features: np.darray/pd.DataFrame
+ Features in training dataset
+ target: np.darray/pd.DataFrame
+ Target in training dataset
- # from sklearn import datasets
-
- # np.random.seed(5)
-
- # iris = datasets.load_iris()
- # print(features)
+ Returns
+ -------
+ None
+ """
X = np.array(features)
y = np.array(target)
print(set(y))
+
+
@@ -1188,18 +1206,8 @@ def plot_pca_2d(tmpdir,_id,features,target):
pca.fit(X)
X = pca.transform(X)
- # plt.scatter(x,y, c = z, cmap = mcolors.ListedColormap(["black", "green"]))
-
- # plt.show()
-
-
- # version 1
- # colors = np.array(["black", "green"])
- # plt.scatter(X[:, 0], X[:, 1], c=y, cmap=plt.cm.Set1, edgecolor='k')
-
- # version 2
num_classes = len(set(y))
# generate the number of colors equal to the number of classes
colors = plt.cm.Set1(np.linspace(0, 1, num_classes))
@@ -1207,40 +1215,14 @@ def plot_pca_2d(tmpdir,_id,features,target):
plt.scatter(X[:, 0], X[:, 1], c=y, cmap=mcolors.ListedColormap(colors))
# plot the legend where the colors are mapped to the classes
plt.legend(handles=[Patch(color=colors[i], label="class_"+str(i)) for i in range(num_classes)])
-
- # cb = plt.colorbar()
- # loc = np.arange(0,max(label),max(label)/float(len(colors)))
- # cb.set_ticks(loc)
- # cb.set_ticklabels(colors)
-
-
-
# write x axis as pc1 and y axis as pc2
plt.xlabel('PC1')
plt.ylabel('PC2')
-
-
-
- # print("X")
- # print(X)
-
-
- # ax.w_xaxis.set_ticklabels([])
- # ax.w_yaxis.set_ticklabels([])
- # ax.w_zaxis.set_ticklabels([])
-
- # plt.show()
plt.savefig(tmpdir + _id + '/pca_' + _id + '.png')
- plt.close()
-
-
-
- path = tmpdir + _id + '/pcaJson_' + _id + '.json'
- import json
-
+ plt.close()
# save X and y to json file
@@ -1249,17 +1231,11 @@ def plot_pca_2d(tmpdir,_id,features,target):
'y_pca': y.tolist()
}
- # with open(tmpdir + _id + '/p-c-a-Json_' + _id + '.json', 'w') as f:
- # json.dump(pca_dict, f)
-
- # with open(tmpdir + _id + '/aaachoi_' + _id + '.json', 'w') as f:
- # json.dump(pca_dict, f)
+ # save json file
save_json_fmt(outdir=tmpdir, _id=_id,
fname="pca-json.json", content=pca_dict)
- #
- # save pca_dict to json file with the path
def plot_pca_3d(tmpdir,_id,features,target):
@@ -1440,48 +1416,41 @@ def plot_pca_3d_iris(tmpdir,_id,features,target):
plt.savefig(tmpdir + _id + '/pca_' + _id + '.png')
plt.close()
-def plot_tsne(tmpdir,_id,features,target):
+def plot_tsne_2d(tmpdir,_id,features,target):
- # import numpy as np
- # import matplotlib.pyplot as plt
- # from sklearn.manifold import TSNE
-
- # X = np.array([[1, 1], [2, 1], [1, 0],
- # [4, 7], [3, 5], [3, 6]])
- # y = np.array([0, 0, 0, 1, 1, 1])
+ """Make tsne on 2D.
- # tsne = TSNE(n_components=2, random_state=0)
- # X_2d = tsne.fit_transform(X)
+ Parameters
+ ----------
+ tmpdir: string
+ Temporary directory for saving 2d t-sne plot and json file
+ _id: string
+ Experiment ID in Aliro
+
+ features: np.darray/pd.DataFrame
+ Features in training dataset
+ target: np.darray/pd.DataFrame
+ Target in training dataset
- # plt.scatter(X_2d[:, 0], X_2d[:, 1])
- # plt.show()
-
+ Returns
+ -------
+ None
+ """
- # X = np.array([[1, 1], [2, 1], [1, 0],
- # [4, 7], [3, 5], [3, 6]])
- # y = np.array([0, 0, 0, 1, 1, 1])
- X = features
- y = target
- # print(X)
- # print(y)
tsne = TSNE(n_components=2, verbose=1, random_state=123)
- X_2d = tsne.fit_transform(X)
+ X_2d = tsne.fit_transform(features)
- # df = pd.DataFrame()
- # df["y"] = y
- # df["comp-1"] = X_2d[:,0]
- # df["comp-2"] = X_2d[:,1]
# version 2
- num_classes = len(set(y))
+ num_classes = len(set(target))
# generate the number of colors equal to the number of classes
colors = plt.cm.Set1(np.linspace(0, 1, num_classes))
- plt.scatter(X_2d[:,0], X_2d[:,1], c=y, cmap=mcolors.ListedColormap(colors))
+ plt.scatter(X_2d[:,0], X_2d[:,1], c=target, cmap=mcolors.ListedColormap(colors))
# plot the legend where the colors are mapped to the classes
plt.legend(handles=[Patch(color=colors[i], label="class_"+str(i)) for i in range(num_classes)])
@@ -1499,32 +1468,16 @@ def plot_tsne(tmpdir,_id,features,target):
-
- # path = tmpdir + _id + '/tsneJson_' + _id + '.json'
- import json
-
-
-
# save X and y to json file
tsne_dict = {
'X_tsne': X_2d.tolist(),
- 'y_tsne': y.tolist()
+ 'y_tsne': target.tolist()
}
- # print('tsne_dict',tsne_dict)
-
- # with open(tmpdir + _id + '/t-sne-Json_' + _id + '.json', 'w') as f:
- # json.dump(tsne_dict, f)
- # with open(tmpdir + _id + '/wwwchoi_' + _id + '.json', 'w') as f:
- # json.dump(tsne_dict, f)
save_json_fmt(outdir=tmpdir, _id=_id,
fname="tsne-json.json", content=tsne_dict)
-
- # save_json_fmt(outdir=tmpdir, _id=_id,
- # fname="value.json", content=metrics_dict)
-
-
+
diff --git a/raspberrypi/productpage/css/style.css b/raspberrypi/productpage/css/style.css
index 4e14d3a5d..9ba9e1476 100644
--- a/raspberrypi/productpage/css/style.css
+++ b/raspberrypi/productpage/css/style.css
@@ -480,7 +480,7 @@ to { opacity: 0; }
}
-a#Downloadpage{
+a#Downloadpage, a#installationpage{
color:#e3085d!important;
/* visibility: hidden; */
diff --git a/raspberrypi/productpage/data/datasets/pmlb_small/iris/README.md b/raspberrypi/productpage/data/datasets/pmlb_small/iris/README.md
new file mode 100644
index 000000000..f5d38c539
--- /dev/null
+++ b/raspberrypi/productpage/data/datasets/pmlb_small/iris/README.md
@@ -0,0 +1,30 @@
+# iris
+
+## Summary Stats
+
+#instances: 150
+
+#features: 4
+
+ #binary_features: 0
+
+ #integer_features: 0
+
+ #float_features: 4
+
+Endpoint type: integer
+
+#Classes: 3
+
+Imbalance metric: 0.0
+
+## Feature Types
+
+ sepal-length:continous
+
+sepal-width:continous
+
+petal-length:continous
+
+petal-width:continous
+
diff --git a/raspberrypi/productpage/index.html b/raspberrypi/productpage/index.html
index f50495575..4338730be 100644
--- a/raspberrypi/productpage/index.html
+++ b/raspberrypi/productpage/index.html
@@ -74,7 +74,7 @@
Contact
-
+
-->
-
-
+
@@ -182,7 +182,7 @@
Heading
-
+
Loading Aliro Ed...
Sorry, your browser does not support inline SVG.
@@ -201,16 +201,16 @@
Heading
-
+
-
Aliro Ed
+
What is Aliro Ed?
Aliro Ed is a software for users who are not familiar with machine learning. Users can experience machine learning tasks on Raspberry Pi 4 with Aliro Ed.
Users can download the raspberry pi image from the Aliro Ed website.
Users can easily install and run Aliro Ed on Raspberry Pi 4 using this image.
- Aliro Ed and the Raspberry Pi image provided in this website, are developed by the AI Research Center at the Computational Biomedicine Department Cedars-Sinai Medical Center, Los Angeles, CA, USA. Please click following button to download Aliro Ed.
+ Aliro Ed and the Raspberry Pi image provided in this website, are developed by the AI Research Center at the Computational Biomedicine Department Cedars-Sinai Medical Center, Los Angeles, CA, USA. Please click the following button for more information.
@@ -219,12 +219,20 @@
Aliro Ed
-
-
-
-
-
-
+
+
Visaul explanation of Decision Tree
+
+
+ If you are interested in getting intuitions about machine learning, please click the below button in the card to see the visual explanation of decision tree.
+
+
+
+
+
+
-
+
+
-->
-
-
Visaul explanation of Decision Tree
-
-
- When Raspberry Pi is ready to run Aliro Ed, The below button shows "Alio is ready to run". Please click the button to run Aliro On Raspberry Pi 4
-
- Loading Aliro Ed ...
-
-
+
@@ -361,7 +361,7 @@
Aliro Ed_3
-
+
@@ -378,7 +378,8 @@
Aliro Ed_3
// d3.select('#temp').style('color', 'black');
// console.log(pingURL())
- pingURL();
+ // pingURL();
+ // // pingURL_DOWNLOAD()
diff --git a/raspberrypi/productpage/index_temp.html b/raspberrypi/productpage/index_temp.html
new file mode 100644
index 000000000..f50495575
--- /dev/null
+++ b/raspberrypi/productpage/index_temp.html
@@ -0,0 +1,393 @@
+
+
+
+
+
+
+
+
+
+
Aliro Ed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading Aliro Ed...
+ Sorry, your browser does not support inline SVG.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Aliro Ed
+
+
Aliro Ed is a software for users who are not familiar with machine learning. Users can experience machine learning tasks on Raspberry Pi 4 with Aliro Ed.
+ Users can download the raspberry pi image from the Aliro Ed website.
+ Users can easily install and run Aliro Ed on Raspberry Pi 4 using this image.
+ Aliro Ed and the Raspberry Pi image provided in this website, are developed by the AI Research Center at the Computational Biomedicine Department Cedars-Sinai Medical Center, Los Angeles, CA, USA. Please click following button to download Aliro Ed.
+
+
+
+ More Information
+
+
+
+
+
+
+
+
+
+
+
Are you ready to run Aliro?
+
+
+ When Raspberry Pi is ready to run Aliro Ed, the below button shows "Alio is ready to run". Please click the button to run Aliro On Raspberry Pi 4
+
+ Loading Aliro Ed ...
+
+
+
+
+
+
+
Visaul explanation of Decision Tree
+
+
+ When Raspberry Pi is ready to run Aliro Ed, The below button shows "Alio is ready to run". Please click the button to run Aliro On Raspberry Pi 4
+
+ Loading Aliro Ed ...
+
+
+
+
+
+
+
+
❮
+
❯
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
This card explains some intuition using scatterplot.
+
+
+
+
+
+
+
+
+
+
+
This card explains boundaries to distinguish class.
+
+
+
+
+
+
+
+
+
This card explains how decision tree works.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/raspberrypi/productpage/infAndDownloadpage.html b/raspberrypi/productpage/infAndDownloadpage.html
index b57151ca7..b7d98dcc6 100644
--- a/raspberrypi/productpage/infAndDownloadpage.html
+++ b/raspberrypi/productpage/infAndDownloadpage.html
@@ -92,7 +92,7 @@
Contact
Download
-
+ Installation
diff --git a/raspberrypi/productpage/installation.html b/raspberrypi/productpage/installation.html
new file mode 100644
index 000000000..4dba25ce9
--- /dev/null
+++ b/raspberrypi/productpage/installation.html
@@ -0,0 +1,760 @@
+
+
+
+
+
+
+
+
+
+ Aliro Ed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading Aliro Ed...
+ Sorry, your browser does not support inline SVG.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Installation
+
+
+
+
+
+
Aliro is a multi-container docker project that uses (Docker-compose) .
+
+
+
+
+
+
+
Aliro Ed (Aliro on the Raspberry Pi 400)
+
+
We have built a custom Raspberry Pi OS Image containing Aliro (configured to be up and running as soon as you boot up the Operating System.).
+
+
+
+
Requirements
+
+
+
+ Raspberry Pi 400
+
+
+
+ A computer running Windows 10 or higher
+ A Card Reader
+
+
+ If your computer does not have an integrated card reader, you will need a USB card reader.
+
+
+ MicroSD Card
+
+ Minimum capacity: 32GB
+
+ Note: There are different speed classes for MicroSD Cards, Application Performance Class 1 (A1) and Application Performance 2 (A2). A2 cards are highly recommended as these are much faster than A1 cards.
+
+
+ A copy of the aliro-imager.exe
+
+
+
+
+
+
Installation Steps
+
+ Insert the MicroSD Card in your card reader.
+ Double-click the aliro-imager.exe on your computer. If prompted to allow the application to run, select Yes . You may need to enter your computer's Administrator password to continue.
+
+ Follow the prompts to proceed with the installation.
+
+
+
+ Once installed, you can run the Aliro Ed Imager from the Start Menu.
+
+ Click the CHOOSE STORAGE button and select your MicroSD Card from the popup menu.
+
+
+ Click the WRITE button to begin writing the Operatying System to your MicroSD Card.
+
+
+ Note that this will format your MicroSD Card and all existing data will be erased. Click Yes at the prompt to proceed.
+
+
+
+
+ This writing process may take several minutes, the progress will be shown on the Aliro Ed Imager.
+
+
+
+
+ Insert the MicroSD Card into your Raspberry Pi 400 and start it up.
+ When the Operating System has finished starting up, double-click the Aliro-Ed Icon on the Destop or launch the Web Browser.
+
+
+
+
+
+
+
+
+
+
Now that Aliro is up and running, you are ready to run experiments, Aliro Ed comes preloaded with the following datasets:
+
+
+
+
+
+
+
+
+
+
+
Using Aliro
+
+
Adding Datasets
+
+
One can add new datasets using a UI form within the website or manually add new datasets to the data directory. Datasets have the following restrictions:
+
+ Datasets must have the extension .csv or .tsv
+ Datasets cannot have any null or empty values
+ Dataset features must be either numeric, categorical, or ordinal.
+ Only the label column or categorical or ordinal features can contain string values.
+ Files must be smaller then 8mb
+
+
Some example datasets can be found in the classification section of the Penn Machine Learning Benchmarks github repository.
+
+
+
+
+
+
+
+
Uploading Using the Website
+
+
To upload new datasets from the website, click the "Add new Datasets" button on the Datasets page to navigate to the upload form. Select a file using the form's file browser and enter the corresponding information about the dataset: the name of the dependent column, a JSON of key/value pairs of ordinal features, for example {"ord" : ["first", "second", "third"]} , and a comma separated list of categorical column names without quotes, such as cat1, cat2 . Once uploaded, the dataset should be available to use within the system.
+
+
+
+
+
Analyzing Data
+
+ To run a classification machine learning experiment, from the click 'Build New Experiment', choose the desired algorithm and experiment parameters and click 'Launch Experiment'. To start the AI, from the Datasets page click the AI toggle. The AI will start issuing experiments according to the parameters in config/ai.config . This file can be modified to change the recommendation engine being used and how may recommendations the AI will give. By default, the AI will make 10 recommendations.
+
+
+
+
+ From the Datasets page, click 'completed experiments' to navigate to the Experiments page for that dataset filtered for the completed experiments. If an experiment completed successfully, use the 'Actions' dropdown to download the fitted model for that experiment and a python script that can be used to run the model on other datasets. Click elsewhere on the row to navigate to the experiment Results page.
+
+
+
+
Downloading and Using Models
+
+
+ A pickled version of the fitted model and an example script for using that model can be downloded for any completed experiment from the Experiments page.
+
+
+
+
+ Please see the jupiter notebook script demo for instructions on using the scripts and model exported from Aliro to reproduce the findings on the results page and classify new datasets.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Using various kinds of features together
+
In this data set, we have two different features petal-length on X axis and sepal-length on Y axis.
+
+
Using various kinds of features together allows for more nuance.
+
So visualizing petal-length and sepal-length in a scatterplot helps us distinguish three different species of iris flowers.
+
+
+ The dataset suggests that, among the three species, the Iris-setosa has the smallest petal-length and sepal-length,
+ the Iris-versicolor has the medium petal-length and sepal-length,
+ and the Iris-virginica has the largest petal-length and sepal-length.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Drawing boundaries
+
You can visualize your petal-length and sepal-length observations as the boundaries of regions in your scatterplot.
+ Dots plotted in the three regions would be in the three species of iris flowers, respectively.
+
Identifying boundaries in data using math is the essence of statistical learning.
+
The boundaries are called decision boundaries .
+
Visualizing decision boundaries in two dimensions and three dimensions could give us a better understanding of the given data set.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
This card explains some intuition using scatterplot.
+
+
+
+
+
+
+
+
+
+
+
This card explains boundaries to distinguish class.
+
+
+
+
+
+
+
+
+
This card explains how decision tree works. .
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/raspberrypi/productpage/int_ml_01.html b/raspberrypi/productpage/int_ml_01.html
index 2af5ca1ad..b213b5b9c 100644
--- a/raspberrypi/productpage/int_ml_01.html
+++ b/raspberrypi/productpage/int_ml_01.html
@@ -92,7 +92,7 @@ Contact
Download
-
+ Installation
diff --git a/raspberrypi/productpage/int_ml_02.html b/raspberrypi/productpage/int_ml_02.html
index 076c711c1..c5fb2361e 100644
--- a/raspberrypi/productpage/int_ml_02.html
+++ b/raspberrypi/productpage/int_ml_02.html
@@ -90,7 +90,7 @@ Contact
Download
-
+ Installation
diff --git a/raspberrypi/productpage/int_ml_03_decision_tree.html b/raspberrypi/productpage/int_ml_03_decision_tree.html
index 1eb35ecb8..b198b8153 100644
--- a/raspberrypi/productpage/int_ml_03_decision_tree.html
+++ b/raspberrypi/productpage/int_ml_03_decision_tree.html
@@ -133,7 +133,7 @@ Contact
Download
-
+ Installation
diff --git a/raspberrypi/productpage/other_Versions/productpage_version_0/infAndDownloadpage.html b/raspberrypi/productpage/other_Versions/productpage_version_0/infAndDownloadpage.html
index b49567723..8065f0de4 100644
--- a/raspberrypi/productpage/other_Versions/productpage_version_0/infAndDownloadpage.html
+++ b/raspberrypi/productpage/other_Versions/productpage_version_0/infAndDownloadpage.html
@@ -314,7 +314,7 @@ News
- 2022-12-09- Aliro-imager-1.0.exe is released.
+ 2022-##-##- Aliro-imager-1.0.exe is released.
diff --git a/raspberrypi/productpage/storage/aliro-imager-1.0.exe b/raspberrypi/productpage/storage/aliro-imager-1.0.exe
deleted file mode 100644
index e5c148c84..000000000
--- a/raspberrypi/productpage/storage/aliro-imager-1.0.exe
+++ /dev/null
@@ -1,257 +0,0 @@
-{
- "name": "petal length (cm) > 2.45000004768",
- "pred": "100 of no, 50 of yes",
- "children": [
- {
- "children": [
- {
- "children": [
- {
-
- "name": "The number of data = 2",
- "children": [
-
-
-
- {
-
- "name": "0 = setosa",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 0,
- "pred": "0 of no, 0 of yes"
- },
- {
-
- "name": "0 = versicolor",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 0,
- "pred": "0 of no, 0 of yes"
- }
- ,
- {
-
- "name": "43 = virginica",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 43,
- "pred": "43 of no, 0 of yes"
- }
-
- ],
- "side": "right",
- "type": "categorical",
- "size": 43,
- "pred": "0 of no, 0 of yes"
- },
- {
-
- "name": "The number of data = 3",
- "children": [
-
-
- {
-
- "name": "0 = setosa",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 0,
- "pred": "0 of no, 0 of yes"
- },
- {
-
- "name": "1 = versicolor",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 1,
- "pred": "1 of no, 0 of yes"
- }
- ,
- {
-
- "name": "2 = virginica",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 2,
- "pred": "2 of no, 0 of yes"
- }
-
-
-
-
- ],
- "side": "right",
- "type": "categorical",
- "size": 3,
- "pred": "0 of no, 0 of yes"
- }
-
- ],
- "name": "petal length (cm) > 4.85000038147",
- "side": "right",
- "type": "categorical",
- "size": 25,
- "pred": "22 of no, 3 of yes"
- },
- {
-
- "name": "petal length (cm) > 4.94999980927",
- "children": [
-
- {
-
- "name": "The number of data = 6",
- "children": [
-
-
-
- {
-
- "name": "0 = setosa",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 0,
- "pred": "0 of no, 0 of yes"
- },
- {
-
- "name": "2 = versicolor",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 2,
- "pred": "2 of no, 0 of yes"
- }
- ,
- {
-
- "name": "4 = virginica",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 4,
- "pred": "4 of no, 0 of yes"
- }
-
- ],
- "side": "right",
- "type": "categorical",
- "size": 6,
- "pred": "0 of no, 0 of yes"
- },
-
- {
-
- "name": "The number of data = 48",
- "children": [
-
-
- {
-
- "name": "0 = setosa",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 0,
- "pred": "0 of no, 0 of yes"
- },
- {
-
- "name": "47 = versicolor",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 47,
- "pred": "47 of no, 0 of yes"
- }
- ,
- {
-
- "name": "1 = virginica",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 1,
- "pred": "1 of no, 0 of yes"
- }
-
-
-
-
- ],
- "side": "right",
- "type": "categorical",
- "size": 48,
- "pred": "0 of no, 0 of yes"
- }
-
-
-
- ],
- "side": "left",
- "type": "categorical",
- "size": 25,
- "pred": "4 of no, 21 of yes"
- }
- ],
- "name": "petal width (cm) > 1.75",
- "side": "right",
- "type": "numerical",
- "size": 50,
- "pred": "46 of no, 54 of yes"
- },{
- "name": "The number of data = 50",
- "children": [
-
-
-
- {
-
- "name": "50 = setosa",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 50,
- "pred": "50 of no, 0 of yes"
- },
- {
-
- "name": "0 = versicolor",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 0,
- "pred": "0 of no, 0 of yes"
- }
- ,
- {
-
- "name": "0 = virginica",
- "children": [],
- "side": "right",
- "type": "categorical",
- "size": 0,
- "pred": "0 of no, 0 of yes"
- }
-
- ],
- "side": "right",
- "type": "categorical",
- "size": 30,
- "pred": "0 of no, 0 of yes"
- }
- ],
- "side": "right",
- "size": 80
-}
-
-
-
diff --git a/raspberrypi/productpage/test.js b/raspberrypi/productpage/test.js
new file mode 100644
index 000000000..0c077dda3
--- /dev/null
+++ b/raspberrypi/productpage/test.js
@@ -0,0 +1,763 @@
+function decisiontree() {
+
+ d3=d3v3
+
+
+ var label_names;
+
+ var TOTAL_SIZE;
+ // default_colors = [
+ // "#c25975", "#d26bff", "#2d5a47", "#093868", "#fcdfe6", "#94a2fa", "#faec94", "#decaee", "#daeeca", "#b54c0a", "#dc1818", "#18dcdc", "#000000", "#340000", "#86194c", "#fef65b", "#ff9b6f", "#491b47", "#171717", "#e8efec", "#1c6047", "#a2bae0", "#4978c3", "#f8fee0", "#dcfb66", "#91fb66", "#29663b", "#b4b7be", "#0088b2", "#88b200", "#c43210", "#f06848", "#f0bc48", "#d293a2", "#cccccc", "#59596a", "#fafae6", "#ffc125", "#ff4e50", "#f0e6fa", "#f6c1c3", "#363636"
+ // ]
+
+
+
+ default_colors = [
+ "#74BFA1", "#E37852", "#2d5a47", "#093868", "#fcdfe6", "#94a2fa", "#faec94", "#decaee", "#daeeca", "#b54c0a", "#dc1818", "#18dcdc", "#000000", "#340000", "#86194c", "#fef65b", "#ff9b6f", "#491b47", "#171717", "#e8efec", "#1c6047", "#a2bae0", "#4978c3", "#f8fee0", "#dcfb66", "#91fb66", "#29663b", "#b4b7be", "#0088b2", "#88b200", "#c43210", "#f06848", "#f0bc48", "#d293a2", "#cccccc", "#59596a", "#fafae6", "#ffc125", "#ff4e50", "#f0e6fa", "#f6c1c3", "#363636"
+ ]
+
+
+
+ // default_colors = [
+ // "#18dcdc", "#d26bff", "#2d5a47", "#093868", "#fcdfe6", "#94a2fa", "#faec94", "#decaee", "#daeeca", "#b54c0a", "#dc1818", "#c25975", "#000000", "#340000", "#86194c", "#fef65b", "#ff9b6f", "#491b47", "#171717", "#e8efec", "#1c6047", "#a2bae0", "#4978c3", "#f8fee0", "#dcfb66", "#91fb66", "#29663b", "#b4b7be", "#0088b2", "#88b200", "#c43210", "#f06848", "#f0bc48", "#d293a2", "#cccccc", "#59596a", "#fafae6", "#ffc125", "#ff4e50", "#f0e6fa", "#f6c1c3", "#363636"
+ // ]
+
+ // differnt combination of colors
+ // default_colors =
+
+
+
+
+ //************************************* Options******************************************************//
+
+ // var file_name = "structureC1.json" // generator_1
+ // var file_namev2 = "structureC2_origin.json" // generator_2
+
+ var file_name = "structure_iris_dc_1.json" // generator_1
+ var file_namev2 = "structure_iris_dc_1.json" // generator_2
+
+ // var file_name = "structure_iris_dc_1_80_size.json" // generator_1
+ // var file_namev2 = "structure_iris_dc_1_80_size.json" // generator_2
+
+ // var file_name = "structure.json" // generator_1
+ // var file_namev2 = "structure.json" // generator_2
+ var version2 = true // if true json from generator_2 will be used
+
+
+ var tree_branch = false // if the thickness of the branches depend on the value of targt + color * /
+ var tree_branch_parent = true // true: thickness from the root if not the direct parent
+ // var tree_branch_color = "black"
+
+ var tree_branch_color = "#A3A6A8"
+ var strokeness = 120 // the degree of separation between the nodes
+ var default_strokeness = 50
+ var hover_percent_parent = false // if the display percentage depends on the direct parent or the root
+ var square = false
+ var rect_percent = true //display the percentage or the value in the small rectangles of the labels
+ var value_percent_top = true /// if we display the value and the percentage above the rectangle /
+
+ var dict_leaf_y = { 1: 0, 2: -17.5, 3: -35, 4: -52.5, 5: -70, 6: -87.5, 6: -105, 7: -122.5, 8: -140, 9: -157.5, 10: -175 }
+
+
+ /****************************************************************************************************** */
+
+
+
+
+ getDepth = function (obj) {
+ var depth = 0;
+ if (obj.children) {
+ obj.children.forEach(function (d) {
+ var tmpDepth = getDepth(d)
+ if (tmpDepth > depth) {
+ depth = tmpDepth
+ }
+ })
+ }
+ return 1 + depth
+ }
+
+
+ // var margin = { top: 20, right: 120, bottom: 20, left: 180 },
+ // width = 2000 + 960 - margin.right - margin.left,
+ // height = 800 - margin.top - margin.bottom;
+
+ // current
+ // var margin = { top: 30, right: 30, bottom: 30, left: 0 },
+ // width = 500 - margin.left - margin.right,
+ // height = 350 * 600 / 500 - margin.top - margin.bottom;
+
+
+ var margin = { top: 30, right: 30, bottom: 30, left: 0 },
+ width = 700 - margin.left - margin.right,
+ height = 350 * 600 / 500 - margin.top - margin.bottom;
+
+ var i = 0,
+ duration = 550,
+ root;
+
+ var tree
+ var diagonal
+ var svg
+
+ var filetochoose = version2 ? file_namev2 : file_name
+
+ d3.json(filetochoose, function (error, flare) {
+ if (error) throw error;
+
+ console.log(getDepth(flare))
+
+
+ tree = d3.layout.tree()
+ .separation(function (a, b) { return ((a.parent == root) && (b.parent == root)) ? strokeness : strokeness; })
+ .size([height, getDepth(flare) * width / 8]);
+
+ diagonal = d3.svg.diagonal()
+ .projection(function (d) { return [d.y, d.x]; });
+
+ // svg = d3.select("body").append("svg")
+ // .attr("width", getDepth(flare) * width / 8 + margin.right + margin.left)
+ // .attr("height", height + margin.top + margin.bottom)
+ // .append("g")
+ // .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+
+
+
+ svg = d3.select("#dataviz_area_div")
+ .append("svg")
+ .attr("id", "dataviz_area_div_svg")
+ .attr("width", width + margin.left + margin.right)
+ .attr("height", height + margin.top + margin.bottom)
+ // .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
+ // .attr("viewBox", `-25 -15 400 250`)
+ // .attr("viewBox", `-30 -30 500 400`)
+ // current
+ // .attr("viewBox", `-90 -30 500 400`)
+ // .attr("viewBox", `-90 -30 600 800`)
+ // .attr("viewBox", `-90 -30 600 500`)
+ .attr("viewBox", `30 -80 600 600`)
+
+
+
+ TOTAL_SIZE = flare.size
+ l = flare.pred.replace(/of/g, "").split(', ')
+ for (var j = 0; j < l.length; j++) {
+ l[j] = l[j].split(' ')[2]
+ }
+ label_names = l
+
+
+ root = flare;
+ root.x0 = height / 2;
+ root.y0 = 0;
+
+ function collapse(d) {
+ if (d.children) {
+ d._children = d.children;
+ d._children.forEach(collapse);
+ d.children = null;
+ }
+ }
+
+ root.children.forEach(collapse);
+ update(root, l.length);
+ // createLabels(l);
+ });
+
+ d3.select(self.frameElement).style("height", "480px");
+
+ function update(source, n_labels) {
+
+
+ // Compute the new tree layout.
+ var nodes = tree.nodes(root).reverse(),
+ links = tree.links(nodes);
+ tpaths = tree.links(nodes);
+
+ // Normalize for fixed-depth.
+ nodes.forEach(function (d) { d.y = d.depth * 180; });
+
+ // Update the nodes…
+ var node = svg.selectAll("g.node")
+ .data(nodes, function (d) { return d.id || (d.id = ++i); });
+
+ // Enter any new nodes at the parent's previous position.
+ var nodeEnter = node.enter().append("g")
+ .attr("class", "node")
+ .attr("transform", function (d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
+ .on("click", click);
+
+ nodeEnter.append("circle")
+ .attr("r", 1e-6)
+ .style("fill", function (d) {
+
+ return d._children ? "lightsteelblue" : "#fff";
+ });
+
+ // nodeEnter.append("text")
+ // .attr("x", function(d) { return (d.children || d._children) || version2 ? -10 : 10; })
+ // .attr("dy", ".35em")
+ // .attr("text-anchor", function(d) { return (d.children || d._children) || version2 ? "end" : "start"; })
+ // .text(function(d) { return d.pred ? d.name+' '+d.pred : d.name; })
+ // .style("fill-opacity", 1e-6);
+
+ function getTextWidth(text, fontSize, fontFace) {
+ var a = document.createElement('canvas');
+ var b = a.getContext('2d');
+ b.font = fontSize + 'px ' + fontFace;
+ return b.measureText(text).width;
+ }
+
+
+
+ var rect = nodeEnter.append("rect")
+ .attr("width", 133 + 8)
+ .attr("height", 70)
+ .attr("x", -80)
+ .attr("y", -80)
+ .attr("rx", 6)
+ .attr("ry", 6)
+ .style("fill", function (d) { return (d.children || d._children) || version2 ? "#f0f0f0" : "#ffffff" })
+ .style("stroke", function (d) { return (d.children || d._children) || version2 ? "rgb(155, 155, 155)" : "#ffffff" })
+ .style("visibility", function (d) { return (d.children || d._children) || version2 ? "visible" : "hidden" })
+
+ nodeEnter.append("svg:image")
+ .attr("xlink:href", function (d) { return ((d.children || d._children) || version2) && d.type == 'categorical' ? 'http://fractalytics.io/wp-content/uploads/2019/05/cat.png' : 'http://fractalytics.io/wp-content/uploads/2019/05/num.png' })
+ .attr("x", "-76")
+ .attr("y", "-74")
+ .attr("width", "20")
+ .attr("height", "20")
+ .style("visibility", function (d) {
+ if (d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)) {
+ return d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1] == 'Root ' ? 'hidden' : 'visible'
+ }
+ else return (d.children || d._children) || version2 ? "visible" : "hidden"
+ });
+
+ nodeEnter.append("text")
+ .attr("x", function (d) {
+ ttr = 13
+ if (default_colors.length > 5) {
+ ttr = (40 * default_colors.length) / 2
+ }
+ return (d.children || d._children) || version2 ? -75 - ((getTextWidth(d.size + " / " + (d.size * 100 / TOTAL_SIZE).toFixed(0) + "%", 10, 'Verdana') + 5.7) - (133 + 8)) / 2 : ttr
+ })
+ .attr("y", function (d) {
+ ttr = dict_leaf_y[label_names.length] - 15
+ if (default_colors.length > 5) {
+ ttr = -20
+ }
+ return (d.children || d._children) || version2 ? -87 : ttr;
+
+ })
+ .attr("dy", ".35em")
+ .attr("text-anchor", "start")
+ .style("font-size", "10px")
+ .style("font-family", "Verdana")
+ .style("stroke", "#c2c2c2")
+ .style("stroke-width", "0.05em")
+ .text(function (d) { return true ? d.size + " / " + (d.size * 100 / TOTAL_SIZE).toFixed(0) + "%" : ""; })
+ .attr('visibility', function () {
+ return value_percent_top ? 'visible' : 'hidden'
+ })
+
+
+
+
+ nodeEnter.append("text")
+ .attr("x", function (d) {
+ if (((d.children || d._children) || version2) && d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1].length <= 11) {
+ return (d.children || d._children) || version2 ? -75 - ((getTextWidth(d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1], 14, 'Verdana') + 5.7) - (133 + 8)) / 2 : 0
+ }
+ else return (d.children || d._children) || version2 ? -75 - ((getTextWidth(d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1].substring(0, 11), 14, 'Verdana') + 5.7) - (133 + 8)) / 2 : 0
+ })
+ .attr("y", function (d) {
+ if (!d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)) return -65
+ else return d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1] == 'Root ' ? -55 : -65
+ })
+ .attr("dy", ".35em")
+ .attr("text-anchor", "start")
+ .style("font-size", "14px")
+ .style("font-family", "Verdana")
+ .style("stroke", "black")
+ .style("stroke-width", "0.05em")
+
+ .text(function (d) {
+ if ((d.children || d._children) || version2) {
+ return d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1].length <= 15 ? d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1] : (d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1]).substring(0, 13) + '..'
+
+ }
+ else return "";
+ })
+ .append('svg:title')
+ .text(function (d) {
+ return (d.children || d._children) || version2 ? d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1] : ""
+ })
+
+
+
+
+ nodeEnter.append("text")
+ .attr("x", function (d) { return (d.children || d._children) || version2 ? -75 - ((getTextWidth(d.name.replace(d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1], '').replace('=', ''), 14, 'Verdana') + 5.7) - (133 + 8)) / 2 : 0 })
+ .attr("y", -45)
+ .attr("dy", ".35em")
+ .attr("text-anchor", "start")
+ .style("font-size", "12px")
+ .style("font-family", "Verdana")
+ .style("stroke", "black")
+ .style("stroke-width", "0.04em")
+ .text(function (d) {
+
+ var toreturn = (d.children || d._children) || version2 ? d.name.replace(d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1], '').replace('!=', 'not').replace(/=|\!=/g, '').replace('<', '<=') : "";
+ if (!d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)) return toreturn
+ return d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1] == 'Root ' ? '' : toreturn
+ })
+
+
+ var labels_w = 133 / n_labels
+ for (var j = 0; j < n_labels; j++) {
+ var curr = j
+
+
+
+ nodeEnter.append("rect")
+ .attr("width", function (d) {
+ var v;
+ if (d.pred) {
+ console.log(parseInt(d.pred.split(",")[curr].match(/\d+/)[0]), ' *133/', d.size)
+ v = parseInt(d.pred.split(",")[curr].match(/\d+/)[0]) * 133 / d.size;
+ }
+ else if (!d.children) {
+ v = 40
+ }
+
+ if (square) return (d.children || d._children) || version2 ? 133 / label_names.length - 4 : 40
+ else return (d.children || d._children) || version2 ? v : 40
+ })
+ .attr("height", 20)
+ .attr('rx', function (d) { return square ? 0 : 4 })
+ .attr('ry', function (d) { return square ? 0 : 4 })
+ .attr("x", function (d) {
+
+ var v;
+ var ttl = 0
+ if (curr > 0) {
+
+ for (var l = 0; l <= curr - 1; l++) {
+ if (d.pred) {
+ v = parseInt(d.pred.split(",")[l].match(/\d+/)[0]);
+ }
+ else if (!d.children) v = parseInt(d.name.split(",")[l].match(/\d+/)[0]);
+ ttl = ttl + v * 133 / d.size
+ }
+
+ } else {
+ ttl = 0
+ }
+
+ ttr = 13
+ if (default_colors.length > 5) {
+ ttr = 10 + j * 45
+ }
+
+
+ if (square) return (d.children || d._children) || version2 ? -76 + j * (133 / label_names.length) : ttr
+ else return (d.children || d._children) || version2 ? -76 + ttl : ttr
+ })
+ .attr("y", (function (d) {
+ console.log(default_colors.length)
+ if (default_colors.length > 5) {
+ return (d.children || d._children) || version2 ? -34 : -10
+ } else return (d.children || d._children) || version2 ? -34 : dict_leaf_y[label_names.length] - 4 + 20 * j + j * 4;
+ }))
+ .style("fill", function (d) {
+ if (default_colors.length == 0) {
+ return default_colors[j]
+ } else {
+ return default_colors[j]
+ }
+
+ }
+ )
+ .attr('visibility', function (d) {
+
+ if (d.pred) {
+ v = parseInt(d.pred.split(",")[curr].match(/\d+/)[0]);
+ }
+ else if (!d.children) v = parseInt(d.name.split(",")[curr].match(/\d+/)[0]);
+ v = v * 133 / d.size
+ return v != 0 || !d.children ? "visible" : "hidden"
+ })
+ .attr('opacity', function (d) {
+ var val
+ if (d.pred) {
+ // console.log(d.pred.split(",")[curr].match(/\d+/)[0])
+ val = (parseInt(d.pred.split(",")[curr].match(/\d+/)[0]) * 100 / d.size).toFixed(0)
+ }
+ else if (!d.children) val = (parseInt(d.name.split(",")[curr].match(/\d+/)[0]) * 100 / d.size).toFixed(0)
+ return (d.children || d._children) || version2 ? 1 : val / 100 + 0.3
+
+ })
+ .append("svg:title")
+ .text(function (d) {
+ if (d.pred) {
+ // console.log(d.pred.split(",")[curr].match(/\d+/)[0])
+ return !rect_percent ? d.pred.split(",")[curr].match(/\d+/)[0] : (parseInt(d.pred.split(",")[curr].match(/\d+/)[0]) * 100 / d.size).toFixed(0) + "%"
+ }
+ else if (!d.children) return !rect_percent ? d.name.split(",")[curr].match(/\d+/)[0] : (parseInt(d.name.split(",")[curr].match(/\d+/)[0]) * 100 / d.size).toFixed(0) + "%"
+
+ })
+
+
+
+
+
+ var subg = nodeEnter.append("g")
+ .attr("width", labels_w)
+ .attr("height", 20)
+ .attr("x", function (d) {
+ var v;
+ var ttl = 0
+ if (curr > 0) {
+
+ for (var l = 0; l <= curr - 1; l++) {
+ if (d.pred) {
+ v = parseInt(d.pred.split(",")[l].match(/\d+/)[0]);
+ }
+ else if (!d.children) v = parseInt(d.name.split(",")[l].match(/\d+/)[0]);
+ ttl = ttl + v * 133 / d.size
+ }
+
+ } else {
+ ttl = 0
+ }
+
+ return -80 + ttl
+
+ })
+ .attr("y", -30)
+
+
+ subg.append("text")
+ .text(function (d) {
+ if (d.pred) {
+ // console.log(d.pred.split(",")[curr].match(/\d+/)[0])
+ return !rect_percent ? d.pred.split(",")[curr].match(/\d+/)[0] : (parseInt(d.pred.split(",")[curr].match(/\d+/)[0]) * 100 / d.size).toFixed(0) + "%"
+ }
+ else if (!d.children) return !rect_percent ? d.name.split(",")[curr].match(/\d+/)[0] : (parseInt(d.name.split(",")[curr].match(/\d+/)[0]) * 100 / d.size).toFixed(0) + "%"
+
+ })
+ .attr("x", (function (d) {
+
+ var v;
+ var ttl = 0
+ if (curr > 0) {
+
+ for (var l = 0; l <= curr - 1; l++) {
+ if (d.pred) {
+ v = parseInt(d.pred.split(",")[l].match(/\d+/)[0]);
+ }
+ else if (!d.children) v = parseInt(d.name.split(",")[l].match(/\d+/)[0]);
+ ttl = ttl + v * 133 / d.size
+ }
+
+ } else {
+ ttl = 0
+ }
+
+ ttr = 18
+ if (default_colors.length > 5) {
+ ttr = 14 + j * 45
+ }
+
+ if (square) return (d.children || d._children) || version2 ? -71 + j * (133 / label_names.length) : ttr
+ else return (d.children || d._children) || version2 ? -71 + ttl : ttr
+ }))
+ .attr("y", (function (d) {
+ ttr = dict_leaf_y[label_names.length] + 10 + 20 * j + j * 4
+ if (default_colors.length > 5) {
+ ttr = 5
+ }
+
+ return (d.children || d._children) || version2 ? -19 : ttr;
+
+ }))
+ .style("fill", "white")
+ .style("font-size", "12px")
+ .attr('visibility', function (d) {
+ if (d.pred && !square) {
+ // console.log(d.pred.split(",")[curr].match(/\d+/)[0])
+ return (parseInt(d.pred.split(",")[curr].match(/\d+/)[0]) * 100 / d.size).toFixed(0) > 20 ? "vivible" : "hidden"
+ }
+ })
+ .append("svg:title")
+ .text(function (d) {
+ if (d.pred) {
+ // console.log(d.pred.split(",")[curr].match(/\d+/)[0])
+ return !rect_percent ? d.pred.split(",")[curr].match(/\d+/)[0] : (parseInt(d.pred.split(",")[curr].match(/\d+/)[0]) * 100 / d.size).toFixed(0) + "%"
+ }
+ else if (!d.children) return !rect_percent ? d.name.split(",")[curr].match(/\d+/)[0] : (parseInt(d.name.split(",")[curr].match(/\d+/)[0]) * 100 / d.size).toFixed(0) + "%"
+
+ })
+
+ subg.append('text')
+ .text(function (d) {
+ if (d.pred) {
+ return ''
+ }
+ else if (!d.children) {
+ return label_names[curr]
+ }
+ })
+ .attr("x", (function (d) {
+ ttr = 60
+ if (default_colors.length > 5) {
+ ttr = 18 + j * 45
+ }
+ return (d.children || d._children) || version2 ? -66 + j * labels_w : ttr
+ }))
+ .attr("y", (function (d) {
+ ttr = dict_leaf_y[label_names.length] + 10 + 20 * j + j * 4
+ if (default_colors.length > 5) {
+ ttr = 25
+ }
+ return (d.children || d._children) || version2 ? -15 : ttr;
+ }))
+ .style("font-size", "14px")
+ .style("fill", "rgb(78, 74, 74)")
+ .attr('transform', function (d) {
+
+ return default_colors.length <= 5 ? '' : 'translate(' + (-30 + j * 20) + ',' + (10 + j * (-37)) + ') rotate(55 50 50)'
+ })
+
+
+
+ }
+
+
+
+ // nodeEnter.append("text")
+ // .attr("x", function(d) { return (d.children || d._children) || version2 ? -10 : 10; })
+ // .attr("dy", ".35em")
+ // .attr("text-anchor", function(d) { return (d.children || d._children) || version2 ? "end" : "start"; })
+ // .text(function(d) { return d.pred ? d.pred : ''; })
+ // .style("fill-opacity", 1e-6)
+
+
+
+ // Transition nodes to their new position.
+ var nodeUpdate = node.transition()
+ .duration(duration)
+ .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; });
+
+ nodeUpdate.select("circle")
+ .attr("r", 10)
+ .style("fill", function (d) { return d._children ? "lightsteelblue" : "#fff"; });
+
+ nodeUpdate.select("text")
+ .style("fill-opacity", 1);
+
+ // Transition exiting nodes to the parent's new position.
+ var nodeExit = node.exit().transition()
+ .duration(duration)
+ .attr("transform", function (d) { return "translate(" + source.y + "," + source.x + ")"; })
+ .remove();
+
+ nodeExit.select("circle")
+ .attr("r", 1e-6);
+
+ nodeExit.select("text")
+ .style("fill-opacity", 1e-6);
+
+ // Update the links…
+ var link = svg.selectAll("path.link")
+ .data(links, function (d) { return d.target.id; });
+
+
+ if (tree_branch) var link_stoke_scale = d3.scale.linear().domain([0, 100]).range([1.5, default_strokeness]);
+ else var link_stoke_scale = d3.scale.linear().domain([0, 100]).range([1.5, 8]);
+
+ var color = d3.scale.linear()
+ .domain([0, 50, 100])
+ .range(["rgb(2, 255, 219)", "blue"]);
+
+
+ // Enter any new links at the parent's previous position.
+ link.enter().insert("path", "g")
+ .attr("class", "link")
+ .attr("id", function (d) { return d.target.id; })
+ .attr("d", function (d) {
+ var o = { x: source.x0, y: source.y0 };
+ return diagonal({ source: o, target: o });
+ })
+ .style("stroke-width", function (d) {
+
+ if (!d.target) {
+ return link_stoke_scale(50)
+ }
+ else {
+ if (tree_branch) {
+ // console.log(d.target.size,'*100/',TOTAL_SIZE,link_stoke_scale(d.target.size*100/TOTAL_SIZE),tree_branch_parent)
+ // console.log(d.target.size,'*100/',d.source.size,link_stoke_scale(d.target.size*100/d.source.size),tree_branch_parent)
+
+ return tree_branch_parent ? link_stoke_scale(d.target.size * 100 / TOTAL_SIZE) : link_stoke_scale(d.target.size * 100 / d.source.size)
+ } else {
+
+ return link_stoke_scale(50)
+ }
+ }
+ })
+ .style("stroke", function (d) {
+
+ if (!d.target) {
+ return "#fff"
+ // return "#A3A6A8"
+ }
+ else return tree_branch_color;
+ })
+ .append("svg:title")
+ .text(function (d, i) {
+ if (hover_percent_parent) {
+ var val = ((d.target.size / TOTAL_SIZE) * 100).toFixed(2);
+ } else {
+ var val = ((d.target.size / d.source.size) * 100).toFixed(2);
+ }
+
+ return val + "%"
+ })
+
+ var tlink = svg.selectAll("text.tlink")
+ .data(tpaths, function (d) { return d.target.id; });
+
+ tlink.enter().insert("text", "g")
+ .attr("class", "tlink")
+ .attr("dy", function (d) { return d.target.side == "left" ? -10 : 15; })
+ .append('textPath')
+ .attr("xlink:href", function (d) { return '#' + d.target.id; }) //place the ID of the path here
+ .style("text-anchor", "middle") //place the text halfway on the arc
+ .attr("startOffset", "45%")
+ .text(function (d) { return d.target.side == "left" ? "No" : "Yes"; })
+ .attr('visibility', function (d) { return d.target.depth == 1 && !version2 ? 'visible' : 'hidden' })
+ .attr("opacity", 0.5)
+
+
+ tlink.exit().transition()
+ .duration(duration)
+ .attr("d", function (d) {
+ var o = { x: source.x, y: source.y };
+ return diagonal({ source: o, target: o });
+ })
+ .remove();
+
+ // Transition links to their new position.
+ link.transition()
+ .duration(duration)
+ .attr("d", diagonal)
+ .style("stroke-width", function (d) {
+
+ if (!d.target) {
+ return link_stoke_scale(50)
+ }
+ else {
+ if (tree_branch) {
+ // console.log(d.target.size,'*100/',TOTAL_SIZE,link_stoke_scale(d.target.size*100/TOTAL_SIZE),tree_branch_parent)
+ // console.log(d.target.size,'*100/',d.source.size,link_stoke_scale(d.target.size*100/d.source.size),tree_branch_parent)
+
+ return tree_branch_parent ? link_stoke_scale(d.target.size * 100 / TOTAL_SIZE) : link_stoke_scale(d.target.size * 100 / d.source.size)
+ } else {
+
+ return link_stoke_scale(50)
+ }
+ }
+ });
+
+
+ // Transition exiting nodes to the parent's new position.
+ link.exit().transition()
+ .duration(duration)
+ .attr("d", function (d) {
+ var o = { x: source.x, y: source.y };
+ return diagonal({ source: o, target: o });
+ })
+ .remove();
+
+ // Stash the old positions for transition.
+ nodes.forEach(function (d) {
+ d.x0 = d.x;
+ d.y0 = d.y;
+ });
+
+
+ // Toggle children on click.
+ function click(d) {
+ console.log(d)
+
+ if (d.children) {
+ d._children = d.children;
+ d.children = null;
+ } else {
+ d.children = d._children;
+ d._children = null;
+ }
+ update(d, n_labels);
+
+ }
+
+
+ }
+
+
+
+
+ function createLabels(labels) {
+
+
+ var Size = 400
+
+
+ var svg1 = d3.select("body")
+ .append("svg")
+ .attr("width", Size)
+ .attr("height", Size)
+ .attr("class", "legends");
+
+ console.log(labels.length)
+ console.log(default_colors.slice(0, labels.length))
+ default_colors = default_colors.slice(0, labels.length)
+ if (default_colors.length == 2) default_colors.push('')
+ if (default_colors.length == 0) {
+ var c_l = default_colors
+ } else {
+ var c_l = default_colors
+ }
+
+ for (i = 0; i < c_l.length; i++) {
+
+ console.log(labels[i], "", c_l[i])
+
+ var legendG = svg1
+ .append("g")
+ .attr("transform", function (d) {
+ return "translate(" + 0 + "," + (30 * i + Size / 33 + Size / 50) + ")"; // place each legend on the right and bump each one down 15 pixels
+ })
+ .attr("class", "legend");
+
+ legendG.append("rect") // make a matching color rect
+ .attr("width", 15)
+ .attr("height", 15)
+ .attr("fill", c_l[i])
+ .style('visibility', function () {
+ return labels[i] ? "visible" : "hidden"
+ })
+
+ legendG.append("text") // add the text
+ .text(labels[i])
+ .style("font-size", 30)
+ .attr("y", 12)
+ .attr("x", 21)
+
+ }
+
+ }
+ }
\ No newline at end of file