Skip to content

Instantly share code, notes, and snippets.

@adg29
Last active August 29, 2015 14:07
Show Gist options
  • Save adg29/6eed9d01c3bc5869b206 to your computer and use it in GitHub Desktop.
Save adg29/6eed9d01c3bc5869b206 to your computer and use it in GitHub Desktop.
D3JS External JSON Circle Radius and X-Axis displacement example
[
{
"Country_Area":"Japan",
"City_Code":21671,
"City":"Tokyo",
"Latitude":35.69,
"Longitude":139.69,
"1950":11275,
"1955":13713,
"1960":16679,
"1965":20284,
"1970":23298,
"1975":26615,
"1980":28549,
"1985":30304,
"1990":32530,
"1995":33587,
"2000":34450,
"2005":35622,
"2010":36834,
"2015":38001,
"2020":38323,
"2025":37876,
"2030":37190
},
{
"Country_Area":"India",
"City_Code":21228,
"City":"Delhi",
"Latitude":28.67,
"Longitude":77.22,
"1950":1369,
"1955":1782,
"1960":2283,
"1965":2845,
"1970":3531,
"1975":4426,
"1980":5558,
"1985":7325,
"1990":9726,
"1995":12407,
"2000":15732,
"2005":18670,
"2010":21935,
"2015":25703,
"2020":29348,
"2025":32727,
"2030":36060
},
{
"Country_Area":"China",
"City_Code":20656,
"City":"Shanghai",
"Latitude":31.22,
"Longitude":121.46,
"1950":4301,
"1955":5846,
"1960":6820,
"1965":6428,
"1970":6036,
"1975":5627,
"1980":5966,
"1985":6847,
"1990":7823,
"1995":10450,
"2000":13959,
"2005":16763,
"2010":19980,
"2015":23741,
"2020":27137,
"2025":29442,
"2030":30751
},
{
"Country_Area":"India",
"City_Code":21206,
"City":"Mumbai (Bombay)",
"Latitude":19.07,
"Longitude":72.88,
"1950":2857,
"1955":3432,
"1960":4060,
"1965":4854,
"1970":5811,
"1975":7082,
"1980":8658,
"1985":10391,
"1990":12436,
"1995":14310,
"2000":16367,
"2005":17891,
"2010":19422,
"2015":21043,
"2020":22838,
"2025":25207,
"2030":27797
},
{
"Country_Area":"China",
"City_Code":20464,
"City":"Beijing",
"Latitude":39.91,
"Longitude":116.40,
"1950":1671,
"1955":2365,
"1960":3900,
"1965":4582,
"1970":4426,
"1975":4828,
"1980":5366,
"1985":6017,
"1990":6788,
"1995":8305,
"2000":10162,
"2005":12813,
"2010":16190,
"2015":20384,
"2020":24201,
"2025":26494,
"2030":27706
},
{
"Country_Area":"Bangladesh",
"City_Code":20119,
"City":"Dhaka",
"Latitude":23.71,
"Longitude":90.41,
"1950":336,
"1955":409,
"1960":508,
"1965":821,
"1970":1374,
"1975":2221,
"1980":3266,
"1985":4660,
"1990":6621,
"1995":8332,
"2000":10285,
"2005":12331,
"2010":14731,
"2015":17598,
"2020":20989,
"2025":24331,
"2030":27374
},
{
"Country_Area":"Pakistan",
"City_Code":22044,
"City":"Karachi",
"Latitude":24.91,
"Longitude":67.08,
"1950":1055,
"1955":1419,
"1960":1853,
"1965":2405,
"1970":3119,
"1975":3989,
"1980":5048,
"1985":6033,
"1990":7147,
"1995":8467,
"2000":10032,
"2005":11885,
"2010":14081,
"2015":16618,
"2020":19230,
"2025":22009,
"2030":24838
},
{
"Country_Area":"Egypt",
"City_Code":22812,
"City":"Al-Qahirah (Cairo)",
"Latitude":30.04,
"Longitude":31.24,
"1950":2494,
"1955":3029,
"1960":3680,
"1965":4738,
"1970":5585,
"1975":6450,
"1980":7349,
"1985":8328,
"1990":9892,
"1995":11962,
"2000":13626,
"2005":15174,
"2010":16899,
"2015":18772,
"2020":20568,
"2025":22432,
"2030":24502
},
{
"Country_Area":"Nigeria",
"City_Code":22007,
"City":"Lagos",
"Latitude":6.45,
"Longitude":3.40,
"1950":325,
"1955":468,
"1960":762,
"1965":1135,
"1970":1414,
"1975":1890,
"1980":2572,
"1985":3500,
"1990":4764,
"1995":5983,
"2000":7281,
"2005":8859,
"2010":10781,
"2015":13123,
"2020":16168,
"2025":20030,
"2030":24239
},
{
"Country_Area":"Mexico",
"City_Code":21853,
"City":"Ciudad de MŽxico (Mexico City)",
"Latitude":19.43,
"Longitude":-99.14,
"1950":3365,
"1955":4294,
"1960":5479,
"1965":6969,
"1970":8831,
"1975":10734,
"1980":13028,
"1985":14278,
"1990":15642,
"1995":17017,
"2000":18457,
"2005":19276,
"2010":20132,
"2015":20999,
"2020":21868,
"2025":22916,
"2030":23865
},
{
"Country_Area":"Brazil",
"City_Code":20287,
"City":"S‹o Paulo",
"Latitude":-23.55,
"Longitude":-46.64,
"1950":2334,
"1955":3044,
"1960":3970,
"1965":5494,
"1970":7620,
"1975":9614,
"1980":12089,
"1985":13395,
"1990":14776,
"1995":15913,
"2000":17014,
"2005":18288,
"2010":19660,
"2015":21066,
"2020":22119,
"2025":22899,
"2030":23444
},
{
"Country_Area":"Democratic Republic of the Congo",
"City_Code":20853,
"City":"Kinshasa",
"Latitude":-4.33,
"Longitude":15.31,
"1950":202,
"1955":292,
"1960":443,
"1965":717,
"1970":1070,
"1975":1482,
"1980":2053,
"1985":2812,
"1990":3683,
"1995":4825,
"2000":6140,
"2005":7589,
"2010":9382,
"2015":11587,
"2020":14118,
"2025":16916,
"2030":19996
},
{
"Country_Area":"Japan",
"City_Code":206459,
"City":"Kinki M.M.A. (Osaka)",
"Latitude":34.68,
"Longitude":135.55,
"1950":7005,
"1955":8623,
"1960":10615,
"1965":13065,
"1970":15272,
"1975":16298,
"1980":17028,
"1985":17583,
"1990":18389,
"1995":18940,
"2000":18660,
"2005":18762,
"2010":19492,
"2015":20238,
"2020":20523,
"2025":20348,
"2030":19976
},
{
"Country_Area":"United States of America",
"City_Code":23083,
"City":"New York-Newark",
"Latitude":40.72,
"Longitude":-74.00,
"1950":12338,
"1955":13219,
"1960":14164,
"1965":15177,
"1970":16191,
"1975":15880,
"1980":15601,
"1985":15827,
"1990":16086,
"1995":16943,
"2000":17813,
"2005":18087,
"2010":18365,
"2015":18593,
"2020":18793,
"2025":19314,
"2030":19885
},
{
"Country_Area":"India",
"City_Code":21211,
"City":"Kolkata (Calcutta)",
"Latitude":22.53,
"Longitude":88.36,
"1950":4513,
"1955":5055,
"1960":5652,
"1965":6261,
"1970":6926,
"1975":7888,
"1980":9030,
"1985":9946,
"1990":10890,
"1995":11924,
"2000":13058,
"2005":13702,
"2010":14283,
"2015":14865,
"2020":15726,
"2025":17285,
"2030":19092
},
{
"Country_Area":"China",
"City_Code":20517,
"City":"Guangzhou, Guangdong",
"Latitude":23.13,
"Longitude":113.26,
"1950":1049,
"1955":1155,
"1960":1272,
"1965":1401,
"1970":1542,
"1975":1698,
"1980":1870,
"1985":2308,
"1990":3072,
"1995":4745,
"2000":7330,
"2005":8485,
"2010":9620,
"2015":12458,
"2020":15174,
"2025":16744,
"2030":17574
},
{
"Country_Area":"China",
"City_Code":20484,
"City":"Chongqing",
"Latitude":29.56,
"Longitude":106.55,
"1950":1567,
"1955":1913,
"1960":2275,
"1965":2188,
"1970":2237,
"1975":2545,
"1980":2961,
"1985":3446,
"1990":4011,
"1995":5615,
"2000":7863,
"2005":9454,
"2010":11244,
"2015":13332,
"2020":15233,
"2025":16571,
"2030":17380
},
{
"Country_Area":"Argentina",
"City_Code":20058,
"City":"Buenos Aires",
"Latitude":-34.61,
"Longitude":-58.40,
"1950":5098,
"1955":5799,
"1960":6598,
"1965":7317,
"1970":8105,
"1975":8745,
"1980":9422,
"1985":9959,
"1990":10513,
"1995":11390,
"2000":12407,
"2005":13330,
"2010":14246,
"2015":15180,
"2020":15894,
"2025":16479,
"2030":16956
},
{
"Country_Area":"Philippines",
"City_Code":22109,
"City":"Manila",
"Latitude":14.60,
"Longitude":120.98,
"1950":1544,
"1955":1872,
"1960":2274,
"1965":2829,
"1970":3534,
"1975":4999,
"1980":5955,
"1985":6888,
"1990":7973,
"1995":9401,
"2000":9962,
"2005":10884,
"2010":11891,
"2015":12946,
"2020":13942,
"2025":15200,
"2030":16756
},
{
"Country_Area":"Turkey",
"City_Code":22691,
"City":"Istanbul",
"Latitude":41.01,
"Longitude":28.95,
"1950":967,
"1955":1249,
"1960":1453,
"1965":2001,
"1970":2772,
"1975":3600,
"1980":4397,
"1985":5407,
"1990":6552,
"1995":7665,
"2000":8744,
"2005":10513,
"2010":12703,
"2015":14164,
"2020":15099,
"2025":15959,
"2030":16694
},
{
"Country_Area":"India",
"City_Code":21176,
"City":"Bangalore",
"Latitude":12.97,
"Longitude":77.59,
"1950":746,
"1955":939,
"1960":1166,
"1965":1377,
"1970":1615,
"1975":2111,
"1980":2812,
"1985":3395,
"1990":4036,
"1995":4744,
"2000":5567,
"2005":6769,
"2010":8275,
"2015":10087,
"2020":11837,
"2025":13329,
"2030":14762
},
{
"Country_Area":"China",
"City_Code":20689,
"City":"Tianjin",
"Latitude":39.11,
"Longitude":117.19,
"1950":2467,
"1955":2761,
"1960":2935,
"1965":3121,
"1970":3318,
"1975":3527,
"1980":3750,
"1985":4097,
"1990":4558,
"1995":5513,
"2000":6670,
"2005":7944,
"2010":9451,
"2015":11210,
"2020":12816,
"2025":13955,
"2030":14655
},
{
"Country_Area":"Brazil",
"City_Code":20272,
"City":"Rio de Janeiro",
"Latitude":-22.90,
"Longitude":-43.21,
"1950":3026,
"1955":3687,
"1960":4493,
"1965":5523,
"1970":6791,
"1975":7733,
"1980":8784,
"1985":9242,
"1990":9697,
"1995":10432,
"2000":11307,
"2005":11832,
"2010":12374,
"2015":12902,
"2020":13326,
"2025":13789,
"2030":14174
},
{
"Country_Area":"India",
"City_Code":21321,
"City":"Chennai (Madras)",
"Latitude":13.05,
"Longitude":80.25,
"1950":1491,
"1955":1705,
"1960":1915,
"1965":2399,
"1970":3057,
"1975":3609,
"1980":4203,
"1985":4748,
"1990":5338,
"1995":5836,
"2000":6353,
"2005":7325,
"2010":8523,
"2015":9890,
"2020":11241,
"2025":12570,
"2030":13921
},
{
"Country_Area":"Indonesia",
"City_Code":21454,
"City":"Jakarta",
"Latitude":-6.21,
"Longitude":106.84,
"1950":1452,
"1955":1972,
"1960":2679,
"1965":3297,
"1970":3915,
"1975":4813,
"1980":5984,
"1985":7009,
"1990":8175,
"1995":8322,
"2000":8390,
"2005":8988,
"2010":9630,
"2015":10323,
"2020":11298,
"2025":12589,
"2030":13812
},
{
"Country_Area":"United States of America",
"City_Code":23052,
"City":"Los Angeles-Long Beach-Santa Ana",
"Latitude":34.03,
"Longitude":-118.24,
"1950":4046,
"1955":5154,
"1960":6530,
"1965":7408,
"1970":8378,
"1975":8926,
"1980":9512,
"1985":10181,
"1990":10883,
"1995":11339,
"2000":11798,
"2005":11978,
"2010":12160,
"2015":12310,
"2020":12454,
"2025":12835,
"2030":13257
},
{
"Country_Area":"Pakistan",
"City_Code":22046,
"City":"Lahore",
"Latitude":31.55,
"Longitude":74.34,
"1950":836,
"1955":1022,
"1960":1264,
"1965":1575,
"1970":1964,
"1975":2399,
"1980":2882,
"1985":3388,
"1990":3970,
"1995":4653,
"2000":5452,
"2005":6389,
"2010":7487,
"2015":8741,
"2020":10054,
"2025":11515,
"2030":13033
},
{
"Country_Area":"India",
"City_Code":21275,
"City":"Hyderabad",
"Latitude":17.38,
"Longitude":78.47,
"1950":1096,
"1955":1179,
"1960":1241,
"1965":1460,
"1970":1748,
"1975":2086,
"1980":2487,
"1985":3209,
"1990":4193,
"1995":4825,
"2000":5445,
"2005":6403,
"2010":7578,
"2015":8944,
"2020":10279,
"2025":11527,
"2030":12774
},
{
"Country_Area":"China",
"City_Code":20667,
"City":"Shenzhen",
"Latitude":22.54,
"Longitude":114.06,
"1950":3,
"1955":5,
"1960":8,
"1965":13,
"1970":22,
"1975":36,
"1980":58,
"1985":175,
"1990":875,
"1995":2394,
"2000":6550,
"2005":8409,
"2010":10223,
"2015":10749,
"2020":11287,
"2025":12067,
"2030":12673
},
{
"Country_Area":"Peru",
"City_Code":22078,
"City":"Lima",
"Latitude":-12.04,
"Longitude":-77.03,
"1950":1066,
"1955":1368,
"1960":1756,
"1965":2284,
"1970":2980,
"1975":3696,
"1980":4438,
"1985":5116,
"1990":5837,
"1995":6582,
"2000":7294,
"2005":8081,
"2010":8955,
"2015":9897,
"2020":10756,
"2025":11534,
"2030":12221
},
{
"Country_Area":"Russian Federation",
"City_Code":22299,
"City":"Moskva (Moscow)",
"Latitude":55.75,
"Longitude":37.62,
"1950":5356,
"1955":5749,
"1960":6170,
"1965":6622,
"1970":7106,
"1975":7623,
"1980":8136,
"1985":8580,
"1990":8987,
"1995":9201,
"2000":10005,
"2005":10751,
"2010":11461,
"2015":12166,
"2020":12474,
"2025":12382,
"2030":12200
},
{
"Country_Area":"Colombia",
"City_Code":20837,
"City":"Bogot‡",
"Latitude":4.61,
"Longitude":-74.08,
"1950":630,
"1955":894,
"1960":1269,
"1965":1780,
"1970":2383,
"1975":3040,
"1980":3525,
"1985":4087,
"1990":4740,
"1995":5494,
"2000":6356,
"2005":7353,
"2010":8506,
"2015":9765,
"2020":10696,
"2025":11398,
"2030":11966
},
{
"Country_Area":"France",
"City_Code":20985,
"City":"Paris",
"Latitude":48.85,
"Longitude":2.35,
"1950":6283,
"1955":6796,
"1960":7411,
"1965":7855,
"1970":8208,
"1975":8558,
"1980":8669,
"1985":8956,
"1990":9330,
"1995":9510,
"2000":9737,
"2005":10092,
"2010":10460,
"2015":10843,
"2020":11271,
"2025":11565,
"2030":11803
},
{
"Country_Area":"South Africa",
"City_Code":22486,
"City":"Johannesburg",
"Latitude":-26.20,
"Longitude":28.04,
"1950":1653,
"1955":1880,
"1960":2137,
"1965":2432,
"1970":2764,
"1975":2975,
"1980":3202,
"1985":3446,
"1990":3709,
"1995":4529,
"2000":5605,
"2005":6726,
"2010":7992,
"2015":9399,
"2020":10361,
"2025":11032,
"2030":11573
},
{
"Country_Area":"Thailand",
"City_Code":22617,
"City":"Krung Thep (Bangkok)",
"Latitude":13.72,
"Longitude":100.53,
"1950":1360,
"1955":1712,
"1960":2151,
"1965":2584,
"1970":3110,
"1975":3842,
"1980":4723,
"1985":5279,
"1990":5888,
"1995":6106,
"2000":6360,
"2005":7228,
"2010":8213,
"2015":9270,
"2020":10137,
"2025":10953,
"2030":11528
},
{
"Country_Area":"United Kingdom",
"City_Code":22860,
"City":"London",
"Latitude":51.51,
"Longitude":-0.13,
"1950":8361,
"1955":8278,
"1960":8196,
"1965":7869,
"1970":7509,
"1975":7546,
"1980":7660,
"1985":7848,
"1990":8054,
"1995":8323,
"2000":8613,
"2005":9119,
"2010":9699,
"2015":10313,
"2020":10849,
"2025":11207,
"2030":11467
},
{
"Country_Area":"United Republic of Tanzania",
"City_Code":22894,
"City":"Dar es Salaam",
"Latitude":-6.82,
"Longitude":39.27,
"1950":84,
"1955":117,
"1960":162,
"1965":233,
"1970":357,
"1975":572,
"1980":855,
"1985":1137,
"1990":1474,
"1995":1830,
"2000":2272,
"2005":2927,
"2010":3870,
"2015":5116,
"2020":6727,
"2025":8593,
"2030":10760
},
{
"Country_Area":"India",
"City_Code":21152,
"City":"Ahmadabad",
"Latitude":23.03,
"Longitude":72.62,
"1950":855,
"1955":1007,
"1960":1181,
"1965":1412,
"1970":1695,
"1975":2050,
"1980":2484,
"1985":2855,
"1990":3255,
"1995":3790,
"2000":4427,
"2005":5238,
"2010":6210,
"2015":7343,
"2020":8452,
"2025":9490,
"2030":10527
},
{
"Country_Area":"Angola",
"City_Code":20049,
"City":"Luanda",
"Latitude":-8.84,
"Longitude":13.23,
"1950":138,
"1955":174,
"1960":219,
"1965":315,
"1970":459,
"1975":599,
"1980":771,
"1985":1018,
"1990":1390,
"1995":1899,
"2000":2591,
"2005":3533,
"2010":4508,
"2015":5506,
"2020":6837,
"2025":8567,
"2030":10429
},
{
"Country_Area":"Viet Nam",
"City_Code":22458,
"City":"Thˆnh Pho Ho Ch’ Minh (Ho Chi Minh City)",
"Latitude":10.75,
"Longitude":106.67,
"1950":1213,
"1955":1303,
"1960":1400,
"1965":1660,
"1970":1970,
"1975":2336,
"1980":2716,
"1985":2820,
"1990":3038,
"1995":3658,
"2000":4389,
"2005":5212,
"2010":6189,
"2015":7298,
"2020":8309,
"2025":9296,
"2030":10200
},
{
"Country_Area":"China",
"City_Code":20480,
"City":"Chengdu",
"Latitude":30.67,
"Longitude":104.07,
"1950":646,
"1955":1034,
"1960":1580,
"1965":1609,
"1970":1750,
"1975":1860,
"1980":2150,
"1985":2639,
"1990":2955,
"1995":3532,
"2000":4222,
"2005":5128,
"2010":6234,
"2015":7556,
"2020":8766,
"2025":9594,
"2030":10104
}
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3JS External JSON Circle Radius and X-Axis displacement example</title>
<style>
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text { font: 12px sans-serif; }
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
</style>
</head>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var jsonCircles = {};
d3.json("../data/cities-2030.json",function(error,data){
jsonCircles = data;
init();
});
var init = function() {
var svgContainer = d3.select("body").append("svg")
.attr("width", "100%")
.attr("height", 200);
var circles = svgContainer.selectAll("circle")
.data(jsonCircles)
.enter()
.append("circle");
var calcRadius = function (d) {
var radius = d['2030']/1000;
console.log(radius);
return radius;
};
var circleAttributes = circles
.attr("cx", function (d,i) { return i*80 + 40 })
.attr("cy", function (d) { return 80; })
.attr("r", calcRadius )
.style("fill", function(d) { return "purple"; });
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment