The main operating principle for vdom
(virtual DOM) is:
Write functions that return
vdom
elements
In matching with React
parlance, we'll call these functions components. This allows you
to share, remix, and use components amongst everyone. You'll be able to compose together
components to create greater components than you have before.
We'll start with a component that takes a level of happiness and produces a light visualization:
from vdom.helpers import div, span, p, meter
def happiness(level=90):
smiley = "馃槂"
percent = level / 100.
if(percent < 0.25):
smiley = "鈽癸笍"
elif(percent < 0.50):
smiley = "馃槓"
elif(percent < 0.75):
smiley = "馃榾"
return span(
p('Happiness ', smiley),
meter(level, min=0, low=25, high=75, optimum=90, max=100, value=level)
)
The user of the component only needs to call it with a level of happiness from 0 to 100.
happiness(96)
Happiness 馃槂
96馃帀 Our first component is ready! Since we can think of happiness
as a little building block component,
we can put several of these together to create whole layouts:
div(
happiness(10),
happiness(32),
happiness(65),
happiness(80)
)
Happiness
Happiness 馃槓
32Happiness 馃榾
65Happiness 馃槂
80For this section, you'll need ggplot
and matplotlib
packages installed. We'll create a component,
fancy_hist
, that creates a histogram which allows for displaying side by side:
import matplotlib.pyplot as plt
import io, base64, urllib
from ggplot import mpg
from vdom.helpers import div, span, p, h1, img
def fancy_hist(value, data=mpg, title="Plot", bins=12, style=None):
if(style is None):
style = {"display": "inline-block"}
f = plt.figure()
plt.hist(value, bins=bins, data=data)
buf = io.BytesIO()
f.savefig(buf, format='png')
buf.seek(0)
string = base64.b64encode(buf.read())
plt.close()
return div(
h1(title),
p(str(bins), " bins"),
img(src='data:image/png;base64,' + urllib.parse.quote(string)),
style=style
)
fancy_hist('cty', data=mpg, title="City MPG")
div(
fancy_hist('hwy', data=mpg, title="Highway MPG"),
fancy_hist('cty', data=mpg, title="City MPG")
)