tutorial de matplotlib

1

Universidad Nacional de Colombia

Material de apoyo e laborado como apoyo a la materia

Métodos Numéricos

Diego Camilo Peña Ramírez (docente)

Twitter: @nervencid

TUTORIAL DE MATPLOTLIB

2

CONTENIDO

● INTRODUCCION● MATPLOTLIB● INTRODUCCIÓN A PYPLOT● CREACIÓN DE MULTIPLES GRAFICAS (Subplot)● EDITANDO PROPIEDADES DE LAS GRAFICAS● MANEJO DE EVENTOS● MANEJO DE EVENTOS: Picking● MANEJO DE EVENTOS: Dragg● MANEJO DE EVENTOS: Hover ('mouse enter and

leave')● ANIMACIONES

3

CONTENIDO

● PLOT 3D● CREACIÓN DE INTERFACES DE USUARIO (UI)● CREACIÓN DE INTERFACES DE USUARIO (UI):

Widgets● CREACIÓN DE INTERFACES DE USUARIO (UI):

Tkinter● Otras Interfaces de usuario (UI)● BIBLIOGRAFIA● SOBRE EL AUTOR Y EL CONTENIDO

4

INTRODUCCIÓN

Como hemos podido darnos cuenta Python es una herramienta muy completa y autónoma; ya que nos permite hacer varias actividades sin depender de librerías externas o software de terceros. Sin embargo para aplicaciones más especializadas como lo son por ejemplo: análisis matemáticos, hacer gráficas de funciones o resolver ecuaciones, debemos acudir a librerías externas de terceros.

A continuación haremos una breve introducción a estas librerías que al igual que Python son de código abierto y nos dan prestación que no podemos lograr en otros lenguajes programación.

5

Matplotlib es una librería de código abierto creada por el fallecido John Hunter(1968-2012), la cual posee un conjunto de herramientas para poder hacer gráficas en 2D y 3D, como alternativa a MATLAB en cuanto a creación de gráficos, recientemente se le a añadido la posibilidad de interaccionar con librerías como qt, Gtk, entre otras para poder hacer interfaces de usuario personalizadas [1].

MATPLOTLIB

6

MATPLOTLIB esta compuesta de tres elementos fundamentales [2]:

PYLAB: Es un conjunto de funciones que permiten crear gráficas (plot's ) similares a los de MATLAB.

MATPLOTLIB API: Es una interfaz que contiene clases que crean y gestionan imágenes, textos, figuras y plot's.

BACKEND: Nos permite extender MATPLOTLIB a otras funcionalidades 'extra', como por ejemplo exportar a archivos 'PNG, PDF, SVG, etc...' o crear interfaces de usuarios con librerías especializadas como 'wxpython' o 'pygtk'

MATPLOTLIB

7

INTRUCCIÓN A PYPLOTPYPLOT es un conjunto de comandos que permiten trabajar de manera similar a MATLAB, cada funcion de 'pyplot', genera algún tipo de cambio en la figura como por ejemplo: decorar la figura, agregar texto, crear graficas secundarias, etc...[2]

Para el siguiente ejercicio cree un nuevo archivo '.py' bien sea utilizando el editor integrado en Python o el entorno de desarrollo de su preferencia.

8

INTRUCCIÓN A PYPLOT

9

Al ejecutar el programa (F5) deberíamos obtener el siguiente resultado:

INTRUCCIÓN A PYPLOT

10

Notese que 'Matplotlib' genera su propia ventana la cual por lo general posee una barra de herramientas en la parte inferior los cuales son:

'Home': Renderiza la gráfica a sus configuraciones originales deshaciendo operaciones de 'zoom' y/o 'paneo'.

'Back-Forward': Nos permite retroceder o avanzar entre las operaciones de 'zoom' y/o 'paneo', para poder navegar entre las vistas generadas por dichas operaciones.

INTRUCCIÓN A PYPLOT

11

'Pan': Permite movernos en (x, y) a través de la grafica.

'Zoom': Permite ampliar zonas de la figura para poderlas ver con más detalle.

'Configure sobplots': Con esta herramienta podemos configurar manualmente parámetros de las graficas como: altura, anchura, espacios laterales, etc...

'Save': Nos permite exportar la imagen a formato de imagen como: raw, png, pdf, poscript, etc..

INTRUCCIÓN A PYPLOT

12

CREACIÓN DE MULTIPLES GRAFICAS (Subplot)

MATPLOTLIB nos permite trabajar con varias gráficas en una sola ventana, a continuación crearemos dos gráficas,por lo que sera necesario crear un nuevo archivo con extensión '.py'

13

CREACIÓN DE MULTIPLES GRAFICAS (Subplot)

14

CREACIÓN DE MULTIPLES GRAFICAS (Subplot)

15

CREACIÓN DE MULTIPLES GRAFICAS (Subplot)

16

CREACIÓN DE MULTIPLES GRAFICAS (Subplot)

Así debería verse el resultado en pantalla.

17

CREACIÓN DE MULTIPLES GRAFICAS (Subplot)

Ahora supongamos que necesitamos DEMASIADAS graficas, las cuales cuales no podrían verse bien en una sola ventana, lo cual nos obligaría a crear una segunda ventana, creamos un nuevo archivo '.py' y escribimos el siguiente codigo:

18

CREACIÓN DE MULTIPLES GRAFICAS (Subplot)

19

CREACIÓN DE MULTIPLES GRAFICAS (Subplot)

20

CREACIÓN DE MULTIPLES GRAFICAS (Subplot)

21

CREACIÓN DE MULTIPLES GRAFICAS (Subplot)

22

CREACIÓN DE MULTIPLES GRAFICAS (Subplot)

El resultado debería verse así:

23

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Podemos editar las propiedades estéticas de una figura, por ejemplo si tenemos algo así:

24

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Que se ve así:

25

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Cambiamos la apariencia modificando esta linea:

Por esta linea:

26

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Ahora debería verse así:

27

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Ahora añadamos algo de texto, ANTES de esta linea:

Agregamos lo siguiente:

28

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Ahora debería verse así:

29

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Con la siguiente linea:

30

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Lo cual añadirá el titulo a la parte superior de la grafica:

31

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Con el siguiente código:

32

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Añadimos una pequeña ecuación en formato LATEX:

33

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Y con el siguiente código:

34

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Añadimos una segunda ecuación en formato LATEX:

35

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Existen otras formas de agregar anotaciones a nuestra gráfica como por ejemplo:

36

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Lo cual añadirá una anotación (con la flecha incluida) a nuestra gráfica:

37

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

La gráfica se vera finalmente así:

38

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

¡NO OLVIDEMOS ESTE código AL FINAL de nuestro archivo '.py'!:

39

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Otra forma de es introducir un 'legend', para el siguiente ejemplo (No olvide crear un nuevo archivo '.py'):

40

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Deberíamos tener el siguiente resultado:

41

EDITANDO LAS PROPIEDADES DE LAS GRAFICAS

Deberíamos tener el siguiente resultado:

42

MANEJO DE EVENTOS

Como lo mencionamos anteriormente MATPLOTLIB puede interaccionar con librerías externas como Gtk para poder desarrollar aplicaciones más complejas, para esto se provee de una API que permite trabajar con eventos comunes como hacer click en partes determinadas sobre la gráfica (picking),el movimientos del mouse sobre áreas predeterminadas ('mouse enter and leave'), arrastrar objetos ('Dragg'), etc...

A continuación crearemos archivos '.py' para los ejemplos que vamos a implementar:● Picking.py● Dragg.py● Hover.py ('mouse enter and leave')

43

MANEJO DE EVENTOS: Picking

44

MANEJO DE EVENTOS: Picking

45

MANEJO DE EVENTOS: Picking

46

MANEJO DE EVENTOS: Picking

47

MANEJO DE EVENTOS: Picking

En pantalla deberíamos ver algo así:

48

MANEJO DE EVENTOS: PickingY en la consola deberíamos ver esto al hacer click sobre los puntos de la gráfica:

49

MANEJO DE EVENTOS: Dragg

50

MANEJO DE EVENTOS: Dragg

51

MANEJO DE EVENTOS: Dragg

52

MANEJO DE EVENTOS: Dragg

53

MANEJO DE EVENTOS: Dragg

54

MANEJO DE EVENTOS: Dragg

55

MANEJO DE EVENTOS: Dragg

56

MANEJO DE EVENTOS: Dragg

En pantalla deberíamos ver algo así:

57

MANEJO DE EVENTOS: Dragg

Y deberíamos arrastrar los rectángulos al hacer click sobre ellos:

58

MANEJO DE EVENTOS: Dragg

Y en la consola deberíamos ver algo así:

59

MANEJO DE EVENTOS: Hover ('mouse enter and leave')

60

MANEJO DE EVENTOS: Hover ('mouse enter and leave')

61

MANEJO DE EVENTOS: Hover ('mouse enter and leave')

En pantalla deberíamos ver algo así:

62

MANEJO DE EVENTOS: Hover ('mouse enter and leave')

Al pasar el mouse sobre las figuras deberíamos ver esto:

63

MANEJO DE EVENTOS: Hover ('mouse enter and leave')

Y en la consola deberíamos ver esto:

64

ANIMACIONES

65

ANIMACIONES

66

ANIMACIONES

67

ANIMACIONES

En pantalla deberíamos ver algo así:

68

Plot 3D

69

Plot 3D

70

Plot 3D

71

Plot 3D

En pantalla deberíamos ver algo así:

72

Creación de Interfaces de Usuarios (UI)

Una de las características más interesantes recientemente implementadas dentro de MATPLOTLIB, es la capacidad de crear interfaces de usuario, permitiéndonos así crear aplcaciónes mucho más interactivas.

MATPLOTLIB posee dentro de sí la librería 'widgets', que nos permite crear controles de usuario básico controles de interfaz de usuario como por ejemplo: botones, 'sliders', 'checkbuttons', 'menus', etc...

Sin embargo AUNQUE SU ESTABILIDAD NO ESTA GARANTIZADA, MATPLOTLIB también puede servirse de librerias de terceros como qt, tkinter, gtk, etc...

73

Creación de Interfaces de Usuarios (UI): Widgets

74

Creación de Interfaces de Usuarios (UI): Widgets

75

Creación de Interfaces de Usuarios (UI): Widgets

76

Creación de Interfaces de Usuarios (UI): Widgets

77

Creación de Interfaces de Usuarios (UI): Widgets

78

Creación de Interfaces de Usuarios (UI): Widgets

79

Creación de Interfaces de Usuarios (UI): Widgets

80

Creación de Interfaces de Usuarios (UI): Widgets

81

Creación de Interfaces de Usuarios (UI): Widgets

82

Creación de Interfaces de Usuarios (UI): Widgets

83

Creación de Interfaces de Usuarios (UI): Widgets

Finalmente este es el resultado que deberíamos ver en pantalla:

84

Creación de Interfaces de Usuarios (UI): Tkinter

Tkinter es una librería integrada en Python que nos permite crear interfaces de usuario como alternativa a las librerías de 'matplotlib', en caso de que deseemos desarrollar interfaces de usuario más complejas y que se acerquen a una aplicación de escritorio comun.A continuación haremos un ejemplo similar al ejemplo anterior hecho con 'matplotlib', para mostrar las diferencias e cuanto sintaxis.

85

Creación de Interfaces de Usuarios (UI): Tkinter

86

Creación de Interfaces de Usuarios (UI): Tkinter

87

Creación de Interfaces de Usuarios (UI): Tkinter

88

Creación de Interfaces de Usuarios (UI): Tkinter

89

Creación de Interfaces de Usuarios (UI): Tkinter

90

Creación de Interfaces de Usuarios (UI): Tkinter

91

Creación de Interfaces de Usuarios (UI): Tkinter

92

Creación de Interfaces de Usuarios (UI): Tkinter

93

Creación de Interfaces de Usuarios (UI): Tkinter

94

Creación de Interfaces de Usuarios (UI): Tkinter

95

Creación de Interfaces de Usuarios (UI): Tkinter

96

Creación de Interfaces de Usuarios (UI): Tkinter

97

Creación de Interfaces de Usuarios (UI): Tkinter

98

Creación de Interfaces de Usuarios (UI): Tkinter

99

Creación de Interfaces de Usuarios (UI): Tkinter

100

Creación de Interfaces de Usuarios (UI): Tkinter

101

Creación de Interfaces de Usuarios (UI): Tkinter

102

Creación de Interfaces de Usuarios (UI): Tkinter

103

Creación de Interfaces de Usuarios (UI): Tkinter

104

Creación de Interfaces de Usuarios (UI): Tkinter

Finalmente este es el resultado que deberíamos ver en pantalla:

105

Otras Interfaces de Usuarios (UI) Existen muchas más librerías de terceros para crear interfaces de usuario como wxWidgets, Gtk+, Qt, etc... sin embargo algunas no son lo suficientemente estables o no están bien soportadas por sus creadores para más documentación consultar:

http://www.wxpython.org/http://www.pygtk.org/https://live.gnome.org/PyGObjecthttp://zetcode.com/tutorials/pyqt4/http://qt-project.org/wiki/Category:LanguageBindings::PySidehttp://www.zonaqt.com/content/introducci%C3%B3n-practica-qt-en-python

106

BIBLIOGRAFIA

[1] http://matplotlib.org/[2] http://matplotlib.org/users/pyplot_tutorial.html[3] http://matplotlib.org/examples/index.html[4] http://matplotlib.org/gallery.html

107

SOBRE EL AUTOR Y EL CONTENIDO

A menos que se informe de otra manera esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-CompartirIgual 2.5

Colombia.

Diego Camilo Peña RamírezBogotá, Colombia

Abril de 2013

Twitter: @nervencid