Summary Table

Gives you a summery of each column in your data containing a histogram containing the distribution of data in a column followed by the mean, median and standard distribution values of the data.

Set Up

Before Starting make sure to have Observable-Jupyter and any other needed libraries installed in your local environment.

[1]:

from observable_jupyter import embed
from sklearn.datasets import load_breast_cancer
import pandas as pd
import json

Load and Format Data

[2]:

cancer = load_breast_cancer()
cancer_df = pd.DataFrame(data = cancer.data, columns = cancer.feature_names)
cancer_df.head()

[2]:
mean radius mean texture mean perimeter mean area mean smoothness mean compactness mean concavity mean concave points mean symmetry mean fractal dimension ... worst radius worst texture worst perimeter worst area worst smoothness worst compactness worst concavity worst concave points worst symmetry worst fractal dimension
0 17.99 10.38 122.80 1001.0 0.11840 0.27760 0.3001 0.14710 0.2419 0.07871 ... 25.38 17.33 184.60 2019.0 0.1622 0.6656 0.7119 0.2654 0.4601 0.11890
1 20.57 17.77 132.90 1326.0 0.08474 0.07864 0.0869 0.07017 0.1812 0.05667 ... 24.99 23.41 158.80 1956.0 0.1238 0.1866 0.2416 0.1860 0.2750 0.08902
2 19.69 21.25 130.00 1203.0 0.10960 0.15990 0.1974 0.12790 0.2069 0.05999 ... 23.57 25.53 152.50 1709.0 0.1444 0.4245 0.4504 0.2430 0.3613 0.08758
3 11.42 20.38 77.58 386.1 0.14250 0.28390 0.2414 0.10520 0.2597 0.09744 ... 14.91 26.50 98.87 567.7 0.2098 0.8663 0.6869 0.2575 0.6638 0.17300
4 20.29 14.34 135.10 1297.0 0.10030 0.13280 0.1980 0.10430 0.1809 0.05883 ... 22.54 16.67 152.20 1575.0 0.1374 0.2050 0.4000 0.1625 0.2364 0.07678

5 rows × 30 columns

The following block of code structures the data into a format accepted by Observable.

[3]:

result = cancer_df.to_json(orient="records")
parsed = json.loads(result)
data = json.dumps(parsed, indent=4)
Formated_Data = json.loads(data)

Embed your data into the visualization

The Summary Table visualization consists of one cell:

  1. viewof summary_data : Depicts the graph and the associated data

To make your visualization work you will need to access the input variables.

  1. title : Set title equal to a string that best represents your data

  2. data : Set data equal to your Formated Data

[4]:

embed(
    "@rstorni/summary-table-demo",
    cells=["viewof summary_data"],
    inputs = {
        "title" : "Breast Cancer Data",
        "data" : Formated_Data
     }
)

Images/Thumbnails/Summary_Table.png