Skip to content

Instantly share code, notes, and snippets.

@JGalego

JGalego/draw_data.ipynb

Last active May 7, 2025 14:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JGalego/2d58061209e295fac46d740dffabd557 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JGalego/2d58061209e295fac46d740dffabd557 to your computer and use it in GitHub Desktop.
Download ZIP
Draw Data Demo 🎨
Display the source blob
Display the rendered blob
Raw
draw_data.ipynb
{
"nbformat": 4,
"nbformat_minor": 0,
"metadata": {
"colab": {
"provenance": []
},
"kernelspec": {
"name": "python3",
"display_name": "Python 3"
},
"language_info": {
"name": "python"
}
},
"cells": [
{
"cell_type": "markdown",
"source": [
"# Draw Data Demo 🎨\n",
"\n",
"> *Just draw some data and get on with your day!*\n",
"\n"
],
"metadata": {
"id": "WkAXoewN66vo"
}
},
{
"cell_type": "markdown",
"source": [
"Install dependencies"
],
"metadata": {
"id": "pYX8xF367JdT"
}
},
{
"cell_type": "code",
"source": [
"%%writefile requirements.txt\n",
"drawdata==0.3.7\n",
"matplotlib==3.10.1\n",
"scikit-learn==1.6.1"
],
"metadata": {
"colab": {
"base_uri": "https://localhost:8080/"
},
"id": "OZJ9Q_uT-gv-",
"outputId": "2f84ebbe-0b84-4a27-8255-2720e6285f40"
},
"execution_count": null,
"outputs": [
{
"output_type": "stream",
"name": "stdout",
"text": [
"Overwriting requirements.txt\n"
]
}
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"id": "NRzNCqs_6otW"
},
"outputs": [],
"source": [
"!pip install -qr requirements.txt"
]
},
{
"cell_type": "markdown",
"source": [
"Import libraries"
],
"metadata": {
"id": "XvrBgTkf-2zj"
}
},
{
"cell_type": "code",
"source": [
"import matplotlib.pylab as plt\n",
"import numpy as np\n",
"import ipywidgets\n",
"\n",
"from drawdata import ScatterWidget\n",
"\n",
"from IPython.core.display import HTML\n",
"\n",
"from sklearn.inspection import DecisionBoundaryDisplay\n",
"from sklearn.linear_model import LogisticRegression\n",
"from sklearn.tree import DecisionTreeClassifier"
],
"metadata": {
"id": "4FDbvDxt7TsF"
},
"execution_count": null,
"outputs": []
},
{
"cell_type": "code",
"source": [
"widget = ScatterWidget()\n",
"output = ipywidgets.Output()\n",
"\n",
"@output.capture(clear_output=True)\n",
"def on_change(change):\n",
" df = widget.data_as_pandas\n",
" if len(df) and (df['color'].nunique() > 1):\n",
" X = df[['x', 'y']].values\n",
" y = df['color'].values\n",
" display(HTML(\"<br><br><br>\"))\n",
" fig = plt.figure()\n",
" classifier = DecisionTreeClassifier()\n",
" classifier.fit(X, y)\n",
" disp = DecisionBoundaryDisplay.from_estimator(\n",
" classifier,\n",
" X,\n",
" response_method=\"predict_proba\" if len(np.unique(df['color'])) == 2 else \"predict\",\n",
" alpha=0.5,\n",
" )\n",
" disp.ax_.scatter(X[:, 0], X[:, 1], c=y, edgecolor=\"k\")\n",
" plt.title(f\"{classifier.__class__.__name__}\")\n",
" plt.show()\n",
"\n",
"widget.observe(on_change, names='data')\n",
"on_change(None)\n",
"ipywidgets.HBox([widget, output])"
],
"metadata": {
"id": "_zMA9QMWDwWR"
},
"execution_count": null,
"outputs": []
},
{
"cell_type": "markdown",
"source": [
"Display a small sample of the data"
],
"metadata": {
"id": "AQhYnqHLHY7V"
}
},
{
"cell_type": "code",
"source": [
"widget.data_as_pandas.sample(frac=1).head(10)"
],
"metadata": {
"colab": {
"base_uri": "https://localhost:8080/",
"height": 363
},
"id": "hQ0DlT_uEv3g",
"outputId": "d95aba31-ac17-468a-8c12-bba6ae795e0d"
},
"execution_count": null,
"outputs": [
{
"output_type": "execute_result",
"data": {
"text/plain": [
" x y color label\n",
"178 349.944050 94.490214 #ff7f0e b\n",
"21 304.030175 330.798814 #1f77b4 a\n",
"69 240.240151 340.478567 #1f77b4 a\n",
"285 166.669049 125.882912 #d62728 d\n",
"105 440.634777 100.443565 #ff7f0e b\n",
"62 331.486950 344.601137 #1f77b4 a\n",
"66 268.183797 351.808005 #1f77b4 a\n",
"190 395.953539 69.744618 #ff7f0e b\n",
"92 276.998522 356.355512 #1f77b4 a\n",
"142 520.925066 133.464455 #ff7f0e b"
],
"text/html": [
"\n",
" <div id=\"df-0bd3f6c9-ae5a-41b2-b374-05e3d20021f4\" class=\"colab-df-container\">\n",
" <div>\n",
"<style scoped>\n",
" .dataframe tbody tr th:only-of-type {\n",
" vertical-align: middle;\n",
" }\n",
"\n",
" .dataframe tbody tr th {\n",
" vertical-align: top;\n",
" }\n",
"\n",
" .dataframe thead th {\n",
" text-align: right;\n",
" }\n",
"</style>\n",
"<table border=\"1\" class=\"dataframe\">\n",
" <thead>\n",
" <tr style=\"text-align: right;\">\n",
" <th></th>\n",
" <th>x</th>\n",
" <th>y</th>\n",
" <th>color</th>\n",
" <th>label</th>\n",
" </tr>\n",
" </thead>\n",
" <tbody>\n",
" <tr>\n",
" <th>178</th>\n",
" <td>349.944050</td>\n",
" <td>94.490214</td>\n",
" <td>#ff7f0e</td>\n",
" <td>b</td>\n",
" </tr>\n",
" <tr>\n",
" <th>21</th>\n",
" <td>304.030175</td>\n",
" <td>330.798814</td>\n",
" <td>#1f77b4</td>\n",
" <td>a</td>\n",
" </tr>\n",
" <tr>\n",
" <th>69</th>\n",
" <td>240.240151</td>\n",
" <td>340.478567</td>\n",
" <td>#1f77b4</td>\n",
" <td>a</td>\n",
" </tr>\n",
" <tr>\n",
" <th>285</th>\n",
" <td>166.669049</td>\n",
" <td>125.882912</td>\n",
" <td>#d62728</td>\n",
" <td>d</td>\n",
" </tr>\n",
" <tr>\n",
" <th>105</th>\n",
" <td>440.634777</td>\n",
" <td>100.443565</td>\n",
" <td>#ff7f0e</td>\n",
" <td>b</td>\n",
" </tr>\n",
" <tr>\n",
" <th>62</th>\n",
" <td>331.486950</td>\n",
" <td>344.601137</td>\n",
" <td>#1f77b4</td>\n",
" <td>a</td>\n",
" </tr>\n",
" <tr>\n",
" <th>66</th>\n",
" <td>268.183797</td>\n",
" <td>351.808005</td>\n",
" <td>#1f77b4</td>\n",
" <td>a</td>\n",
" </tr>\n",
" <tr>\n",
" <th>190</th>\n",
" <td>395.953539</td>\n",
" <td>69.744618</td>\n",
" <td>#ff7f0e</td>\n",
" <td>b</td>\n",
" </tr>\n",
" <tr>\n",
" <th>92</th>\n",
" <td>276.998522</td>\n",
" <td>356.355512</td>\n",
" <td>#1f77b4</td>\n",
" <td>a</td>\n",
" </tr>\n",
" <tr>\n",
" <th>142</th>\n",
" <td>520.925066</td>\n",
" <td>133.464455</td>\n",
" <td>#ff7f0e</td>\n",
" <td>b</td>\n",
" </tr>\n",
" </tbody>\n",
"</table>\n",
"</div>\n",
" <div class=\"colab-df-buttons\">\n",
"\n",
" <div class=\"colab-df-container\">\n",
" <button class=\"colab-df-convert\" onclick=\"convertToInteractive('df-0bd3f6c9-ae5a-41b2-b374-05e3d20021f4')\"\n",
" title=\"Convert this dataframe to an interactive table.\"\n",
" style=\"display:none;\">\n",
"\n",
" <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\">\n",
" <path d=\"M120-120v-720h720v720H120Zm60-500h600v-160H180v160Zm220 220h160v-160H400v160Zm0 220h160v-160H400v160ZM180-400h160v-160H180v160Zm440 0h160v-160H620v160ZM180-180h160v-160H180v160Zm440 0h160v-160H620v160Z\"/>\n",
" </svg>\n",
" </button>\n",
"\n",
" <style>\n",
" .colab-df-container {\n",
" display:flex;\n",
" gap: 12px;\n",
" }\n",
"\n",
" .colab-df-convert {\n",
" background-color: #E8F0FE;\n",
" border: none;\n",
" border-radius: 50%;\n",
" cursor: pointer;\n",
" display: none;\n",
" fill: #1967D2;\n",
" height: 32px;\n",
" padding: 0 0 0 0;\n",
" width: 32px;\n",
" }\n",
"\n",
" .colab-df-convert:hover {\n",
" background-color: #E2EBFA;\n",
" box-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3), 0px 1px 3px 1px rgba(60, 64, 67, 0.15);\n",
" fill: #174EA6;\n",
" }\n",
"\n",
" .colab-df-buttons div {\n",
" margin-bottom: 4px;\n",
" }\n",
"\n",
" [theme=dark] .colab-df-convert {\n",
" background-color: #3B4455;\n",
" fill: #D2E3FC;\n",
" }\n",
"\n",
" [theme=dark] .colab-df-convert:hover {\n",
" background-color: #434B5C;\n",
" box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);\n",
" filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));\n",
" fill: #FFFFFF;\n",
" }\n",
" </style>\n",
"\n",
" <script>\n",
" const buttonEl =\n",
" document.querySelector('#df-0bd3f6c9-ae5a-41b2-b374-05e3d20021f4 button.colab-df-convert');\n",
" buttonEl.style.display =\n",
" google.colab.kernel.accessAllowed ? 'block' : 'none';\n",
"\n",
" async function convertToInteractive(key) {\n",
" const element = document.querySelector('#df-0bd3f6c9-ae5a-41b2-b374-05e3d20021f4');\n",
" const dataTable =\n",
" await google.colab.kernel.invokeFunction('convertToInteractive',\n",
" [key], {});\n",
" if (!dataTable) return;\n",
"\n",
" const docLinkHtml = 'Like what you see? Visit the ' +\n",
" '<a target=\"_blank\" href=https://colab.research.google.com/notebooks/data_table.ipynb>data table notebook</a>'\n",
" + ' to learn more about interactive tables.';\n",
" element.innerHTML = '';\n",
" dataTable['output_type'] = 'display_data';\n",
" await google.colab.output.renderOutput(dataTable, element);\n",
" const docLink = document.createElement('div');\n",
" docLink.innerHTML = docLinkHtml;\n",
" element.appendChild(docLink);\n",
" }\n",
" </script>\n",
" </div>\n",
"\n",
"\n",
" <div id=\"df-81d1bd1b-ea0a-4529-a34d-54b512632542\">\n",
" <button class=\"colab-df-quickchart\" onclick=\"quickchart('df-81d1bd1b-ea0a-4529-a34d-54b512632542')\"\n",
" title=\"Suggest charts\"\n",
" style=\"display:none;\">\n",
"\n",
"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\"viewBox=\"0 0 24 24\"\n",
" width=\"24px\">\n",
" <g>\n",
" <path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z\"/>\n",
" </g>\n",
"</svg>\n",
" </button>\n",
"\n",
"<style>\n",
" .colab-df-quickchart {\n",
" --bg-color: #E8F0FE;\n",
" --fill-color: #1967D2;\n",
" --hover-bg-color: #E2EBFA;\n",
" --hover-fill-color: #174EA6;\n",
" --disabled-fill-color: #AAA;\n",
" --disabled-bg-color: #DDD;\n",
" }\n",
"\n",
" [theme=dark] .colab-df-quickchart {\n",
" --bg-color: #3B4455;\n",
" --fill-color: #D2E3FC;\n",
" --hover-bg-color: #434B5C;\n",
" --hover-fill-color: #FFFFFF;\n",
" --disabled-bg-color: #3B4455;\n",
" --disabled-fill-color: #666;\n",
" }\n",
"\n",
" .colab-df-quickchart {\n",
" background-color: var(--bg-color);\n",
" border: none;\n",
" border-radius: 50%;\n",
" cursor: pointer;\n",
" display: none;\n",
" fill: var(--fill-color);\n",
" height: 32px;\n",
" padding: 0;\n",
" width: 32px;\n",
" }\n",
"\n",
" .colab-df-quickchart:hover {\n",
" background-color: var(--hover-bg-color);\n",
" box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);\n",
" fill: var(--button-hover-fill-color);\n",
" }\n",
"\n",
" .colab-df-quickchart-complete:disabled,\n",
" .colab-df-quickchart-complete:disabled:hover {\n",
" background-color: var(--disabled-bg-color);\n",
" fill: var(--disabled-fill-color);\n",
" box-shadow: none;\n",
" }\n",
"\n",
" .colab-df-spinner {\n",
" border: 2px solid var(--fill-color);\n",
" border-color: transparent;\n",
" border-bottom-color: var(--fill-color);\n",
" animation:\n",
" spin 1s steps(1) infinite;\n",
" }\n",
"\n",
" @keyframes spin {\n",
" 0% {\n",
" border-color: transparent;\n",
" border-bottom-color: var(--fill-color);\n",
" border-left-color: var(--fill-color);\n",
" }\n",
" 20% {\n",
" border-color: transparent;\n",
" border-left-color: var(--fill-color);\n",
" border-top-color: var(--fill-color);\n",
" }\n",
" 30% {\n",
" border-color: transparent;\n",
" border-left-color: var(--fill-color);\n",
" border-top-color: var(--fill-color);\n",
" border-right-color: var(--fill-color);\n",
" }\n",
" 40% {\n",
" border-color: transparent;\n",
" border-right-color: var(--fill-color);\n",
" border-top-color: var(--fill-color);\n",
" }\n",
" 60% {\n",
" border-color: transparent;\n",
" border-right-color: var(--fill-color);\n",
" }\n",
" 80% {\n",
" border-color: transparent;\n",
" border-right-color: var(--fill-color);\n",
" border-bottom-color: var(--fill-color);\n",
" }\n",
" 90% {\n",
" border-color: transparent;\n",
" border-bottom-color: var(--fill-color);\n",
" }\n",
" }\n",
"</style>\n",
"\n",
" <script>\n",
" async function quickchart(key) {\n",
" const quickchartButtonEl =\n",
" document.querySelector('#' + key + ' button');\n",
" quickchartButtonEl.disabled = true; // To prevent multiple clicks.\n",
" quickchartButtonEl.classList.add('colab-df-spinner');\n",
" try {\n",
" const charts = await google.colab.kernel.invokeFunction(\n",
" 'suggestCharts', [key], {});\n",
" } catch (error) {\n",
" console.error('Error during call to suggestCharts:', error);\n",
" }\n",
" quickchartButtonEl.classList.remove('colab-df-spinner');\n",
" quickchartButtonEl.classList.add('colab-df-quickchart-complete');\n",
" }\n",
" (() => {\n",
" let quickchartButtonEl =\n",
" document.querySelector('#df-81d1bd1b-ea0a-4529-a34d-54b512632542 button');\n",
" quickchartButtonEl.style.display =\n",
" google.colab.kernel.accessAllowed ? 'block' : 'none';\n",
" })();\n",
" </script>\n",
" </div>\n",
"\n",
" </div>\n",
" </div>\n"
],
"application/vnd.google.colaboratory.intrinsic+json": {
"type": "dataframe",
"summary": "{\n \"name\": \"widget\",\n \"rows\": 10,\n \"fields\": [\n {\n \"column\": \"x\",\n \"properties\": {\n \"dtype\": \"number\",\n \"std\": 102.9986555939118,\n \"min\": 166.66904884439808,\n \"max\": 520.9250660863245,\n \"num_unique_values\": 10,\n \"samples\": [\n 276.99852187343436,\n 304.03017468274595,\n 331.48695045701396\n ],\n \"semantic_type\": \"\",\n \"description\": \"\"\n }\n },\n {\n \"column\": \"y\",\n \"properties\": {\n \"dtype\": \"number\",\n \"std\": 127.81131234488569,\n \"min\": 69.74461832003288,\n \"max\": 356.3555120736552,\n \"num_unique_values\": 10,\n \"samples\": [\n 356.3555120736552,\n 330.79881384487817,\n 344.6011370490111\n ],\n \"semantic_type\": \"\",\n \"description\": \"\"\n }\n },\n {\n \"column\": \"color\",\n \"properties\": {\n \"dtype\": \"category\",\n \"num_unique_values\": 3,\n \"samples\": [\n \"#ff7f0e\",\n \"#1f77b4\",\n \"#d62728\"\n ],\n \"semantic_type\": \"\",\n \"description\": \"\"\n }\n },\n {\n \"column\": \"label\",\n \"properties\": {\n \"dtype\": \"category\",\n \"num_unique_values\": 3,\n \"samples\": [\n \"b\",\n \"a\",\n \"d\"\n ],\n \"semantic_type\": \"\",\n \"description\": \"\"\n }\n }\n ]\n}"
}
},
"metadata": {},
"execution_count": 5
}
]
},
{
"cell_type": "code",
"source": [],
"metadata": {
"id": "ay-DelHwLEI0"
},
"execution_count": null,
"outputs": []
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment