XLM Continued¶

Recall last week's XML notebook¶

http://www.acsu.buffalo.edu/~danet/Sp18/MTH448/class8/class8_files/read_xml.html

Let's continue studying svg images¶

SVG for vector graphics (Example: simple.svg)

which displays the xml code

# <svg
#   xmlns="http://www.w3.org/2000/svg"
#   width="100" height="100">
#  <circle cx="50" cy="50" r="40" stroke="gray" stroke-width="8" fill="#77cc77" />
#</svg>

Here, the outer parent defines an svg object¶

The svg has attributes:

xmlns - xml name space - avoids naming conflicts (see https://www.w3schools.com/xml/xml_namespaces.asp)
width
height

The svg also has an element:

circle

The circle has attributes:

cx - x coordinate
cy - y coordinate
r - radius
stroke - gray border line
stroke width - border lin width 8
fill - color green

XML Exercise 1¶

Write a python function that creates an svg and places circles at random locations, gives them random sizes and random colors.

You may want to incorporate the following code snippets:

# write an svg

s1 = '<svg xmlns="http://www.w3.org/2000/svg" width="600" height="200">'
s2 ='<circle cx="50" cy="50" r="40" stroke="gray" stroke-width="1" fill="#E9D40E" />'
s3 = '</svg>'

# This writes an svg
with open('my_svg.svg','w') as f:
    f.write(s1+'\n')
    f.write(s2+'\n')
    f.write(s3+'\n')

from IPython.display import SVG, display
display(SVG('my_svg.svg'))

#random integers 
from random import *
a_random_number = randint(0, 100)
print(a_random_number)


#random hexidecimal numbers
def gen_hex_colour_code():
   return ''.join([choice('0123456789ABCDEF') for x in range(6)])
a= gen_hex_colour_code()
print(a)

65
751B34

# ANSWER
s1 = '<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500">'
s3 = '</svg>'

# This writes an svg
with open('my_svg.svg','w') as f:
    f.write(s1+'\n')
    for i in range(0,9):
        s2 ='<circle cx=" '+ str(randint(0,1000))+' " cy="50" r="40" stroke="gray" stroke-width="1" fill="#E9D40E" />'

        s2 ='<circle cx="'+str(randint(0,1000))+'" cy="'+str(randint(0, 500))+'" r="'+str(randint(0, 90))+'" stroke="black" stroke-width="'+str(randint(0, 20))+'" fill="#'+str(gen_hex_colour_code())+'" />'
        f.write(s2+'\n')
    f.write(s3+'\n')

from IPython.display import SVG, display
display(SVG('my_svg.svg'))

XML Exercise 2¶

Part A: Write your own XML dialect and create a dataset¶

Type an XML document of your own invention from scratch by hand (in notepad, text edit, or submline, etc).

Let's say you want to record a stream of notes from you to yourself. Or a set of any other kind of objects - you can choose anything you like.

Invent an appropriate set of tags for the task.

See discussion: attributes vs. nested elements

Part B: Write an XML parser using lxml.etree¶

Illustrate it works by extracting information from your XML document.

See http://lxml.de/tutorial.html for help

I recommend using:

For help, consider the following code for studying the svg 'simple.svg'

Recall its structure:

# <svg
#   xmlns="http://www.w3.org/2000/svg"
#   width="100" height="100">
#  <circle cx="50" cy="50" r="40" stroke="gray" stroke-width="8" fill="#77cc77" />
#</svg>

from lxml import etree

#open svg and read data an xml
with open('simple.svg') as f: 
    doc = etree.fromstring( f.read() )

print(doc.tag)
print(doc.attrib['height'])
print(doc.attrib['width'])

{http://www.w3.org/2000/svg}svg
100
100

for item in doc:
    print(item.tag)

{http://www.w3.org/2000/svg}circle

for item in doc:
    print(item.attrib['cx'])
    print(item.attrib['stroke'])

50
gray

Now that you have a sense for how this works, use these to study your own xml datafile.

Part C: How would this look in JSON?¶

How would the above all work using JSON instead of XML? Replicate Exercise 2A with JSON (manually type the analogous json document, and parse it with python).