January 29, 2014

US Privacy Lexicon

If like me you need a compass to wade through legal references in a privacy context, here is a quick lexicon of all the US law acts I stumbled upon. Over time, I will update this article with more links and data while trying to keep it small and manageable. Tough goal. However, this is not meant to be comprehensive but a map of legal lingo to layman's terms as it relates to privacy.


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: 

December 31, 2012

Super simple D3 line with axis

Following last week's post, I continued looking at D3 and this time we're adding an axis, very simple again, just to get things started ... here goes again:

<html>
<head>
<meta charset="UTF-8">
<title>super simple d3 line with axis</title>
<style>
.line {
 fill: none;
 stroke: #00F;
 stroke-width: 2px;
}
.axis path,
.axis line {
   fill: none;
   stroke: black;
   shape-rendering: crispEdges;
}

.axis text {
   font-family: sans-serif;
   font-size: 10px;
}
</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],
width = 400,
   height = 200,
   padding = 20,
x = d3.scale.linear().domain([0, data.length]).range([padding, padding+width]),
   y = d3.scale.linear().domain([0, d3.max(data)]).range([padding+height,padding]);

/*
 add a visualisation,
 select the body tag,
 join the data array to to the body tag for our next data driven moves,
 append an svg container tag,
 give it the right width,
 give it the right height as well,
*/
var visualisation = d3
.select("body")
.data([data])
.append("svg")
.attr("height",height+(padding*2))
.attr("width",width+(padding*2));

/*
this is the line to put on the graph
append a path tag as a child of the svg tag we added to the body tag,
apply css style to make the line blue
*/
visualisation
.append("path")
   .attr("class", "line")
   .attr("d",
    d3.svg.line()
    .x(function(d,i) {return x(i);})
    .y(function(d) {return y(d);})
    );
    /*
    this is the line to represent an axis:
    - it is drawn in an SVG g tag
    - set the class to "axis" for that g tag
    - translate the coordinates down to the bottom of the graph
    - call a D3 axis function scaled to the right domain and range with 5 ticks
    */
visualisation
.append("g")
.attr("class","axis")
.attr("transform", "translate(0," + (height+padding) + ")")
.call(
d3
.svg
.axis()
.scale(x)
.orient("bottom")
.ticks(5)
);
</script>
</body>
</html>


You get:

I found that Scott Murray's tutorial was really well done. Check it out: http://alignedleft.com/tutorials/d3/axes/

December 24, 2012

Super duper simple D3 line graph

I have been trying to find a REALLY stupid sipmle example of a line graph with d3js to no avail, so here is a 3-liner...

<html>
<head>
<title>super simple d3 line</title>
<style>
.line {
  fill: none;
  stroke: #00F;
  stroke-width: 2px;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v2.js"></script>
<script>

var data = [0,2,4,6,8,10,8,6,4,2,4,6,8,6,4,6,6,6,6],
width = 300,
    height = 180,
x = d3.scale.linear().domain([0, data.length]).range([0, width]),
    y = d3.scale.linear().domain([0, d3.max(data)]).range([height,0]);

/*
  add a visualisation,
  select the body tag,
  join the data array to to the body tag for our next data driven moves,
  append an svg container tag,
  give it the right width,
  give it the right height as well,
*/
var visualisation = d3
.select("body")
.data([data])
.append("svg");

/*
this is the line to put on the graph
append a path tag as a child of the svg tag we added to the body tag,
apply css style to make the line blue
*/
visualisation
.append("path")
    .attr("class", "line")
    .attr("d", d3.svg.line()
    .x(function(d,i) {return x(i);})
    .y(function(d) {return y(d); }));
</script>
</body>
</html>


And you get ... this