Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
svg {
margin: 0 auto;
}
</style>
</head>
<body>
<script id="jsbin-javascript">
var height, main, url, width, withData;
url = 'http://feeds.delicious.com/v2/json/tags/dviramontes';
width = 400;
height = 200;
withData = function(data) {
return main(data);
};
$.ajax(url, {
crossDomain: true,
dataType: 'jsonp'
}).error(function(xhr, status, error) {
return alert(error.message);
}).success(withData);
main = function(data) {
var group, svg, tags, theme;
tags = _.map(data, function(d, i) {
return {
tag: i,
"count": d
};
});
theme = d3.scale.linear().domain([1, 20]).range(['#67001f', '#b2182b', '#d6604d', '#f4a582', "#fddbc7", "#ffffff", "#e0e0e0", "#bababa", "#878787", "#4d4d4d", "#1a1a1a"]);
svg = d3.select('body').append('svg');
svg.attr('width', width).attr('height', height).style({
"border": "2px red solid"
});
group = svg.append('g').attr('transform', 'translate(' + 0 + ',' + height / 2 + ')');
return group.selectAll('circle').data(tags).enter().append('circle').attr('cx', function(d, i) {
return i;
}).attr('cy', 0).attr('r', function(d, i) {
return d.count;
}).attr('fill', function(d, i) {
return theme(i);
});
};
</script>
<script id="jsbin-source-css" type="text/css">svg {
margin : 0 auto;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">url = 'http://feeds.delicious.com/v2/json/tags/dviramontes'
width = 400
height = 200
withData = (data) ->
main data
$.ajax(url,
crossDomain : true
dataType: 'jsonp')
.error((xhr, status, error) ->
alert(error.message))
.success(withData)
main = (data) ->
tags = _.map data, (d,i) -> tag: i, "count":d
theme = d3.scale.linear()
.domain([1,20])
.range(['#67001f'
'#b2182b'
'#d6604d'
'#f4a582'
"#fddbc7"
"#ffffff"
"#e0e0e0"
"#bababa"
"#878787"
"#4d4d4d"
"#1a1a1a"])
svg = d3.select('body')
.append('svg')
svg
.attr 'width', width
.attr 'height', height
.style "border" : "2px red solid"
group = svg.append('g')
.attr('transform', 'translate('+0 + ',' + height/2 + ')')
group
.selectAll('circle')
.data(tags)
.enter()
.append('circle')
.attr('cx', (d,i) -> i)
.attr('cy', 0)
.attr('r', (d,i) -> d.count)
.attr('fill', (d,i) -> theme(i))
</script></body>
</html>
svg {
margin: 0 auto;
}
var height, main, url, width, withData;
url = 'http://feeds.delicious.com/v2/json/tags/dviramontes';
width = 400;
height = 200;
withData = function(data) {
return main(data);
};
$.ajax(url, {
crossDomain: true,
dataType: 'jsonp'
}).error(function(xhr, status, error) {
return alert(error.message);
}).success(withData);
main = function(data) {
var group, svg, tags, theme;
tags = _.map(data, function(d, i) {
return {
tag: i,
"count": d
};
});
theme = d3.scale.linear().domain([1, 20]).range(['#67001f', '#b2182b', '#d6604d', '#f4a582', "#fddbc7", "#ffffff", "#e0e0e0", "#bababa", "#878787", "#4d4d4d", "#1a1a1a"]);
svg = d3.select('body').append('svg');
svg.attr('width', width).attr('height', height).style({
"border": "2px red solid"
});
group = svg.append('g').attr('transform', 'translate(' + 0 + ',' + height / 2 + ')');
return group.selectAll('circle').data(tags).enter().append('circle').attr('cx', function(d, i) {
return i;
}).attr('cy', 0).attr('r', function(d, i) {
return d.count;
}).attr('fill', function(d, i) {
return theme(i);
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment