Home Dataplay Download And Load Merge Data Map Basics Intake An... Nb 2 Html Map Correlation Netw... Timelapse Data Gifs Retrieve Acs Data Pivot Table Sync Data

Don't Look! I'm changing!

URL Copied

Audio Version

Welcome to my test page!


BinderBinderBinderOpen Source Love svg3
NPM LicenseActiveGitHub last commit

GitHub starsGitHub watchersGitHub forksGitHub followers
TweetTwitter Follow

Table of Contents

How it works

Sample Image

I want to create interactive ipynb visualizations which share and update linked data between cells and persists when converted to html. Jupyter Notebooks being a web app makes this possible as Ipynb's cell outputs are actually just IFRAMES. Jupyter notebooks run a web server responsible for routing communication from your browser to your local machine.

Doing this will store the dataset into the browsers window.

This way, you no longer need to pass the dataset to create Multiple Visualizations.

Similar Tools

How it works

import pandas as pd
 
 # Example DataFrame
 data = {
     'Name': ['Alice', 'Bob', 'Charlie'],
     'Age': [25, 30, 35],
     'City': ['New York', 'Paris', 'London'] 
 }
 df = pd.DataFrame(data) 
 
 # displayElement(df) 
 # OR EVEN 
 displayElement(df, 
                viztype='Table', 
                rows='Name', 
                cols='Age'
                )
# displayElement(df) 
 # OR EVEN 
 displayElement(df, 
                viztype='Table', 
                rows='Name', 
                cols='PetalWidth'
                )
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/iris.csv') 
 displayElement(df) 
displayElement(df) 

I will first cover basic core functions before showing the convenience function that makes it all easier to use.


Terms:

To use the tool, first perform typical python data science operations

import pandas as pd
 
 # Example DataFrame
 data = {
     'Name': ['Alice', 'Bob', 'Charlie'],
     'Age': [25, 30, 35],
     'City': ['New York', 'Paris', 'London'] 
 }
 df = pd.DataFrame(data) 

From there, it is possible to...

  1. Display the data as is. This will visualize the dataframe that is non-updateable

# displayElement(df) 
 # OR EVEN 
 displayElement(df, 
                viztype='Table', 
                rows='Name', 
                cols='Age'
                )
  1. Save the current state of the df to a label and then display it using the label name.

setData('label1', df)
 
 displayElements('label1')
  1. Create a mapping between a label and an elementId so it may be later updated.

# setMapping('label1', 'viz1')
 # setMapping('label1', 'viz1', 'Table')
 setMapping(label='label1', vizid='viz1', viztype='Table', cols='Name', rows='Age')
  1. Render the mappings

displayElements('label1')
  1. Multiple labels, and mappings to the labels may be made. To update the data and mappings (above), it's just more of the same.

setMapping('label1', 'viz2')
 
 # df.loc[df['Name'] == 'Alice', 'Age'] = 3 
 df.loc[len(df)] = {'Name': 'Diana', 'Age': 28, 'City': 'Berlin'}
 
 setData('label1', df)
 
 displayElements('label1')

undefined combines the three functions. Toss it w/e - and w/e will update or be made.

df.loc[df['Name'] == 'Alice', 'Age'] = 16
 update(label='label1', ds=df)

Lets create another visual mapping for the existing label

update(label='label1', vizid='viz3', viztype='Table')

And to create a new saved dataset and visualize in one go we just add the ds

df.loc[df['Name'] == 'Alice', 'Age'] = 6
 
 update(label='label2', ds=df, vizid='viz4', viztype='Table')

As ininusated earlier, it's possible specify where the visual should be placed by using undefined or magicundefined to render the html div with an id of the vizId specified in your mapping

undefined

And now data can be inserted into it. The container can be placed anywhere, but must be executed before the call for visualizing.

df.loc[df['Name'] == 'Alice', 'Age'] = 7
 
 update(label='label2', ds=df, vizid='insertHere1', viztype='Table', unset=False)