Skip to content

Instantly share code, notes, and snippets.

@danharr

danharr/index.html

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danharr/9840362 to your computer and use it in GitHub Desktop.
Save danharr/9840362 to your computer and use it in GitHub Desktop.
Download ZIP
Circles as volumes
Raw
readme.md

just a quick demo to see if circles could help show which regions have most potential for growth, bit infography

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Which UK postal areas have most customers etc.</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 1500;
var h = 6500;
var xScale = d3.scale.linear().domain([1, 6]).range([100, 1300]);
var yScale = d3.scale.linear().domain([1, 22]).range([100, 4500]);
var custScale = d3.scale.linear().domain([0, 15000]).range([0, 5]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
xyz = [
["AB",5600,1675,1,1,207957],
["AL",9297,2048,2,1,96839],
["B",62167,13049,3,1,739079],
["BA",44372,5183,4,1,182163],
["BB",12583,3458,5,1,197646],
["BD",16567,3978,6,1,213614],
["BH",14080,4606,1,2,229598],
["BL",11088,2920,2,2,155710],
["BN",137674,14904,3,2,351013],
["BR",45275,4196,4,2,126182],
["BS",128922,12978,5,2,379617],
["BT",0,0,6,2,668709],
["CA",13292,3031,1,3,137999],
["CB",14701,3375,2,3,162050],
["CF",17222,5130,3,3,404900],
["CH",13849,3903,4,3,279328],
["CM",32328,6423,5,3,261699],
["CO",18792,3895,6,3,176454],
["CR",62632,4652,1,4,159988],
["CT",73671,6867,2,4,197566],
["CV",30393,6847,3,4,334007],
["CW",8213,2194,4,4,127531],
["DA",63419,5350,5,4,168485],
["DD",2971,1053,6,4,123670],
["DE",23268,5970,1,5,299479],
["DG",2040,735,2,5,66605],
["DH",16374,3017,3,5,128487],
["DL",17731,3075,4,5,151872],
["DN",30919,7062,5,5,311334],
["DT",12673,2067,6,5,92623],
["DY",12246,3309,1,6,167525],
["E",151588,7552,2,6,342879],
["EC",12017,537,3,6,17946],
["EH",14019,4897,4,6,372765],
["EN",16481,2270,5,6,135643],
["EX",108604,10684,6,6,233829],
["FK",3651,1360,1,7,116687],
["FY",7719,2232,2,7,128080],
["G",18168,5597,3,7,521729],
["GL",23701,5872,4,7,251132],
["GU",45418,7348,5,7,282862],
["HA",22890,2980,6,7,164097],
["HD",9611,2585,1,8,106847],
["HG",6175,1436,2,8,58627],
["HP",20195,4434,3,8,186675],
["HR",5972,1440,4,8,74965],
["HS",252,30,5,8,11506],
["HU",15585,3826,6,8,186568],
["HX",5310,1324,1,9,65280],
["IG",46420,3051,2,9,118305],
["IP",27469,6214,3,9,241930],
["IV",2393,714,4,9,91622],
["KA",4765,1839,5,9,161523],
["KT",79669,7598,6,9,214193],
["KW",542,111,1,10,22778],
["KY",4826,1882,2,10,156064],
["L",13778,3693,3,10,360589],
["LA",9774,3177,4,10,142657],
["LD",905,235,5,10,21781],
["LE",29415,7264,6,10,377589],
["LL",9665,2645,1,11,231846],
["LN",10352,2721,2,11,122580],
["LS",28238,7257,3,11,321109],
["LU",17073,2702,4,11,126244],
["M",34539,7751,5,11,468971],
["ME",84998,8065,6,11,235741],
["MK",19824,4519,1,12,197525],
["ML",5252,1624,2,12,160915],
["N",86501,5921,3,12,324437],
["NE",58915,10323,4,12,499131],
["NG",33650,8584,5,12,482241],
["NN",21859,5154,6,12,262830],
["NP",7130,2267,1,13,203149],
["NR",33137,7511,2,13,309258],
["NW",88247,4787,3,13,219171],
["OL",11670,2824,4,13,185705],
["OX",18945,4629,5,13,240115],
["PA",3849,1302,6,13,145075],
["PE",31920,7399,1,14,359411],
["PH",1866,562,2,14,70087],
["PL",102301,9318,3,14,228836],
["PO",21962,6090,4,14,345362],
["PR",14782,4246,5,14,213722],
["RG",23683,6453,6,14,300688],
["RH",76009,8284,1,15,208326],
["RM",33787,3676,2,15,203839],
["S",36390,9817,3,15,561727],
["SA",11946,3598,4,15,307807],
["SE",182939,9073,5,15,393659],
["SG",16456,3678,6,15,163373],
["SK",20980,5723,1,16,257554],
["SL",10143,2253,2,16,135441],
["SM",33948,2926,3,16,89446],
["SN",17058,3827,4,16,176476],
["SO",18211,5071,5,16,267975],
["SP",5573,1392,6,16,93767],
["SR",16144,2986,1,17,109423],
["SS",25551,4490,2,17,214249],
["ST",16981,4658,3,17,266028],
["SW",175675,10402,4,17,385445],
["SY",8542,2254,5,17,141274],
["TA",64785,6466,6,17,138995],
["TD",2441,729,1,18,49641],
["TF",6377,1747,2,18,86696],
["TN",123976,12214,3,18,273874],
["TQ",56023,5149,4,18,127262],
["TR",67167,5730,5,18,127710],
["TS",31397,5031,6,18,254531],
["TW",39004,4330,1,19,185527],
["UB",10672,1514,2,19,126324],
["W",78652,4881,3,19,240973],
["WA",17187,4324,4,19,250278],
["WC",10737,430,5,19,17153],
["WD",12395,1991,6,19,98153],
["WF",18057,4236,1,20,209349],
["WN",8540,2287,2,20,128077],
["WR",9450,2484,3,20,120477],
["WS",15068,3317,4,20,173666],
["WV",11497,2727,5,20,158199],
["YO",24179,5578,6,20,233973],
["ZE",116,26,1,21,9465]
];
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
svg.selectAll("bubb")
.data(xyz)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[3])
})
.attr("cy", function(d) {
return yScale(d[4])
})
.attr("r", function(d) {
return custScale(d[1])
})
.style("opacity",0.5)
.attr("fill","#FF9933")
svg.selectAll("bubb2")
.data(xyz)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[3])
})
.attr("cy", function(d) {
return yScale(d[4])
})
.attr("r", function(d) {
return custScale(d[2])
})
.attr("fill","blue")
svg.selectAll("bubb4")
.data(xyz)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[3])
})
.attr("cy", function(d) {
return yScale(d[4])
})
.attr("r", function(d) {
return custScale(d[5])
})
.attr("fill","#666699")
.style("opacity",0.1)
svg.selectAll("bubb3")
.data(xyz)
.enter()
.append("text")
.attr("x", function(d) {
return xScale(d[3]) - 5
})
.attr("y", function(d) {
return yScale(d[4]) -50
})
.text(function(d) {
return d[0];
})
.style("font-family","tahoma")
.style("fill","grey")
.style("font-size","13px")
.style("font-weight","bold")
svg.selectAll("cust")
.data(xyz)
.enter()
.append("text")
.attr("x", function(d) {
return xScale(d[3]) +25
})
.attr("y", function(d) {
return yScale(d[4])-35
})
.text(function(d) {
return numberWithCommas(d[1]);
})
.style("font-family","tahoma")
.style("fill","orange")
.style("font-size","12px")
svg.selectAll("hh")
.data(xyz)
.enter()
.append("text")
.attr("x", function(d) {
return xScale(d[3]) +25
})
.attr("y", function(d) {
return yScale(d[4])-50
})
.text(function(d) {
return numberWithCommas(d[5]);
})
.style("font-family","tahoma")
.style("fill","grey")
.style("font-size","12px")
svg.selectAll("blue")
.data(xyz)
.enter()
.append("text")
.attr("x", function(d) {
return xScale(d[3]) +25
})
.attr("y", function(d) {
return yScale(d[4])-20
})
.text(function(d) {
return numberWithCommas(d[2]);
})
.style("font-family","tahoma")
.style("fill","blue")
.style("font-size","12px")
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment