JSFiddle

Javier's public fiddles

  • Life expectancy example

    This example was motivated by two blog entries posted by Lisa Charlotte Rost on her blog. It shows the tight relationship between a country's average personal income and the average life expectancy. The point areas are proportional to the country's population. Left click on a point to see the country name. Drag the plot area with the mouse to pan in any direction. Zoom in and out with the mouse central button.

  • Two vertical axes example

    Drag the plot area with the mouse to pan in any direction.

  • Evolving words

    Particles compose words, words make sentences, and sentences evolve into stories.

  • Recursive puzzle

    This sketch simulates a recursive sliding puzzle. Click the screen to increase or decrease the level of recursion. Original photo by Sukanto Debnath: http://www.flickr.com/photos/sukanto_debnath/2354607553

  • Oil painting simulation

    Simulates an oil paint using a picture as a reference. The work by Sergio Albiac was my main source of inspiration: http://www.sergioalbiac.com This sketch has many optional parameters, but not all of them produce optimal results. Original photo by Sukanto Debnath: http://www.flickr.com/photos/sukanto_debnath/2354607553

  • See life

    A flocking sketch using with p5.js and dat.GUI libraries Inspired by this flocking tutorial: http://www.flight404.com/blog/?p=459 http://libcinder.org/docs/dev/flocking_chapter1.html

  • Thousand words

    Type some text on the keyboard to reveal the image. Left/right click decreases/increases the line separation. Picture by Petras Gagilas http://www.flickr.com/photos/gagilas/4495968987

  • Word limits

    Click the mouse to start again. Works with any font and shape.

  • Leapfrog

    The beauty of the leapfrog algorithm: http://en.wikipedia.org/wiki/Leapfrog_integration Image by Alex Proimos: http://www.flickr.com/photos/proimos/7810727314 Click the screen to reset

  • Simple tree generator

    Click on the screen to generate a new tree.

  • Photo slices

    Click on the screen to increase or decrease the number of slices. Move the cursor for some interaction. Picture from Sukanto Debnath http://www.flickr.com/photos/sukanto_debnath/3081836966/

  • Drawing balls

    Inspired on the work from Robert Hodgin: http://roberthodgin.com/stippling/ Picture from Sukanto Debnath http://www.flickr.com/photos/sukanto_debnath/3081836966/

  • Flaring star

    Move the cursor to change the star properties. The inspiration came from this great sketch: http://www.openprocessing.org/sketch/112601

  • Two axis example

    This example shows the way to add two different axis scales to a given plot Uses the grafica.js library: https://github.com/jagracar/grafica.js

  • Oktoberfest example

    (this sketch doesn't work completely because it cannot load the external cvs file) Every 4 years a curious coincidence occurs. I wonder how many Germans will try to vote totally drunk after a whole day at the Oktoberfest... Uses the grafica.js library: https://github.com/jagracar/grafica.js The data was obtained from Google trends

  • Default plot example

    Default plot example from the grafica.js library https://github.com/jagracar/grafica.js

  • Multiple plots example

    An example with multiple plots using the grafica.js library: https://github.com/jagracar/grafica.js Drag the mouse (+control key) over the first plot to pan in any direction. Left click to show the point labels. Click left in the second plot to recenter and use the mouse wheel to zoom.

  • Moving points example

    Click to change the points movement. Drag to pan the plot. Uses the grafica.js library: https://github.com/jagracar/grafica.js

  • Multiple panels example

    An example of a plot with multiple panels using the grafica.js library: https://github.com/jagracar/grafica.js

  • Exponential trend example

    Click to change the scale from linear to logarithmic. Uses the grafica.js library: https://github.com/jagracar/grafica.js