def example2():
my_svg = drawSVG.SVG({'width': 600})
my_svg.attributes['height'] = 400
# Adding child elements all at once
my_svg.addChildElement('Text', {
'id': 'text-1',
'x': 10,
'y': 15
}, 'This is a child')
my_svg.addChildElement('rect', {
'id': 'rect-1',
'x': 20,
'y': 25,
'width': 20,
'height': 25
})
# Adding a child element piecemeal
new_rect = drawSVG.SVG_Element('rect', {'id': 'rect-2', 'x': 100, 'y': 25})
new_rect.attributes['height'] = 50
new_rect.attributes['width'] = 80
my_svg.children.append(new_rect)
new_rect = drawSVG.SVG_Element('rect')
new_rect.attributes = {'id': 'rect-2', 'x': 100, 'y': 125}
new_rect.attributes['height'] = 50
new_rect.attributes['width'] = 80
my_svg.children.append(new_rect)
# Styling
my_svg.addStyle('rect', ('fill', 'green'), ('stroke-width', 2),
('stroke', 'black'))
def draw_chains_for_4x2():
""" Markov chain for four sets of two card types, e.g. AAAABBBB """
r = 25
dx = 100
width = 2 * r + 20 + dx * 4
height = 200
y = 100
svg = drawSVG.SVG({ 'width': width, 'height': height })
chain = Chain()
chain.add_node(r + 10, y, '4A4B')
chain.add_edge(0, 0)
chain.add_node(r + 10 + dx, y, '2A4B')
chain.add_edge(0, 1)
chain.add_edge(1, 1)
chain.add_node(r + 10 + dx * 2, y - dx / 2, '4B')
chain.add_node(r + 10 + dx * 2, y + dx / 2, '2A2B')
chain.add_edge(1, 2)
chain.add_edge(1, 3)
chain.add_edge(3, 3)
chain.add_node(r + 10 + dx * 3, y, '2B')
chain.add_edge(2, 4)
chain.add_edge(3, 4)
chain.add_node(r + 10 + dx * 4, y, 'End')
chain.add_edge(4, 5)
draw_chain(svg, chain, r)
svg.outputToFile('chain_1.svg')
def addRectElement():
""" Create an svg document containing a rectangle """
my_svg = drawSVG.SVG()
# Add the element: <rect x="20" y="25" width="20" height="25"/>
my_svg.addChildElement('rect', {'x':20, 'y':40, 'width':80, 'height':50})
return my_svg
def addRectElementInStages():
my_svg = drawSVG.SVG()
rect = my_svg.addChildElement('rect')
rect.attributes['x'] = 20
rect.attributes['y'] = 40
rect.attributes['width'] = 80
rect.attributes['height'] = 50
return my_svg
def addSVGAttributes():
""" Create an svg document with width=80, height=50 """
# Can pass attributes during initialisation
my_svg = drawSVG.SVG({'width':80})
# Or can (re)define later
my_svg.attributes['height'] = 50
my_svg.addChildElement('rect', {'width':200, 'height':200})
return my_svg
def addCSSStyling():
my_svg = drawSVG.SVG({'width': 200, 'height': 100})
my_svg.addStyle('rect', {
'fill': 'green',
'stroke-width': 2,
'stroke': 'black'
})
my_svg.addChildElement('rect', {
'x': 20,
'y': 40,
'width': 80,
'height': 50
})
my_svg.addChildElement('circle', {'cx': 120, 'cy': 40, 'r': 25})
return my_svg
def addRectElement():
""" Create an svg document containing a rectangle """
my_svg = drawSVG.SVG()
# Add the element: <rect x="20" y="25" width="20" height="25"/>
my_svg.addChildElement('rect', {
'x': 20,
'y': 40,
'width': 80,
'height': 50
})
my_svg.rect(x=20, y=100, width=80, height=50, fill='#0f0')
my_svg.rect(20, 160, fill='#0f0', width=80, height=50)
my_svg.rect(20, 220, 80, 50, fill='#f00')
return my_svg
def draw_chains_for_4A2B():
r = 25
dx = 100
dy = 60
width = 2 * r + 20 + dx * 3
height = 200
y = 100
svg = drawSVG.SVG({ 'width': width, 'height': height })
chain = Chain()
chain.add_node(r + 10, y, '4A4B')
chain.add_node(r + 10 + dx, y, '2A4B')
chain.add_edge(0, 1)
chain.add_node(r + 10 + dx * 2, y - dy, '1A4B')
chain.add_node(r + 10 + dx * 2, y + dy, '2A3B')
chain.add_edge(1, 2)
chain.add_edge(1, 3)
chain.add_edge(2, 1)
chain.add_edge(3, 1)
chain.add_node(r + 10 + dx * 3, y - dy, '4B')
chain.add_node(r + 10 + dx * 3, y + dy, '2A2B')
chain.add_edge(2, 4)
chain.add_edge(3, 5)
# chain.add_node(r + 10 + dx * 3, y, '2B')
# chain.add_edge(2, 4)
# chain.add_edge(3, 4)
# chain.add_node(r + 10 + dx * 4, y, 'End')
# chain.add_edge(4, 5)
draw_chain(svg, chain, r)
svg.addChildElement('text', {'class': 'numerator', 'x': r + 10 + dx/2, 'y': y - 7}, 'E(t) = 7/3')
svg.addChildElement('text', {'class': 'numerator', 'x': r + 10 + dx*2.5, 'y': y - dy - 7}, 'E(t) = 2')
svg.addChildElement('text', {'class': 'numerator', 'x': r + 10 + dx*2.5, 'y': y + dy - 7}, 'E(t) = 4')
draw_fraction(svg, r + 10 + dx * 1.6, y * 0.8, 1, 3)
draw_fraction(svg, r + 10 + dx * 1.6, y * 1.2, 2, 3)
draw_fraction(svg, r + 10 + dx * 1.3, y * 0.4, 4, 5)
draw_fraction(svg, r + 10 + dx * 1.3, y * 1.6, 2, 5)
svg.outputToFile('4A4B_chain_1.svg')
def draw_chains_for_4A4B():
r = 25
dx = 100
width = 2 * r + 20 + dx
height = 120
y = 88
svg = drawSVG.SVG({ 'width': width, 'height': height })
chain = Chain()
chain.add_node(r + 10, y, '4A4B')
chain.add_edge(0, 0)
chain.add_node(r + 10 + dx, y, '2A4B')
chain.add_edge(0, 1)
draw_fraction(svg, r + 10, y - 70, 4, 7)
draw_fraction(svg, r + 10 + dx / 2, y - 15, 3, 7)
draw_chain(svg, chain, r)
svg.outputToFile('4A4B_chain_1.svg')
def draw_chains_with_pairs():
width = 300
height = 200
dx = 100
dy = 100
svg = drawSVG.SVG({ 'width': width, 'height': height })
chain = Chain()
chain.add_node(50, 50, '2A')
chain.add_node(50 + dx, 50, 'End')
chain.add_edge(0, 1)
chain.add_node(50, 50 + dy, '2A2B')
chain.add_node(50 + dx, 50 + dy, '2B')
chain.add_node(50 + dx * 2, 50 + dy, 'End')
chain.add_edge(2, 2)
chain.add_edge(2, 3)
chain.add_edge(3, 4)
draw_chain(svg, chain, 24)
svg.outputToFile('chain_1.svg')
def simplestExample():
""" Create a valid svg document containing an empty svg element"""
my_svg = drawSVG.SVG()
return my_svg
def create_bar_chart(data, width=300, height=200, **kwargs):
svg = drawSVG.SVG({'viewBox': "0 0 {} {}".format(width, height)})
padding_top = 10
padding_right = 1
padding_left = 60
padding_base = 40
x1 = padding_left
x2 = width - padding_right
y1 = padding_top
y2 = height - padding_base
graph_width = x2 - x1
graph_height = y2 - y1
# Add styles
svg.addStyle('.axis', {'fill': 'none', 'stroke': 'black'})
svg.addStyle('.gridlines', {'fill': 'none', 'stroke': '#ccc'})
svg.addStyle('.bars text, .tick-labels', {'font-size': '0.9rem'})
svg.addStyle('.tick-labels-y', {
'text-anchor': 'end',
'dominant-baseline': 'middle'
})
svg.addStyle('.bars text, .tick-labels-x', {
'text-anchor': 'middle',
'dominant-baseline': 'hanging'
})
svg.addStyle('.y-axis-label', {
'text-anchor': 'middle',
'dominant-baseline': 'hanging'
})
svg.addStyle('.bars rect', {'fill': '#888', 'opacity': '0.6'})
svg.addStyle('.bars text', {'cursor': 'default'})
svg.addStyle('.bars g:hover *', {
'fill': 'rgb(255, 0, 175)',
'opacity': '0.95'
})
svg.addStyle(
'.bars g text.hidden-value', {
'dominant-baseline': 'alphabetic',
'visibility': 'hidden',
'font-size': '0.7rem'
})
svg.addStyle('.bars g:hover text.hidden-value', {
'visibility': 'visible',
'fill': 'black',
'cursor': 'default'
})
# Create groups for adding elements to
gridlines = svg.add('g', {'class': 'gridlines'})
bars = svg.add('g', {'class': 'bars'})
tick_labels_y = svg.add('g', {'class': 'tick-labels tick-labels-y'})
# Draw gridlines and y-axis labels
min_value = 0
max_value = max(item[1] for item in data)
tick_size, min_value, max_value = get_tick_size(min_value, max_value, 8)
num_ticks = int(round((max_value * 1.05 - min_value) / tick_size))
y_scale = lambda y: y2 - graph_height * y / max_value
for i in range(0, num_ticks + 1):
value = i * tick_size
y = round(y_scale(value)) - 0.5
if i > 0:
gridlines.add('path', {'d': "M{} {}H{}".format(x1, y, x2)})
if kwargs.get('format_y_ticks'):
value = kwargs['format_y_ticks'](value)
tick_labels_y.add('text', {'x': x1 - 4, 'y': y}, value)
# Add y-axis label
y_axis_label = kwargs.get('y_axis_label')
if y_axis_label:
transform = "translate({} {}) rotate(-90)".format(
2, (y_scale(num_ticks * tick_size / 2)))
svg.add('text', {
'class': 'y-axis-label',
'transform': transform
}, y_axis_label)
# Add x-axis label
x_axis_label = kwargs.get('x_axis_label')
if x_axis_label:
svg.add('text', {
'class': 'tick-labels-x',
'x': (x1 + x2) / 2,
'y': height - 16
}, x_axis_label)
# Add bars
gap = 1
bar_width = floor((graph_width - 4) / len(data))
bar_x = x1 + (graph_width - bar_width * len(data)) / 2
bar_width -= gap
for i, (name, value) in enumerate(data):
y = round(y_scale(value))
group = bars.add('g', {'class': 'bar-group'})
group.add('rect', {
'x': bar_x,
'y': y,
'width': bar_width,
'height': y2 - y
})
if bar_width > 20 or i % 3 == 0:
group.add('text', {'x': bar_x + bar_width / 2, 'y': y2 + 6}, name)
if kwargs.get('format_bar_value'):
value = kwargs['format_bar_value'](value)
group.add('text', {
'class': 'hidden-value',
'x': bar_x + bar_width / 2,
'y': y - 2
}, value)
bar_x += bar_width + gap
# Draw axes
path = 'M{} {} H{}'.format(x1 - 0.5, y2 + 0.5, x2)
svg.add('path', {'d': path, 'class': 'axis'})
return svg
'e': 9,
'a': 1,
'x': 7,
'o': 3,
'i': 1,
'u': 1
}
}
max_value = max(
max(count for letter, count in letter_counts.items() if letter != 'total')
for letter_counts in counts.values())
width = 405
height = 405
svg = drawSVG.SVG({'viewBox': "0 0 {} {}".format(width, height)})
box_size = floor(width / 27)
header_size = box_size + (width - 27 * box_size) * 0.5
svg.addStyle(
'text', {
'text-anchor': 'middle',
'dominant-baseline': 'middle',
'font-size': f"{floor(box_size * 0.9)}px"
})
svg.addStyle('.gridline', {'stroke-width': 1, 'stroke': '#888'})
svg.add(
'line', {
'class': 'gridline',
def create_bar_chart(data,
width=300,
height=200,
x_axis_label=None,
y_axis_label=None):
svg = drawSVG.SVG({'viewBox': "0 0 {} {}".format(width, height)})
padding_top = 10
padding_right = 1
padding_left = 50
padding_base = 40
x1 = padding_left
x2 = width - padding_right
y1 = padding_top
y2 = height - padding_base
graph_width = x2 - x1
graph_height = y2 - y1
# Add styles
svg.addStyle('.axis', {'fill': 'none', 'stroke': 'black'})
svg.addStyle('.gridlines', {'fill': 'none', 'stroke': '#ccc'})
svg.addStyle('.tick-labels', {'font-size': '0.9rem'})
svg.addStyle('.tick-labels-y', {
'text-anchor': 'end',
'dominant-baseline': 'middle'
})
svg.addStyle('.tick-labels-x', {
'text-anchor': 'middle',
'dominant-baseline': 'hanging'
})
svg.addStyle('.y-axis-label', {
'text-anchor': 'middle',
'dominant-baseline': 'hanging'
})
svg.addStyle('.dots circle', {'fill': '#888', 'opacity': '0.6'})
svg.addStyle('.bars rect:hover', {
'fill': 'rgb(255, 0, 175)',
'opacity': '0.95'
})
# Create groups for adding elements to
gridlines = svg.add('g', {'class': 'gridlines'})
dots = svg.add('g', {'class': 'dots'})
tick_labels_y = svg.add('g', {'class': 'tick-labels tick-labels-y'})
bar_labels = svg.add('g', {'class': 'tick-labels tick-labels-x'})
# Draw gridlines and y-axis labels
min_value = min(min(item['values']) for item in data)
max_value = max(max(item['values']) for item in data)
# Calculate tick size and number
tick_size, min_value, max_value = get_tick_size(min_value, max_value, 8)
num_ticks = int(round((max_value * 1.05 - min_value) / tick_size))
y_scale = lambda y: y2 - graph_height * (y - min_value) / (max_value -
min_value)
for i in range(0, num_ticks + 1):
value = min_value + i * tick_size
y = round(y_scale(value)) - 0.5
print(value, y)
if i > 0:
gridlines.add('path', {'d': "M{} {}H{}".format(x1, y, x2)})
tick_labels_y.add('text', {
'x': x1 - 4,
'y': y
}, "{0:.0f}".format(value))
# Add y-axis label
if y_axis_label:
transform = "translate({} {}) rotate(-90)".format(
2, (y2 - y_scale(num_ticks * tick_size)) / 2)
svg.add('text', {
'class': 'y-axis-label',
'transform': transform
}, y_axis_label)
# Add x-axis label
if x_axis_label:
svg.add('text', {
'class': 'tick-labels-x',
'x': (x1 + x2) / 2,
'y': height - 16
}, x_axis_label)
# Add bars
gap = 1
r = 5
bar_width = floor((graph_width - 4) / len(data))
bar_x = x1 + (graph_width - bar_width * len(data)) / 2 + bar_width / 2
bar_width -= gap
for i, item in enumerate(data):
for value in item['values']:
y = round(y_scale(value))
dots.add('circle', {'cx': bar_x, 'cy': y, 'r': r})
if bar_width > 20 or i % 2:
bar_labels.add('text', {'x': bar_x, 'y': y2 + 6}, item['name'])
bar_x += bar_width + gap
# Draw axes
path = 'M{} {} H{}'.format(x1 - 0.5, y2 + 0.5, x2)
svg.add('path', {'d': path, 'class': 'axis'})
return svg