plamere/PlaylistWithDistribution.html

## PlaylistWithDistribution.html
!DOCTYPE html>
<html>
  <head>
    <title>Playlist Distribution Demo</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <link type="text/css" href="demo_styles.css" rel="stylesheet" />
  </head>

<body>
    <h1 id='title'> Playlist Distribution Demo</h1>
    <div class ='info'>
        This is a demonstration of how the
        <a href="http://developer.echonest.com/docs/v4/playlist.html#static">Echo Nest playlist API </a>
        gives you control over the the number and type of artists appearing in a playlist.
    </div>

    <br>

    <span class='box'> Seed artist:
        <input title="Artist" type="text"  size=24 id="artist"
        onkeydown="if (event.keyCode == 13) newArtist()" name="artist" value='weezer'/>
    </span>

    <span class='box'> Variety:
        <span id='range'> min <input type="range" name="variety" id=variety value='3' min="1" max="10" /> max
        </span>
    </span>

    <span class='box'> Distribution:
        <input type="radio" name="distribution" id="wandering" value="wandering" checked /> wandering
        <input type="radio" name="distribution" id="focused" value="focused" /> focused
    </span>

    <button value="go" id="go" name="go"  disabled onclick="newArtist()"> Go </button>

    <div id="info"> </div>
    <div id="all_results">
        <div id='artists'>
            <div id="histogram2"> </div>
        </div>


        <div id='tracks'>
            <h2> The Playlist</h2>
            <ol id="results"> </ol>
        </div>
    </div>
</body>

<script type="text/javascript">

$("#all_results").hide();
google.load("visualization", "1", {packages:["corechart"]});


function fetchArtistPlaylist(artist,  wandering, variety) {
    var url = 'http://developer.echonest.com/api/v4/playlist/static?api_key=GETYOUROWNKEY&callback=?';

    $("#all_results").hide();
    info("Creating the playlist ...");
    $.getJSON(url, { 'artist': artist, 'format':'jsonp',
            'results': 100, 'type':'artist-radio', 'variety' : variety,
            'distribution' : wandering ? 'wandering' : 'focused' }, function(data) {

        info("");
        $("#results").empty();
        $("#all_results").show();

        var artists = {};
        for (var i = 0; i < data.response.songs.length; i++) {
            var song = data.response.songs[i];
            if (! (song.artist_name in artists) ) {
                artists[song.artist_name] = 0;
            }
            artists[song.artist_name]++;
            var li = $("<li>").html("<span class='title'>" + song.title + "<span>"
                + " by <span class='artist'>" + song.artist_name + "</span>");
            $("#results").append(li);
        }
        showArtistHistogram(artists);
    });
}


function showArtistHistogramTable(artist) {
        $("#histogram").empty();
        var keys = [];
        for (a in artists) {
            console.log(a);
            keys.push(a);
        }
        keys.sort(function(a,b) { return artists[b] - artists[a]; });

        var ul = $("<ul>");
        console.log(keys);
        for (var i in keys) {
            var artist = keys[i];
            var li = $("<li>").html(artists[artist] + " " + "<span class='artist'>" + artist + "</span>");
            $("#histogram").append(li);
        }
}

function showArtistHistogram(artists) {
    var keys = [];
    for (a in artists) {
        keys.push(a);
    }
    keys.sort(function(a,b) { return artists[b] - artists[a]; });

    var rows = [];
    for (var i in keys) {
        var name = keys[i];
        var count = artists[name];
        rows.push( [name, count] );
    }

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Artist');
    data.addColumn('number', 'Count');

    data.addRows(rows);
    var options = {
      title: 'Artist Histogram',
      height: rows.length * 32,
      width: 500,
      fontSize: 12,
      vAxis: {title: 'Artist',  titleTextStyle: {color: 'blue'}},
      titleTextStyle: {fontSize:18},
      chartArea: { top: 32 },
      legend: { position: 'none' },
    };

    var chart = new google.visualization.BarChart(document.getElementById('histogram2'));
    chart.draw(data, options);
}

function newArtist() {
    var artist = $("#artist").val();
    var wandering = $("#wandering").is(':checked');
    var variety = $("#variety").val() / 10.0;
    fetchArtistPlaylist(artist, wandering, variety);
}

function info(txt) {
    $("#info").text(txt);
}


$(document).ready(function() {
    $("#go").removeAttr("disabled");
});

</script>
</html>
	!DOCTYPE html>
	<html>
	<head>
	<title>Playlist Distribution Demo</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<link type="text/css" href="demo_styles.css" rel="stylesheet" />
	</head>

	<body>
	<h1 id='title'> Playlist Distribution Demo</h1>
	<div class ='info'>
	This is a demonstration of how the
	<a href="http://developer.echonest.com/docs/v4/playlist.html#static">Echo Nest playlist API </a>
	gives you control over the the number and type of artists appearing in a playlist.
	</div>

	<br>

	<span class='box'> Seed artist:
	<input title="Artist" type="text" size=24 id="artist"
	onkeydown="if (event.keyCode == 13) newArtist()" name="artist" value='weezer'/>
	</span>

	<span class='box'> Variety:
	<span id='range'> min <input type="range" name="variety" id=variety value='3' min="1" max="10" /> max
	</span>
	</span>

	<span class='box'> Distribution:
	<input type="radio" name="distribution" id="wandering" value="wandering" checked /> wandering
	<input type="radio" name="distribution" id="focused" value="focused" /> focused
	</span>

	<button value="go" id="go" name="go" disabled onclick="newArtist()"> Go </button>

	<div id="info"> </div>
	<div id="all_results">
	<div id='artists'>
	<div id="histogram2"> </div>
	</div>


	<div id='tracks'>
	<h2> The Playlist</h2>
	<ol id="results"> </ol>
	</div>
	</div>
	</body>

	<script type="text/javascript">

	$("#all_results").hide();
	google.load("visualization", "1", {packages:["corechart"]});


	function fetchArtistPlaylist(artist, wandering, variety) {
	var url = 'http://developer.echonest.com/api/v4/playlist/static?api_key=GETYOUROWNKEY&callback=?';

	$("#all_results").hide();
	info("Creating the playlist ...");
	$.getJSON(url, { 'artist': artist, 'format':'jsonp',
	'results': 100, 'type':'artist-radio', 'variety' : variety,
	'distribution' : wandering ? 'wandering' : 'focused' }, function(data) {

	info("");
	$("#results").empty();
	$("#all_results").show();

	var artists = {};
	for (var i = 0; i < data.response.songs.length; i++) {
	var song = data.response.songs[i];
	if (! (song.artist_name in artists) ) {
	artists[song.artist_name] = 0;
	}
	artists[song.artist_name]++;
	var li = $("<li>").html("<span class='title'>" + song.title + "<span>"
	+ " by <span class='artist'>" + song.artist_name + "</span>");
	$("#results").append(li);
	}
	showArtistHistogram(artists);
	});
	}


	function showArtistHistogramTable(artist) {
	$("#histogram").empty();
	var keys = [];
	for (a in artists) {
	console.log(a);
	keys.push(a);
	}
	keys.sort(function(a,b) { return artists[b] - artists[a]; });

	var ul = $("<ul>");
	console.log(keys);
	for (var i in keys) {
	var artist = keys[i];
	var li = $("<li>").html(artists[artist] + " " + "<span class='artist'>" + artist + "</span>");
	$("#histogram").append(li);
	}
	}

	function showArtistHistogram(artists) {
	var keys = [];
	for (a in artists) {
	keys.push(a);
	}
	keys.sort(function(a,b) { return artists[b] - artists[a]; });

	var rows = [];
	for (var i in keys) {
	var name = keys[i];
	var count = artists[name];
	rows.push( [name, count] );
	}

	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Artist');
	data.addColumn('number', 'Count');

	data.addRows(rows);
	var options = {
	title: 'Artist Histogram',
	height: rows.length * 32,
	width: 500,
	fontSize: 12,
	vAxis: {title: 'Artist', titleTextStyle: {color: 'blue'}},
	titleTextStyle: {fontSize:18},
	chartArea: { top: 32 },
	legend: { position: 'none' },
	};

	var chart = new google.visualization.BarChart(document.getElementById('histogram2'));
	chart.draw(data, options);
	}

	function newArtist() {
	var artist = $("#artist").val();
	var wandering = $("#wandering").is(':checked');
	var variety = $("#variety").val() / 10.0;
	fetchArtistPlaylist(artist, wandering, variety);
	}

	function info(txt) {
	$("#info").text(txt);
	}


	$(document).ready(function() {
	$("#go").removeAttr("disabled");
	});

	</script>
	</html>