En el siguiente tutorial en Español veremos como crear gráficas al estilo de MATLAB, desde lo más básico como editar el estilo de nuestras gráficas hasta crear animaciones, crear graficos 3D e incluso crear interfaces de usuario (UI) para crear verdaderas aplicaciones interactivas.

1. TUTORIAL DE MATPLOTLIB
Universidad Nacional de
Colombia
M a t e r i a l d e ap o y o e l a b o r a d o c o m o a p o y o a
la materia
Métodos Numéricos
D i e g o C a m i l o P e ñ a Ra m í r e z ( d o c e n t e )
Twitter: @nervencid
1

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
●
2

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
●
3

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.
4

5. MATPLOTLIB
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].
5

6. MATPLOTLIB
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'
6

7. INTRUCCIÓN A PYPLOT
PYPLOT 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.
7

8. INTRUCCIÓN A PYPLOT
8

9. INTRUCCIÓN A PYPLOT
Al ejecutar el programa (F5) deberíamos obtener el siguiente
resultado:
9

10. INTRUCCIÓN A PYPLOT
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.
1
0

11. INTRUCCIÓN A PYPLOT
'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..
1
1

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'
1
2

13. CREACIÓN DE MULTIPLES
GRAFICAS (Subplot)
1
3

14. CREACIÓN DE MULTIPLES
GRAFICAS (Subplot)
1
4

15. CREACIÓN DE MULTIPLES
GRAFICAS (Subplot)
1
5

16. CREACIÓN DE MULTIPLES
GRAFICAS (Subplot)
Así debería verse
el resultado en
pantalla.
1
6

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:
1
7

18. CREACIÓN DE MULTIPLES
GRAFICAS (Subplot)
1
8

19. CREACIÓN DE MULTIPLES
GRAFICAS (Subplot)
1
9

20. CREACIÓN DE MULTIPLES
GRAFICAS (Subplot)
2
0

21. CREACIÓN DE MULTIPLES
GRAFICAS (Subplot)
2
1

22. CREACIÓN DE MULTIPLES
GRAFICAS (Subplot)
El resultado debería verse así:
2
2

23. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Podemos editar las propiedades estéticas de una figura,
por ejemplo si tenemos algo así:
2
3

24. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Que se ve así:
2
4

25. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Cambiamos la apariencia modificando esta linea:
Por esta linea:
2
5

26. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Ahora debería verse así:
2
6

27. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Ahora añadamos algo de texto, ANTES de esta linea:
Agregamos lo siguiente:
2
7

28. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Ahora debería verse así:
2
8

29. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Con la siguiente linea:
2
9

30. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Lo cual añadirá el titulo a la parte superior de la grafica:
3
0

31. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Con el siguiente código:
3
1

32. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Añadimos una pequeña ecuación en formato LATEX:
3
2

33. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Y con el siguiente código:
3
3

34. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Añadimos una segunda ecuación en formato LATEX:
3
4

35. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Existen otras formas de agregar anotaciones a nuestra
gráfica como por ejemplo:
3
5

36. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Lo cual añadirá una anotación (con la flecha incluida) a
nuestra gráfica:
3
6

37. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
La gráfica se vera finalmente así:
3
7

38. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
¡NO OLVIDEMOS ESTE código AL FINAL de nuestro
archivo '.py'!:
3
8

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'):
3
9

40. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Deberíamos tener el siguiente resultado:
4
0

41. EDITANDO LAS PROPIEDADES
DE LAS GRAFICAS
Deberíamos tener el siguiente resultado:
4
1

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')
4
2

43. MANEJO DE EVENTOS: Picking
4
3

44. MANEJO DE EVENTOS: Picking
4
4

45. MANEJO DE EVENTOS: Picking
4
5

46. MANEJO DE EVENTOS: Picking
4
6

47. MANEJO DE EVENTOS: Picking
En pantalla deberíamos ver algo así:
4
7

48. MANEJO DE EVENTOS: Picking
Y en la consola deberíamos ver esto al hacer click sobre los
puntos de la gráfica:
4
8

49. MANEJO DE EVENTOS: Dragg
4
9

50. MANEJO DE EVENTOS: Dragg
5
0

51. MANEJO DE EVENTOS: Dragg
5
1

52. MANEJO DE EVENTOS: Dragg
5
2

53. MANEJO DE EVENTOS: Dragg
5
3

54. MANEJO DE EVENTOS: Dragg
5
4

55. MANEJO DE EVENTOS: Dragg
5
5

56. MANEJO DE EVENTOS: Dragg
En pantalla deberíamos ver algo así:
5
6

57. MANEJO DE EVENTOS: Dragg
Y deberíamos arrastrar los rectángulos al hacer click sobre ellos:
5
7

58. MANEJO DE EVENTOS: Dragg
Y en la consola deberíamos ver algo así:
5
8

59. MANEJO DE EVENTOS: Hover
('mouse enter and leave')
5
9

60. MANEJO DE EVENTOS: Hover
('mouse enter and leave')
6
0

61. MANEJO DE EVENTOS: Hover
('mouse enter and leave')
En pantalla deberíamos ver algo así:
6
1

62. MANEJO DE EVENTOS: Hover
('mouse enter and leave')
Al pasar el mouse sobre las figuras deberíamos ver esto:
6
2

63. MANEJO DE EVENTOS: Hover
('mouse enter and leave')
Y en la consola deberíamos ver esto:
6
3

64. ANIMACIONES
6
4

65. ANIMACIONES
6
5

66. ANIMACIONES
6
6

67. ANIMACIONES
En pantalla deberíamos ver algo así:
6
7

68. Plot 3D
6
8

69. Plot 3D
6
9

70. Plot 3D
7
0

71. Plot 3D
En pantalla deberíamos ver algo así:
7
1

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...
7
2

73. Creación de Interfaces de Usuarios
(UI): Widgets
7
3

74. Creación de Interfaces de Usuarios
(UI): Widgets
7
4

75. Creación de Interfaces de Usuarios
(UI): Widgets
7
5

76. Creación de Interfaces de Usuarios
(UI): Widgets
7
6

77. Creación de Interfaces de Usuarios
(UI): Widgets
7
7

78. Creación de Interfaces de Usuarios
(UI): Widgets
7
8

79. Creación de Interfaces de Usuarios
(UI): Widgets
7
9

80. Creación de Interfaces de Usuarios
(UI): Widgets
8
0

81. Creación de Interfaces de Usuarios
(UI): Widgets
8
1

82. Creación de Interfaces de Usuarios
(UI): Widgets
8
2

83. Creación de Interfaces de Usuarios
(UI): Widgets
Finalmente este es el resultado que deberíamos ver en pantalla:
8
3

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.
8
4

85. Creación de Interfaces de Usuarios
(UI): Tkinter
8
5

86. Creación de Interfaces de Usuarios
(UI): Tkinter
8
6

87. Creación de Interfaces de Usuarios
(UI): Tkinter
8
7

88. Creación de Interfaces de Usuarios
(UI): Tkinter
8
8

89. Creación de Interfaces de Usuarios
(UI): Tkinter
8
9

90. Creación de Interfaces de Usuarios
(UI): Tkinter
9
0

91. Creación de Interfaces de Usuarios
(UI): Tkinter
9
1

92. Creación de Interfaces de Usuarios
(UI): Tkinter
9
2

93. Creación de Interfaces de Usuarios
(UI): Tkinter
9
3

94. Creación de Interfaces de Usuarios
(UI): Tkinter
9
4

95. Creación de Interfaces de Usuarios
(UI): Tkinter
9
5

96. Creación de Interfaces de Usuarios
(UI): Tkinter
9
6

97. Creación de Interfaces de Usuarios
(UI): Tkinter
9
7

98. Creación de Interfaces de Usuarios
(UI): Tkinter
9
8

99. Creación de Interfaces de Usuarios
(UI): Tkinter
9
9

100. Creación de Interfaces de Usuarios
(UI): Tkinter
1
0

101. Creación de Interfaces de Usuarios
(UI): Tkinter
1
0

102. Creación de Interfaces de Usuarios
(UI): Tkinter
1
0

103. Creación de Interfaces de Usuarios
(UI): Tkinter
1
0

104. Creación de Interfaces de Usuarios
(UI): Tkinter
Finalmente este es el resultado que deberíamos ver en pantalla:
1
0

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/PyGObject
http://zetcode.com/tutorials/pyqt4/
http://qt-project.org/wiki/Category:LanguageBindings::PyS
ide
http://www.zonaqt.com/content/introducci%C3%B3n-practi
ca-qt-en-python
1
0

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
1
0

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írez
Bogotá, Colombia
Abril de 2013
Twitter: @nervencid
1
0