eesur/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Simple test using oboejs for 'loading JSON using streaming, combining the convenience of DOM with the speed and fluidity of SAX'.
Pulling in data fromthe guardian open platform api with filter for articles containing keyword/filter 'code'.

  
## index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<body>

<style type='text/css'>
    @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);
    body{
        background-color:  #130C0E;
        color: #7AC143;
        padding: 20px;
        font-size: 13px;
        font-family: "Source Code Pro", monospace;
        line-height: 1.8;
        font-weight: 400;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    p {
        color: #EE3124;
        letter-spacing: 2px;
    }
    a:link {
        color: #7AC143;
        text-decoration: none;
    }
    a:visited {
        color: #A4CD39;
    }
    a:hover {
        color: #FDBB30;
    }
    a:active {
        color: #7AC143;
    }
</style>


<section id="vis"></section>

<script src='//d3js.org/d3.v3.min.js'></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/oboe.js/2.1.2/oboe-browser.min.js"></script>

<script>

var wrap = d3.select('#vis');
var ul = wrap.append('ul');
var details = wrap.append('p').classed('details', true);

// start downloading some data.
// every time we see a new thing in the data stream, use
// d3 to add an element to the visualisation
oboe('http://content.guardianapis.com/search?q=code%20&api-key=test')
    .node('results.*', function (data){

        ul.append('li').append('a')
            .attr({
                class: 'item',
                href: function () { return data.webUrl; }
            })
            .html(function () { return '&#8702; ' + data.webTitle; } );

      // no need to handle update or exit set here since
      // downloading is purely additive
    })
    .node({
        // detecting strings/numbers
        'total': function (d) {
            details.html(function () { return 'total: ' + d  } );
        }
   });

</script>

</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset='utf-8'>
	<body>

	<style type='text/css'>
	@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);
	body{
	background-color: #130C0E;
	color: #7AC143;
	padding: 20px;
	font-size: 13px;
	font-family: "Source Code Pro", monospace;
	line-height: 1.8;
	font-weight: 400;
	}
	ul {
	list-style: none;
	padding: 0;
	margin: 0;
	}
	p {
	color: #EE3124;
	letter-spacing: 2px;
	}
	a:link {
	color: #7AC143;
	text-decoration: none;
	}
	a:visited {
	color: #A4CD39;
	}
	a:hover {
	color: #FDBB30;
	}
	a:active {
	color: #7AC143;
	}
	</style>


	<section id="vis"></section>

	<script src='//d3js.org/d3.v3.min.js'></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/oboe.js/2.1.2/oboe-browser.min.js"></script>

	<script>

	var wrap = d3.select('#vis');
	var ul = wrap.append('ul');
	var details = wrap.append('p').classed('details', true);

	// start downloading some data.
	// every time we see a new thing in the data stream, use
	// d3 to add an element to the visualisation
	oboe('http://content.guardianapis.com/search?q=code%20&api-key=test')
	.node('results.*', function (data){

	ul.append('li').append('a')
	.attr({
	class: 'item',
	href: function () { return data.webUrl; }
	})
	.html(function () { return '⇾ ' + data.webTitle; } );

	// no need to handle update or exit set here since
	// downloading is purely additive
	})
	.node({
	// detecting strings/numbers
	'total': function (d) {
	details.html(function () { return 'total: ' + d } );
	}
	});

	</script>

	</body>
	</html>