January 7, 2013

one-liner to get NASA image of the day as wallpaper

A quick script to download a new image from NASA everyday.
Not having looked around, I'm pretty sure there are nicer, better solutions to this out there but since this one is free and completely trivial, I thought I'd share here.

What I did:
  1. I created a folder called NASA-IOTD in my Pictures folder
  2. I created a get-image.sh file in that folder
  3. I put the one line as shown below
  4. I added an entry in crontab so it would run once a day
The script:
curl http://www.nasa.gov/rss/image_of_the_day.rss|awk '/enclosure/ {a=$0;sub(/.*enclosure/,"",a); sub(/.*url=\"/,"",a); sub(/\".*/,"",a); print a;}'|xargs curl -O

The crontab entry:
$crontab -l
30 9 * * * /Users/arno/Pictures/NASA-IOTD/get-image.sh

Voila.

January 4, 2013

simple D3 color scales

In my previous example I had used 2 CSS classes for the two lines but there is a better way to change your colors dynamically. D3 lets you use scale in lots of creative ways but one way that's obvious is to map colors. In goes a value, out comes a nice color. In this simple example, I am using the series id to get a color.

<html>
    <head>
        <meta charset="UTF-8">
        <title>super simple graph with 2 lines</title>
        <style>
            .line {
              fill: none;
              stroke-width: 2px;
            }
        </style>
    </head>
    <body>
        <script src="js/jquery-1.7.2.min.js"></script>
        <script src="js/d3.v3.min.js"></script>
        <script>

            var data = [[0,2,4,6,8,10,8,6,4,2,4,6,8,6,4,6,6,6,6],
                        [null,null,null,5,7, 9,7,5,3,1,3,5,7,5,3,5,5,5,5]],
                width = 400,
                height = 200,
                x = d3
                    .scale
                    .linear()
                    .domain([0, 18])
                    .range([0, width]),
                y = d3
                    .scale
                    .linear()
                    .domain([0, 10])
                    .range([height,0]),
                color = d3
                    .scale
                    .category10(),
                line=d3
                    .svg
                    .line()
                    .interpolate("basis")
                    .x(function(d,i) {return x(i);})
                    .y(function(d) {return y(d);});

            /*
              add a visualisation,
              select the body tag,
              append an svg container tag,
              give it the right width,
              give it the right height as well,
            */
            var visualisation = d3
                .select("body")
                 .append("svg")
                 .attr("height",height)
                 .attr("width",width);

            /*
              start from the visualisation
              - select all the path elements (there are none)
              - join the 2D array (which creates an enter() selection with 2 entries, one for each data series)
              - create a path element for each series
              - use the 'line' variable to get the appropriate x,y coordinates translated by the x and y scales defined earlier
              - use a lambda function to assign each series to its own style (line0, line1)
            */    
            var line = visualisation
                .selectAll("path")
                .data(data)
                .enter()
                .append("path")
                .attr("d",line)
                .attr("class", "line")
                .attr("stroke",function(d,i){return color(i);});
        </script>
    </body>
</html>



And you get:

January 3, 2013

Smoothing lines out on our last D3JS example

exact same code as in my last post with ONE twist...

.interpolate("basis")

on the line object...

<html>
    <head>
        <meta charset="UTF-8">
        <title>super simple graph with 2 lines</title>
        <style>
            .line0 {
              fill: none;
              stroke: #00F;
              stroke-width: 2px;
            }
            .line1 {
                fill: none;
                stroke: #0F0;
                stroke-width: 2px;
            }
        </style>
    </head>
    <body>
        <script src="js/jquery-1.7.2.min.js"></script>
        <script src="js/d3.v3.min.js"></script>
        <script>

            var data = [[0,2,4,6,8,10,8,6,4,2,4,6,8,6,4,6,6,6,6],
                        [null,null,null,5,7, 9,7,5,3,1,3,5,7,5,3,5,5,5,5]],
                width = 400,
                height = 200,
                x = d3
                    .scale
                    .linear()
                    .domain([0, 18])
                    .range([0, width]),
                y = d3
                    .scale
                    .linear()
                    .domain([0, 10])
                    .range([height,0]),
                line=d3
                    .svg
                    .line()
                    .interpolate("basis")
                    .x(function(d,i) {return x(i);})
                    .y(function(d) {return y(d);});

            /*
              add a visualisation,
              select the body tag,
              append an svg container tag,
              give it the right width,
              give it the right height as well,
            */
            var visualisation = d3
                .select("body")
                 .append("svg")
                 .attr("height",height)
                 .attr("width",width);
            /*
              start from the visualisation
              - select all the path elements (there are none)
              - join the 2D array (which creates an enter() selection with 2 entries, one for each data series)
              - create a path element for each series
              - use the 'line' variable to get the appropriate x,y coordinates translated by the x and y scales defined earlier
              - use a lambda function to assign each series to its own style (line0, line1)
            */    
            var line = visualisation
                .selectAll("path")
                .data(data)
                .enter()
                .append("path")
                .attr("d",line)
                .attr("class", function(d,i){return "line"+i;});
        </script>
    </body>
</html>


And you get: 

January 2, 2013

The stupid simple multi-line D3 example

Ever since I started looking at D3js I have been amazed at the flexibility and the uncanny simultaneous simplicity and complexity of the api. It seems like an impossible thing. It's both brutally evident and completely unintuitive. How is that even possible you ask? well, you just gotta get used to their ways. Once you have, you can start creating nice visualizations.
With no further ado, here is a 2-liner to show how to create a super simple 2-line graph.
<html>
    <head>
        <meta charset="UTF-8">
        <title>super simple graph with 2 lines</title>
        <style>
            .line0 {
              fill: none;
              stroke: #00F;
              stroke-width: 2px;
            }
            .line1 {
                fill: none;
                stroke: #0F0;
                stroke-width: 2px;
            }
        </style>
    </head>
    <body>
        <script src="js/jquery-1.7.2.min.js"></script>
        <script src="js/d3.v3.min.js"></script>
        <script>

            var data = [[0,2,4,6,8,10,8,6,4,2,4,6,8,6,4,6,6,6,6],
                        [null,null,null,5,7, 9,7,5,3,1,3,5,7,5,3,5,5,5,5]],
                width = 400,
                height = 200,
                x = d3
                    .scale
                    .linear()
                    .domain([0, 18])
                    .range([0, width]),
                y = d3
                    .scale
                    .linear()
                    .domain([0, 10])
                    .range([height,0]),
                line=d3
                    .svg
                    .line()
                    .x(function(d,i) {return x(i);})
                    .y(function(d) {return y(d);});

            /*
              add a visualisation,
              select the body tag,
              append an svg container tag,
              give it the right width,
              give it the right height as well,
            */
            var visualisation = d3
                .select("body")
                 .append("svg")
                 .attr("height",height)
                 .attr("width",width);
            /*
              start from the visualisation
              - select all the path elements (there are none)
              - join the 2D array (which creates an enter() selection with 2 entries, one for each data series)
              - create a path element for each series
              - use the 'line' variable to get the appropriate x,y coordinates translated by the x and y scales defined earlier
              - use a lambda function to assign each series to its own style (line0, line1)
            */    
            var line = visualisation
                .selectAll("path")
                .data(data)
                .enter()
                .append("path")
                .attr("d",line)
                .attr("class", function(d,i){return "line"+i;});
   
    </script>
    </body>
</html>


And you get: