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

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

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

ya que nos permite hacer varias actividades sin depender de librerías externas o software de terceros.INTRODUCCIÓN Como hemos podido darnos cuenta Python es una herramienta muy completa y autónoma. 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 . debemos acudir a librerías externas 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.

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

SVG. figuras y plot's. textos. como por ejemplo exportar a archivos 'PNG.. etc. MATPLOTLIB API: Es una interfaz que contiene clases que crean y gestionan imágenes.' o crear interfaces de usuarios con librerías especializadas como 'wxpython' o 'pygtk' 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. PDF. BACKEND: Nos permite extender MATPLOTLIB a otras funcionalidades 'extra'..

7 .INTRUCCIÓN A PYPLOT PYPLOT es un conjunto de comandos que permiten trabajar de manera similar a MATLAB. genera algún tipo de cambio en la figura como por ejemplo: decorar la figura. cada funcion de 'pyplot'. agregar texto. crear graficas secundarias..py' bien sea utilizando el editor integrado en Python o el entorno de desarrollo de su preferencia. etc..[2] Para el siguiente ejercicio cree un nuevo archivo '.

INTRUCCIÓN A PYPLOT 8 .

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

1 0 .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'. para poder navegar entre las vistas generadas por dichas operaciones. 'Back-Forward': Nos permite retroceder o avanzar entre las operaciones de 'zoom' y/o 'paneo'.

etc. pdf.. etc. 1 1 . poscript. anchura. 'Zoom': Permite ampliar zonas de la figura para poderlas ver con más detalle. png.INTRUCCIÓN A PYPLOT 'Pan': Permite movernos en (x.. 'Configure sobplots': Con esta herramienta podemos configurar manualmente parámetros de las graficas como: altura. y) a través de la grafica.. 'Save': Nos permite exportar la imagen a formato de imagen como: raw. espacios laterales.

a continuación crearemos dos gráficas.CREACIÓN DE MULTIPLES GRAFICAS (Subplot) MATPLOTLIB nos permite trabajar con varias gráficas en una sola ventana.por lo que sera necesario crear un nuevo archivo con extensión '.py' 1 2 .

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

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

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

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

CREACIÓN DE MULTIPLES GRAFICAS (Subplot) Ahora supongamos que necesitamos DEMASIADAS graficas.py' y escribimos el siguiente codigo: 1 7 . creamos un nuevo archivo '. lo cual nos obligaría a crear una segunda ventana. las cuales cuales no podrían verse bien en una sola ventana.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

py'): 3 9 .EDITANDO LAS PROPIEDADES DE LAS GRAFICAS Otra forma de es introducir un 'legend'. para el siguiente ejemplo (No olvide crear un nuevo archivo '.

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

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

etc..py ● Hover.py ● Dragg. arrastrar objetos ('Dragg').py' para los ejemplos que vamos a implementar: ● Picking.py ('mouse enter and leave') 4 2 . para esto se provee de una API que permite trabajar con eventos comunes como hacer click en partes determinadas sobre la gráfica (picking). A continuación crearemos archivos '..el movimientos del mouse sobre áreas predeterminadas ('mouse enter and leave').MANEJO DE EVENTOS Como lo mencionamos anteriormente MATPLOTLIB puede interaccionar con librerías externas como Gtk para poder desarrollar aplicaciones más complejas.

MANEJO DE EVENTOS: Picking 4 3 .

MANEJO DE EVENTOS: Picking 4 4 .

MANEJO DE EVENTOS: Picking 4 5 .

MANEJO DE EVENTOS: Picking 4 6 .

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

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

MANEJO DE EVENTOS: Dragg 4 9 .

MANEJO DE EVENTOS: Dragg 5 0 .

MANEJO DE EVENTOS: Dragg 5 1 .

MANEJO DE EVENTOS: Dragg

5
2

MANEJO DE EVENTOS: Dragg

5
3

MANEJO DE EVENTOS: Dragg

5
4

MANEJO DE EVENTOS: Dragg 5 5 .

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

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

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

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

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

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

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

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

ANIMACIONES 6 4 .

ANIMACIONES 6 5 .

ANIMACIONES

6
6

ANIMACIONES
En pantalla deberíamos ver algo así:

6
7

Plot 3D

6
8

Plot 3D 6 9 .

Plot 3D 7 0 .

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

Sin embargo AUNQUE SU ESTABILIDAD NO ESTA GARANTIZADA. 7 2 .Creación de Interfaces de Usuarios (UI) Una de las características más interesantes recientemente implementadas dentro de MATPLOTLIB. gtk. es la capacidad de crear interfaces de usuario. MATPLOTLIB también puede servirse de librerias de terceros como qt. 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. permitiéndonos así crear aplcaciónes mucho más interactivas.... etc. 'checkbuttons'. etc. 'sliders'. tkinter. 'menus'..

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

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

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

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

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

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

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

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

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

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

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

A continuación haremos un ejemplo similar al ejemplo anterior hecho con 'matplotlib'.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'. para mostrar las diferencias e cuanto sintaxis. 8 4 . en caso de que deseemos desarrollar interfaces de usuario más complejas y que se acerquen a una aplicación de escritorio comun.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. Qt..wxpython.org/PyGObject http://zetcode.com/tutorials/pyqt4/ http://qt-project.org/ https://live.. etc.zonaqt. Gtk+.com/content/introducci%C3%B3n-practi ca-qt-en-python 1 0 .gnome.Otras Interfaces de Usuarios (UI) Existen muchas más librerías de terceros para crear interfaces de usuario como wxWidgets.pygtk.org/wiki/Category:LanguageBindings::PyS ide http://www.org/ http://www.

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

5 Colombia.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. Colombia Abril de 2013 Twitter: @nervencid 1 0 . Diego Camilo Peña Ramírez Bogotá.

Sign up to vote on this title
UsefulNot useful