!

Dette materialet blir ikke lenger vedlikeholdt. Du vil finne oppdatert materiale på siden: http://borres.hiof.no/wep/

Processing.js
Børre Stenseth
? Browser Support ?
HTML > Canvas > Processing >Histogram

Visualisering

Hva
Visualisering av data

Et av de områdene der Processing har blitt brukt er visualisering av store datamangder. I denne modulen gjør vi noen eksperimenter med framstilling av data om ord. Det vil si at vi ganske enkelt teller ordlengder i noen tekstfiler. Disse ordlengdene framstiller vi som histogrammer med visning av prosenter. En kilde for data er project Gutenberg [1] .

Rensing av teksten vi skal telle er helt rudimentær. Vi gjør f.eks. ikke noe forsøk på å fjerne tagger fra HTML-filer. Dataene som vises har bare mening for relativt rene tekst-filer.

Du kan betrakte demonstrasjonene nedenfor som skisser som lett lar seg bearbeide til f.eks. å vise flere histogrammer i samme canvas, skrive om teksten på aksene, produsere gjennomsnitt osv og å filtrere teksten.

Det er to pde-filer som brukes i alle tre eksemplene nedenfor.

_words2.pde

og

_datasource.pde

Disse kopler vi til et canvas-element slik:

<canvas id="hello" data-processing-sources="words2.pde datasource.pde"> </canvas>

Javascriptkoden er samlet slik:

_index.js

Processing direkte

Dersom vi skal hente data fra samme domene som denne siden kan vi la Processing gjøre hele jobben. Det vil si at gir Processing URL'en vi skal hente data fra. Vi trenger ikke involvere en egen AJAX-lasting.

startProcessing('http://www.it.hiof.no/~borres/commondata/vin/allText.txt',
                'address1',
                'draw1')

Ajax - processing

Vi kan løse det samme problemet ved å hente teksten med et AJAX-kall og så gi teksten til Processing:

getIt1('http://www.it.hiof.no/~borres/commondata/litteratur/memoirs_of_sherlock_holmes.txt',
        'address2',
        'draw2')

Proxy

Dersom vi skal hente data fra et annet domene kan vi gjøre dette ved hjelp av et serverskript. Her har vi en mulighet for å skrive tekstfiltrering i Python.

_proxy.py
getIt1('proxy.py?fetch=http://www.gutenberg.org/cache/epub/30027/pg30027.txt',
        'address3',
        'draw3')
Referanser
  1. Project Gutenberg www.gutenberg.org 02-06-2013
  1. Processing.js Wikipedia en.wikipedia.org/wiki/Processing.js 01-07-2012
Vedlikehold
B.Stenseth, juni 2013
( Velkommen ) HTML > Canvas > Processing >Histogram ( Befolkning )