Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change Vis export API name: to_matplotlib, to_altair, to_vegalite #359

Merged
merged 3 commits into from
Apr 15, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 77 additions & 14 deletions doc/source/guide/export.rst
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ In this tutorial, we look at the `Happy Planet Index <http://happyplanetindex.or
Note that for the convienience of this tutorial, we have set Lux as the default display so we don't have to Toggle from the Pandas table display everytime we print the dataframe.

Exporting widget visualizations as static HTML
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
----------------------------------------------------------------

Let's say that you are interested in sharing the visualizations displayed in Lux with others, you can export the visualizations into a static HTML using the following command:

Expand All @@ -34,7 +34,7 @@ By default, the file is saved as `export.html`, you can optionally specify the H
df.save_as_html('hpi.html')

Selecting visualizations from recommendation widget
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
----------------------------------------------------------------

You can also click on visualizations of interest and export them into a separate widget for further processing.

Expand Down Expand Up @@ -79,7 +79,7 @@ From the dataframe recommendations, the visualization showing the relationship b
:alt: add screenshot of exported vis

Setting Vis as the Updated Intent
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
----------------------------------

Often, we might be interested in other visualizations that is related to a visualization of interest and want to learn more. With the exported Vis, we can update the intent associated with dataframe to be based on the selected Vis to get more recommendations related to this visualization.

Expand All @@ -94,7 +94,7 @@ Often, we might be interested in other visualizations that is related to a visua
:alt: add screenshot

Accessing Widget State
~~~~~~~~~~~~~~~~~~~~~~
------------------------

We can access the set of recommendations generated for the dataframes via the properties `recommendation`.

Expand Down Expand Up @@ -130,7 +130,7 @@ You can also access the vis represented by the current intent via the property `
:alt: add screenshot

Exporting Visualizations as Code
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
--------------------------------

Let's revist our earlier recommendations by clearing the specified intent.

Expand All @@ -156,19 +156,76 @@ Looking at the Occurrence tab, we are interested in the bar chart distribution o
:align: center
:alt: add screenshot

To allow further edits of visualizations, visualizations can be exported to code in `Altair <https://altair-viz.github.io/>`_ or as `Vega-Lite <https://vega.github.io/vega-lite/>`_ specification.
To allow further edits of visualizations, visualizations can be exported to code in `Matplotlib <https://matplotlib.org/>`_, `Altair <https://altair-viz.github.io/>`_, or as `Vega-Lite <https://vega.github.io/vega-lite/>`_ specification via the :code:`to_code` command:

.. code-block:: python

print (vis.to_code("matplotlib"))
print (vis.to_code("altair"))
print (vis.to_code("vegalite"))

Exporting Visualizations to Matplotlib
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
We can also be export the visualization as code in `Matplotlib <https://matplotlib.org/>`_.

.. code-block:: python

print (vis.to_Altair())
print (vis.to_matplotlib())

.. image:: ../img/export-11.png
.. image:: ../img/export-16.png
:width: 700
:align: center
:alt: add screenshot

This can be copy-and-pasted back into a new notebook cell for further editing.

.. code-block:: python

import matplotlib.pyplot as plt
plt.rcParams.update(
{
"axes.titlesize": 20,
"axes.titleweight": "bold",
"axes.labelweight": "bold",
"axes.labelsize": 16,
"legend.fontsize": 14,
"legend.title_fontsize": 15,
"xtick.labelsize": 13,
"ytick.labelsize": 13,
}
)
import numpy as np
from math import nan
from matplotlib.cm import ScalarMappable
fig, ax = plt.subplots(figsize=(4.5, 4))
x_pts = df['Displacement']
y_pts = df['Weight']
ax.scatter(x_pts, y_pts, alpha=0.5)
ax.set_xlabel('Displacement', fontsize='15')
ax.set_ylabel('Weight', fontsize='15')

fig

.. image:: ../img/export-17.png
:width: 700
:align: center
:alt: add screenshot

Exporting Visualizations to Altair
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


.. code-block:: python

print (vis.to_altair())

.. .. image:: ../img/export-11.png
.. :width: 700
.. :align: center
.. :alt: add screenshot

.. This can be copy-and-pasted back into a new notebook cell for further editing.

.. code-block:: python

import altair as alt
Expand All @@ -192,17 +249,23 @@ This can be copy-and-pasted back into a new notebook cell for further editing.
:align: center
:alt: add screenshot

You can also export this as Vega-Lite specification and vis/edit the specification on `Vega Editor <https://vega.github.io/editor>`_.
Exporting Visualizations to Vega-Lite
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can also export this as Vega-Lite specification and view/edit the specification on `Vega Editor <https://vega.github.io/editor>`_.

.. code-block:: python

print (vis.to_VegaLite())
print (vis.to_vegalite())

.. image:: ../img/export-13.png
:width: 700
:align: center
:alt: add screenshot of what this looks like in Vega Editor

Exporting Standalone Visualizations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Let's say now we are interested in the scatter plot of the `HPIRank` and `HappyPlanetIndex`.

.. code-block:: python
Expand All @@ -213,20 +276,20 @@ Since the dataset used to create the scatterplot is large, Lux infers the variab

.. code-block:: python

print (vis.to_Altair())
print (vis.to_altair())

.. image:: ../img/export-14.png
:width: 700
:align: center
:alt: screenshot of code with df

If we wanted to include the actual data in the returned codeblock, we would use `to_Altair(standalone=True)`
If we wanted to include the actual data in the returned codeblock, we would use :code:`to_altair(standalone=True)` to create a code snippet that contains all the data that we need embedded in the code itself, which can be run outside the notebook.

.. code-block:: python

print (vis.to_Altair(standalone=True))
print (vis.to_altair(standalone=True))

.. image:: ../img/export-15.png
:width: 700
:align: center
:alt: screenshot of code with embedded data
:alt: screenshot of code with embedded data
88 changes: 66 additions & 22 deletions doc/source/guide/style.rst
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,42 @@ We now see that the displayed visualizations adopt these new imported settings.
:width: 700
:align: center

If we click on the visualization for `Displacement` v.s. `Weight` and export it. We see that the exported chart now contains code with these additional plot settings at the every end.

.. code-block:: python

# Before running this cell, click on Displacement v.s. Weight vis and export it.
vis = df.exported[0]
print (vis.to_altair())

.. image:: ../img/style-3.png
:width: 700
:align: center

.. code-block:: python

import altair as alt

chart = alt.Chart(df).mark_circle().encode(
x=alt.X('Weight',scale=alt.Scale(domain=(1613, 5140)),type='quantitative'),
y=alt.Y('Displacement',scale=alt.Scale(domain=(68.0, 455.0)),type='quantitative')
)
chart = chart.configure_mark(tooltip=alt.TooltipContent('encoding')) # Setting tooltip as non-null
chart = chart.interactive() # Enable Zooming and Panning
chart = chart.configure_title(fontWeight=500,fontSize=13,font='Helvetica Neue')
chart = chart.configure_axis(titleFontWeight=500,titleFontSize=11,titleFont='Helvetica Neue',
labelFontWeight=400,labelFontSize=8,labelFont='Helvetica Neue',labelColor='#505050')
chart = chart.configure_legend(titleFontWeight=500,titleFontSize=10,titleFont='Helvetica Neue',
labelFontWeight=400,labelFontSize=8,labelFont='Helvetica Neue')
chart = chart.properties(width=160,height=150)
chart = chart.configure_mark(color="green") # change mark color to green
chart.title = "Custom Title" # add title to chart
chart

.. image:: ../img/style-4.png
:width: 200
:align: center

Similarly, we can change the plot configurations for Matplotlib charts as well.
The plotting_style attribute for Matplotlib charts takes in both the `fig` and `ax` as parameters.
`fig` handles figure width and other plot size attributes. `ax` supports changing the chart title and other plot labels and configurations.
Expand Down Expand Up @@ -76,39 +112,47 @@ We now see that the displayed visualizations adopt these new imported settings.
:width: 700
:align: center

If we click on the visualization for `Displacement` v.s. `Weight` and export it. We see that the exported chart now contains code with these additional plot settings at the every end.
We can also export these Matplotlib charts with the plotting style.

.. code-block:: python

# Before running this cell, click on Displacement v.s. Weight vis and export it.
vis = df.exported[0]
print (vis.to_Altair())
print (vis.to_matplotlib())

.. image:: ../img/style-3.png
.. image:: ../img/style-8.png
:width: 700
:align: center

.. code-block:: python

import altair as alt

chart = alt.Chart(df).mark_circle().encode(
x=alt.X('Weight',scale=alt.Scale(domain=(1613, 5140)),type='quantitative'),
y=alt.Y('Displacement',scale=alt.Scale(domain=(68.0, 455.0)),type='quantitative')
)
chart = chart.configure_mark(tooltip=alt.TooltipContent('encoding')) # Setting tooltip as non-null
chart = chart.interactive() # Enable Zooming and Panning
chart = chart.configure_title(fontWeight=500,fontSize=13,font='Helvetica Neue')
chart = chart.configure_axis(titleFontWeight=500,titleFontSize=11,titleFont='Helvetica Neue',
labelFontWeight=400,labelFontSize=8,labelFont='Helvetica Neue',labelColor='#505050')
chart = chart.configure_legend(titleFontWeight=500,titleFontSize=10,titleFont='Helvetica Neue',
labelFontWeight=400,labelFontSize=8,labelFont='Helvetica Neue')
chart = chart.properties(width=160,height=150)
chart = chart.configure_mark(color="green") # change mark color to green
chart.title = "Custom Title" # add title to chart
chart

.. image:: ../img/style-4.png
import matplotlib.pyplot as plt
plt.rcParams.update(
{
"axes.titlesize": 20,
"axes.titleweight": "bold",
"axes.labelweight": "bold",
"axes.labelsize": 16,
"legend.fontsize": 14,
"legend.title_fontsize": 15,
"xtick.labelsize": 13,
"ytick.labelsize": 13,
}
)
import numpy as np
from math import nan
from matplotlib.cm import ScalarMappable
fig, ax = plt.subplots(figsize=(4.5, 4))
x_pts = df['Displacement']
y_pts = df['Weight']
ax.scatter(x_pts, y_pts, alpha=0.5)
ax.set_xlabel('Displacement', fontsize='15')
ax.set_ylabel('Weight', fontsize='15')
fig.set_figwidth(7)
ax.set_title("Custom Title")
fig

.. image:: ../img/style-9.png
:width: 200
:align: center

Expand Down
Binary file added doc/source/img/export-16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/source/img/export-17.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/source/img/style-200.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified doc/source/img/style-7.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/source/img/style-8.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/source/img/style-9.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 3 additions & 8 deletions doc/source/reference/gen/lux.core.frame.LuxDataFrame.rst
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
lux.core.frame.LuxDataFrame
lux.core.frame.LuxDataFrame
===========================

.. currentmodule:: lux.core.frame
Expand Down Expand Up @@ -41,9 +41,6 @@ lux.core.frame.LuxDataFrame
~LuxDataFrame.combine
~LuxDataFrame.combine_first
~LuxDataFrame.compare
~LuxDataFrame.compute_SQL_data_type
~LuxDataFrame.compute_SQL_dataset_metadata
~LuxDataFrame.compute_SQL_stats
~LuxDataFrame.convert_dtypes
~LuxDataFrame.copy
~LuxDataFrame.copy_intent
Expand Down Expand Up @@ -85,9 +82,6 @@ lux.core.frame.LuxDataFrame
~LuxDataFrame.from_records
~LuxDataFrame.ge
~LuxDataFrame.get
~LuxDataFrame.get_SQL_attributes
~LuxDataFrame.get_SQL_cardinality
~LuxDataFrame.get_SQL_unique_values
~LuxDataFrame.groupby
~LuxDataFrame.gt
~LuxDataFrame.head
Expand Down Expand Up @@ -174,9 +168,9 @@ lux.core.frame.LuxDataFrame
~LuxDataFrame.save_as_html
~LuxDataFrame.select_dtypes
~LuxDataFrame.sem
~LuxDataFrame.set_SQL_table
~LuxDataFrame.set_axis
~LuxDataFrame.set_data_type
~LuxDataFrame.set_flags
~LuxDataFrame.set_index
~LuxDataFrame.set_intent
~LuxDataFrame.set_intent_as_vis
Expand Down Expand Up @@ -251,6 +245,7 @@ lux.core.frame.LuxDataFrame
~LuxDataFrame.dtypes
~LuxDataFrame.empty
~LuxDataFrame.exported
~LuxDataFrame.flags
~LuxDataFrame.history
~LuxDataFrame.iat
~LuxDataFrame.iloc
Expand Down
6 changes: 5 additions & 1 deletion doc/source/reference/gen/lux.core.series.LuxSeries.rst
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
lux.core.series.LuxSeries
lux.core.series.LuxSeries
=========================

.. currentmodule:: lux.core.series
Expand Down Expand Up @@ -149,6 +149,7 @@ lux.core.series.LuxSeries
~LuxSeries.searchsorted
~LuxSeries.sem
~LuxSeries.set_axis
~LuxSeries.set_flags
~LuxSeries.shift
~LuxSeries.skew
~LuxSeries.slice_shift
Expand Down Expand Up @@ -214,6 +215,8 @@ lux.core.series.LuxSeries
~LuxSeries.dtype
~LuxSeries.dtypes
~LuxSeries.empty
~LuxSeries.exported
~LuxSeries.flags
~LuxSeries.hasnans
~LuxSeries.iat
~LuxSeries.iloc
Expand All @@ -226,6 +229,7 @@ lux.core.series.LuxSeries
~LuxSeries.name
~LuxSeries.nbytes
~LuxSeries.ndim
~LuxSeries.recommendation
~LuxSeries.shape
~LuxSeries.size
~LuxSeries.values
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
lux.executor.SQLExecutor.SQLExecutor
lux.executor.SQLExecutor.SQLExecutor
====================================

.. currentmodule:: lux.executor.SQLExecutor
Expand All @@ -17,11 +17,21 @@ lux.executor.SQLExecutor.SQLExecutor
~SQLExecutor.compute_data_model
~SQLExecutor.compute_data_model_lookup
~SQLExecutor.compute_data_type
~SQLExecutor.compute_dataset_metadata
~SQLExecutor.compute_stats
~SQLExecutor.create_where_clause
~SQLExecutor.execute
~SQLExecutor.execute_2D_binning
~SQLExecutor.execute_aggregate
~SQLExecutor.execute_binning
~SQLExecutor.execute_filter
~SQLExecutor.execute_preview
~SQLExecutor.execute_sampling
~SQLExecutor.execute_scatter
~SQLExecutor.get_SQL_attributes
~SQLExecutor.get_cardinality
~SQLExecutor.get_filtered_size
~SQLExecutor.get_unique_values
~SQLExecutor.invert_data_type
~SQLExecutor.mapping
~SQLExecutor.reverseMapping
Expand Down
Loading