Skip to content

Instantly share code, notes, and snippets.

@revelutions

revelutions/cities.json

Last active December 19, 2015 17:19
Show Gist options
  • Save revelutions/5990384 to your computer and use it in GitHub Desktop.
Save revelutions/5990384 to your computer and use it in GitHub Desktop.
Download ZIP
Testing jquery popover with d3js
Raw
cities.json
{
"name": "City Population",
"children": [
{
"name": "India",
"children": [
{
"name": "Thanjavur",
"size": "222619",
"link": "http://en.wikipedia.org/wiki/Thanjavur"
},
{
"name": "Bulandshahr",
"size": "222826",
"link": "http://en.wikipedia.org/wiki/Bulandshahr"
},
{
"name": "Mango",
"size": "224002",
"link": "http://en.wikipedia.org/wiki/Mango_%28Jamshedpur%29"
},
{
"name": "Nagercoil",
"size": "224329",
"link": "http://en.wikipedia.org/wiki/Nagercoil"
},
{
"name": "Karawal Nagar",
"size": "224666",
"link": "http://en.wikipedia.org/wiki/Karawal_Nagar"
},
{
"name": "Sri Ganganagar",
"size": "224773",
"link": "http://en.wikipedia.org/wiki/Sri_Ganganagar"
},
{
"name": "Haridwar",
"size": "225235",
"link": "http://en.wikipedia.org/wiki/Haridwar"
},
{
"name": "Katihar",
"size": "225982",
"link": "http://en.wikipedia.org/wiki/Katihar"
},
{
"name": "Vizianagaram",
"size": "227533",
"link": "http://en.wikipedia.org/wiki/Vizianagaram"
},
{
"name": "Ramagundam",
"size": "229632",
"link": "http://en.wikipedia.org/wiki/Ramagundam"
},
{
"name": "Pali",
"size": "229956",
"link": "http://en.wikipedia.org/wiki/Pali,_Rajasthan"
},
{
"name": "Raichur",
"size": "232456",
"link": "http://en.wikipedia.org/wiki/Raichur"
},
{
"name": "Mirzapur",
"size": "233691",
"link": "http://en.wikipedia.org/wiki/Mirzapur"
},
{
"name": "Rewa",
"size": "235422",
"link": "http://en.wikipedia.org/wiki/Rewa,_India"
},
{
"name": "Thoothukudi",
"size": "237374",
"link": "http://en.wikipedia.org/wiki/Thoothukudi"
},
{
"name": "Sikar",
"size": "237579",
"link": "http://en.wikipedia.org/wiki/Sikar"
},
{
"name": "Puducherry",
"size": "241773",
"link": "http://en.wikipedia.org/wiki/Pondicherry_%28city%29"
},
{
"name": "Tiruvottiyur",
"size": "248059",
"link": "http://en.wikipedia.org/wiki/Tiruvottiyur"
},
{
"name": "Baranagar",
"size": "248466",
"link": "http://en.wikipedia.org/wiki/Baranagar"
},
{
"name": "Gandhidham",
"size": "248705",
"link": "http://en.wikipedia.org/wiki/Gandhidham"
},
{
"name": "New Delhi",
"size": "249998",
"link": "http://en.wikipedia.org/wiki/New_Delhi"
},
{
"name": "Begusarai",
"size": "251136",
"link": "http://en.wikipedia.org/wiki/Begusarai"
},
{
"name": "Bharatpur",
"size": "252109",
"link": "http://en.wikipedia.org/wiki/Bharatpur,_India"
},
{
"name": "North Dumdum",
"size": "253625",
"link": "http://en.wikipedia.org/wiki/North_Dumdum"
},
{
"name": "Ambernath",
"size": "254003",
"link": "http://en.wikipedia.org/wiki/Ambernath"
},
{
"name": "Etawah",
"size": "256790",
"link": "http://en.wikipedia.org/wiki/Etawah"
},
{
"name": "Karimnagar",
"size": "260899",
"link": "http://en.wikipedia.org/wiki/Karimnagar"
},
{
"name": "Arrah",
"size": "261099",
"link": "http://en.wikipedia.org/wiki/Arrah"
},
{
"name": "Anantapur",
"size": "262340",
"link": "http://en.wikipedia.org/wiki/Anantapur,_Andhra_Pradesh"
},
{
"name": "Hapur",
"size": "262801",
"link": "http://en.wikipedia.org/wiki/Hapur"
},
{
"name": "Ratlam",
"size": "264810",
"link": "http://en.wikipedia.org/wiki/Ratlam"
},
{
"name": "Imphal",
"size": "264986",
"link": "http://en.wikipedia.org/wiki/Imphal"
},
{
"name": "Durg",
"size": "268679",
"link": "http://en.wikipedia.org/wiki/Durg"
},
{
"name": "Rourkela",
"size": "273217",
"link": "http://en.wikipedia.org/wiki/Rourkela"
},
{
"name": "Sagar",
"size": "273357",
"link": "http://en.wikipedia.org/wiki/Sagar,_Madhya_Pradesh"
},
{
"name": "Farrukhabad",
"size": "275750",
"link": "http://en.wikipedia.org/wiki/Farrukhabad"
},
{
"name": "Sonipat",
"size": "277053",
"link": "http://en.wikipedia.org/wiki/Sonipat"
},
{
"name": "Mau",
"size": "279060",
"link": "http://en.wikipedia.org/wiki/Mau"
},
{
"name": "Satna",
"size": "280248",
"link": "http://en.wikipedia.org/wiki/Satna"
},
{
"name": "Purnia",
"size": "280547",
"link": "http://en.wikipedia.org/wiki/Purnia"
},
{
"name": "Kirari Suleman Nagar",
"size": "282598",
"link": "http://en.wikipedia.org/wiki/Kirari_Suleman_Nagar"
},
{
"name": "Barasat",
"size": "283443",
"link": "http://en.wikipedia.org/wiki/Barasat"
},
{
"name": "Jalna",
"size": "285349",
"link": "http://en.wikipedia.org/wiki/Jalna_%28city%29"
},
{
"name": "Bathinda",
"size": "285813",
"link": "http://en.wikipedia.org/wiki/Bathinda"
},
{
"name": "Karnal",
"size": "286974",
"link": "http://en.wikipedia.org/wiki/Karnal"
},
{
"name": "Tirupati",
"size": "287035",
"link": "http://en.wikipedia.org/wiki/Tirupati_%28city%29"
},
{
"name": "Ichalkaranji",
"size": "287570",
"link": "http://en.wikipedia.org/wiki/Ichalkaranji"
},
{
"name": "Dewas",
"size": "289438",
"link": "http://en.wikipedia.org/wiki/Dewas"
},
{
"name": "Aizawl",
"size": "291822",
"link": "http://en.wikipedia.org/wiki/Aizawl"
},
{
"name": "Bally",
"size": "291972",
"link": "http://en.wikipedia.org/wiki/Bally,_Howrah"
},
{
"name": "Darbhanga",
"size": "294116",
"link": "http://en.wikipedia.org/wiki/Darbhanga"
},
{
"name": "Panipat",
"size": "294150",
"link": "http://en.wikipedia.org/wiki/Panipat"
},
{
"name": "Bihar Sharif",
"size": "296889",
"link": "http://en.wikipedia.org/wiki/Bihar_Sharif"
},
{
"name": "Ozhukarai",
"size": "300028",
"link": "http://en.wikipedia.org/wiki/Ozhukarai"
},
{
"name": "Hisar",
"size": "301249",
"link": "http://en.wikipedia.org/wiki/Hisar,_Haryana"
},
{
"name": "Tumkur",
"size": "305821",
"link": "http://en.wikipedia.org/wiki/Tumkur"
},
{
"name": "Parbhani",
"size": "307191",
"link": "http://en.wikipedia.org/wiki/Parbhani"
},
{
"name": "Nizamabad",
"size": "310467",
"link": "http://en.wikipedia.org/wiki/Nizamabad,_Andhra_Pradesh"
},
{
"name": "Kakinada",
"size": "312255",
"link": "http://en.wikipedia.org/wiki/Kakinada"
},
{
"name": "Kulti",
"size": "313977",
"link": "http://en.wikipedia.org/wiki/Kulti"
},
{
"name": "Bardhaman",
"size": "314638",
"link": "http://en.wikipedia.org/wiki/Bardhaman"
},
{
"name": "Alwar",
"size": "315310",
"link": "http://en.wikipedia.org/wiki/Alwar"
},
{
"name": "Thrissur",
"size": "315596",
"link": "http://en.wikipedia.org/wiki/Thrissur"
},
{
"name": "Junagadh",
"size": "320250",
"link": "http://en.wikipedia.org/wiki/Junagadh"
},
{
"name": "Chandrapur",
"size": "321036",
"link": "http://en.wikipedia.org/wiki/Chandrapur"
},
{
"name": "Shivamogga (Shimoga)",
"size": "322428",
"link": "http://en.wikipedia.org/wiki/Shivamogga"
},
{
"name": "Rampur",
"size": "325248",
"link": "http://en.wikipedia.org/wiki/Rampur,_Uttar_Pradesh"
},
{
"name": "Bijapur",
"size": "326360",
"link": "http://en.wikipedia.org/wiki/Bijapur,_Karnataka"
},
{
"name": "Shahjahanpur",
"size": "327975",
"link": "http://en.wikipedia.org/wiki/Shahjahanpur"
},
{
"name": "Bilaspur",
"size": "330106",
"link": "http://en.wikipedia.org/wiki/Bilaspur,_Chhattisgarh"
},
{
"name": "Kamarhati",
"size": "336579",
"link": "http://en.wikipedia.org/wiki/Kamarhati"
},
{
"name": "Kadapa",
"size": "341823",
"link": "http://en.wikipedia.org/wiki/Kadapa"
},
{
"name": "Rajahmundry",
"size": "343903",
"link": "http://en.wikipedia.org/wiki/Rajahmundry"
},
{
"name": "Avadi",
"size": "344701",
"link": "http://en.wikipedia.org/wiki/Avadi"
},
{
"name": "Kollam (Quilon)",
"size": "349033",
"link": "http://en.wikipedia.org/wiki/Kollam"
},
{
"name": "Mathura",
"size": "349336",
"link": "http://en.wikipedia.org/wiki/Mathura"
},
{
"name": "Ahmednagar",
"size": "350905",
"link": "http://en.wikipedia.org/wiki/Ahmednagar"
},
{
"name": "Muzaffarpur",
"size": "351838",
"link": "http://en.wikipedia.org/wiki/Muzaffarpur"
},
{
"name": "Brahmapur",
"size": "355823",
"link": "http://en.wikipedia.org/wiki/Brahmapur"
},
{
"name": "Bhilwara",
"size": "360009",
"link": "http://en.wikipedia.org/wiki/Bhilwara"
},
{
"name": "Korba",
"size": "363210",
"link": "http://en.wikipedia.org/wiki/Korba,_Chhattisgarh"
},
{
"name": "Rohtak",
"size": "373133",
"link": "http://en.wikipedia.org/wiki/Rohtak"
},
{
"name": "Dhule",
"size": "376093",
"link": "http://en.wikipedia.org/wiki/Dhule"
},
{
"name": "Latur",
"size": "382754",
"link": "http://en.wikipedia.org/wiki/Latur"
},
{
"name": "Panihati",
"size": "383522",
"link": "http://en.wikipedia.org/wiki/Panihati"
},
{
"name": "Bhatpara",
"size": "390467",
"link": "http://en.wikipedia.org/wiki/Bhatpara"
},
{
"name": "Muzaffarnagar",
"size": "392451",
"link": "http://en.wikipedia.org/wiki/Muzaffarnagar"
},
{
"name": "Bhagalpur",
"size": "398138",
"link": "http://en.wikipedia.org/wiki/Bhagalpur"
},
{
"name": "Agartala",
"size": "399688",
"link": "http://en.wikipedia.org/wiki/Agartala"
},
{
"name": "Gopalpur",
"size": "404991",
"link": "http://en.wikipedia.org/wiki/Gopalpur,_West_Bengal"
},
{
"name": "Patiala",
"size": "405164",
"link": "http://en.wikipedia.org/wiki/Patiala"
},
{
"name": "Bellary",
"size": "409644",
"link": "http://en.wikipedia.org/wiki/Bellary"
},
{
"name": "Bokaro",
"size": "413934",
"link": "http://en.wikipedia.org/wiki/Bokaro_Steel_City"
},
{
"name": "Rajpur Sonarpur",
"size": "423806",
"link": "http://en.wikipedia.org/wiki/Rajpur_Sonarpur"
},
{
"name": "Kurnool",
"size": "424920",
"link": "http://en.wikipedia.org/wiki/Kurnool"
},
{
"name": "Akola",
"size": "427146",
"link": "http://en.wikipedia.org/wiki/Akola_city"
},
{
"name": "Kozhikode (Calicut)",
"size": "432097",
"link": "http://en.wikipedia.org/wiki/Kozhikode"
},
{
"name": "Davanagere",
"size": "435128",
"link": "http://en.wikipedia.org/wiki/Davanagere"
},
{
"name": "Tirupur",
"size": "444543",
"link": "http://en.wikipedia.org/wiki/Tirupur"
},
{
"name": "Maheshtala",
"size": "449423",
"link": "http://en.wikipedia.org/wiki/Maheshtala"
},
{
"name": "Udaipur",
"size": "451735",
"link": "http://en.wikipedia.org/wiki/Udaipur"
},
{
"name": "Jalgaon",
"size": "460468",
"link": "http://en.wikipedia.org/wiki/Jalgaon"
},
{
"name": "Gaya",
"size": "463454",
"link": "http://en.wikipedia.org/wiki/Gaya,_India"
},
{
"name": "Malegaon",
"size": "471006",
"link": "http://en.wikipedia.org/wiki/Malegaon"
},
{
"name": "Tirunelveli",
"size": "474838",
"link": "http://en.wikipedia.org/wiki/Tirunelveli"
},
{
"name": "Ambattur",
"size": "478134",
"link": "http://en.wikipedia.org/wiki/Ambattur"
},
{
"name": "Belgaum",
"size": "488292",
"link": "http://en.wikipedia.org/wiki/Belgaum"
},
{
"name": "Jammu",
"size": "503690",
"link": "http://en.wikipedia.org/wiki/Jammu"
},
{
"name": "Nellore",
"size": "505258",
"link": "http://en.wikipedia.org/wiki/Nellore"
},
{
"name": "Ulhasnagar",
"size": "506937",
"link": "http://en.wikipedia.org/wiki/Ulhasnagar"
},
{
"name": "Jhansi",
"size": "507293",
"link": "http://en.wikipedia.org/wiki/Jhansi"
},
{
"name": "Siliguri",
"size": "509709",
"link": "http://en.wikipedia.org/wiki/Siliguri"
},
{
"name": "Loni",
"size": "512296",
"link": "http://en.wikipedia.org/wiki/Loni,_India"
},
{
"name": "Ujjain",
"size": "515215",
"link": "http://en.wikipedia.org/wiki/Ujjain"
},
{
"name": "Jamnagar",
"size": "529308",
"link": "http://en.wikipedia.org/wiki/Jamnagar"
},
{
"name": "Gulbarga",
"size": "532031",
"link": "http://en.wikipedia.org/wiki/Gulbarga"
},
{
"name": "Ajmer",
"size": "542580",
"link": "http://en.wikipedia.org/wiki/Ajmer"
},
{
"name": "Kolhapur",
"size": "549283",
"link": "http://en.wikipedia.org/wiki/Kolhapur"
},
{
"name": "Nanded",
"size": "550564",
"link": "http://en.wikipedia.org/wiki/Nanded"
},
{
"name": "Asansol",
"size": "564491",
"link": "http://en.wikipedia.org/wiki/Asansol"
},
{
"name": "Durgapur",
"size": "566937",
"link": "http://en.wikipedia.org/wiki/Durgapur,_West_Bengal"
},
{
"name": "Dehradun",
"size": "578420",
"link": "http://en.wikipedia.org/wiki/Dehradun"
},
{
"name": "Bhavnagar",
"size": "593768",
"link": "http://en.wikipedia.org/wiki/Bhavnagar"
},
{
"name": "Kochi (Cochin)",
"size": "601574",
"link": "http://en.wikipedia.org/wiki/Kochi,_India"
},
{
"name": "Firozabad",
"size": "603797",
"link": "http://en.wikipedia.org/wiki/Firozabad"
},
{
"name": "Cuttack",
"size": "606007",
"link": "http://en.wikipedia.org/wiki/Cuttack"
},
{
"name": "Mangalore",
"size": "619664",
"link": "http://en.wikipedia.org/wiki/Mangalore"
},
{
"name": "Warangal",
"size": "620116",
"link": "http://en.wikipedia.org/wiki/Warangal"
},
{
"name": "Bhilai",
"size": "625697",
"link": "http://en.wikipedia.org/wiki/Bhilai"
},
{
"name": "Jamshedpur",
"size": "629659",
"link": "http://en.wikipedia.org/wiki/Jamshedpur"
},
{
"name": "Noida",
"size": "642381",
"link": "http://en.wikipedia.org/wiki/Noida"
},
{
"name": "Amravati",
"size": "646801",
"link": "http://en.wikipedia.org/wiki/Amravati"
},
{
"name": "Bikaner",
"size": "647804",
"link": "http://en.wikipedia.org/wiki/Bikaner"
},
{
"name": "Guntur",
"size": "651382",
"link": "http://en.wikipedia.org/wiki/Guntur"
},
{
"name": "Gorakhpur",
"size": "671048",
"link": "http://en.wikipedia.org/wiki/Gorakhpur"
},
{
"name": "Saharanpur",
"size": "703345",
"link": "http://en.wikipedia.org/wiki/Saharanpur"
},
{
"name": "Bhiwandi",
"size": "711329",
"link": "http://en.wikipedia.org/wiki/Bhiwandi"
},
{
"name": "Trivandrum (Thiruvananthapuram)",
"size": "752490",
"link": "http://en.wikipedia.org/wiki/Trivandrum"
},
{
"name": "Salem",
"size": "831038",
"link": "http://en.wikipedia.org/wiki/Salem,_Tamil_Nadu"
},
{
"name": "Bhubaneswar",
"size": "837737",
"link": "http://en.wikipedia.org/wiki/Bhubaneswar"
},
{
"name": "Tiruchirappalli",
"size": "846915",
"link": "http://en.wikipedia.org/wiki/Tiruchirappalli"
},
{
"name": "Jalandhar",
"size": "862196",
"link": "http://en.wikipedia.org/wiki/Jalandhar"
},
{
"name": "Aligarh",
"size": "872575",
"link": "http://en.wikipedia.org/wiki/Aligarh"
},
{
"name": "Gurgaon",
"size": "876824",
"link": "http://en.wikipedia.org/wiki/Gurgaon"
},
{
"name": "Mysore",
"size": "887446",
"link": "http://en.wikipedia.org/wiki/Mysore"
},
{
"name": "Moradabad",
"size": "889810",
"link": "http://en.wikipedia.org/wiki/Moradabad"
},
{
"name": "Bareilly",
"size": "898167",
"link": "http://en.wikipedia.org/wiki/Bareilly"
},
{
"name": "Solapur",
"size": "951118",
"link": "http://en.wikipedia.org/wiki/Solapur"
},
{
"name": "Chandigarh",
"size": "960787",
"link": "http://en.wikipedia.org/wiki/Chandigarh"
},
{
"name": "Guwahati",
"size": "963429",
"link": "http://en.wikipedia.org/wiki/Guwahati"
},
{
"name": "Kota",
"size": "1001365",
"link": "http://en.wikipedia.org/wiki/Kota,_Rajasthan"
},
{
"name": "Raipur",
"size": "1010087",
"link": "http://en.wikipedia.org/wiki/Raipur,_Chhattisgarh"
},
{
"name": "Madurai",
"size": "1016885",
"link": "http://en.wikipedia.org/wiki/Madurai"
},
{
"name": "Jodhpur",
"size": "1033918",
"link": "http://en.wikipedia.org/wiki/Jodhpur"
},
{
"name": "Vijayawada",
"size": "1048240",
"link": "http://en.wikipedia.org/wiki/Vijayawada"
},
{
"name": "Gwalior",
"size": "1053505",
"link": "http://en.wikipedia.org/wiki/Gwalior"
},
{
"name": "Jabalpur",
"size": "1054336",
"link": "http://en.wikipedia.org/wiki/Jabalpur"
},
{
"name": "Howrah",
"size": "1072161",
"link": "http://en.wikipedia.org/wiki/Howrah"
},
{
"name": "Ranchi",
"size": "1073440",
"link": "http://en.wikipedia.org/wiki/Ranchi"
},
{
"name": "Allahabad",
"size": "1117094",
"link": "http://en.wikipedia.org/wiki/Allahabad"
},
{
"name": "Amritsar",
"size": "1132761",
"link": "http://en.wikipedia.org/wiki/Amritsar"
},
{
"name": "Dhanbad",
"size": "1161561",
"link": "http://en.wikipedia.org/wiki/Dhanbad"
},
{
"name": "Aurangabad",
"size": "1171330",
"link": "http://en.wikipedia.org/wiki/Aurangabad,_Maharashtra"
},
{
"name": "Srinagar",
"size": "1192792",
"link": "http://en.wikipedia.org/wiki/Srinagar"
},
{
"name": "Varanasi",
"size": "1201815",
"link": "http://en.wikipedia.org/wiki/Varanasi"
},
{
"name": "Rajkot",
"size": "1286995",
"link": "http://en.wikipedia.org/wiki/Rajkot"
},
{
"name": "Meerut",
"size": "1309023",
"link": "http://en.wikipedia.org/wiki/Meerut"
},
{
"name": "Faridabad",
"size": "1404653",
"link": "http://en.wikipedia.org/wiki/Faridabad"
},
{
"name": "Nashik",
"size": "1486973",
"link": "http://en.wikipedia.org/wiki/Nashik"
},
{
"name": "Agra",
"size": "1574542",
"link": "http://en.wikipedia.org/wiki/Agra"
},
{
"name": "Ludhiana",
"size": "1613878",
"link": "http://en.wikipedia.org/wiki/Ludhiana"
},
{
"name": "Ghaziabad",
"size": "1636068",
"link": "http://en.wikipedia.org/wiki/Ghaziabad,_India"
},
{
"name": "Vadodara",
"size": "1666703",
"link": "http://en.wikipedia.org/wiki/Vadodara"
},
{
"name": "Patna",
"size": "1683200",
"link": "http://en.wikipedia.org/wiki/Patna"
},
{
"name": "Vishakhapatnam",
"size": "1730320",
"link": "http://en.wikipedia.org/wiki/Vishakhapatnam"
},
{
"name": "Bhopal",
"size": "1795648",
"link": "http://en.wikipedia.org/wiki/Bhopal"
},
{
"name": "Thane",
"size": "1818872",
"link": "http://en.wikipedia.org/wiki/Thane"
},
{
"name": "Indore",
"size": "1960631",
"link": "http://en.wikipedia.org/wiki/Indore"
},
{
"name": "Coimbatore",
"size": "2151466",
"link": "http://en.wikipedia.org/wiki/Coimbatore"
},
{
"name": "Nagpur",
"size": "2405421",
"link": "http://en.wikipedia.org/wiki/Nagpur"
},
{
"name": "Kanpur",
"size": "2767031",
"link": "http://en.wikipedia.org/wiki/Kanpur"
},
{
"name": "Lucknow",
"size": "2815601",
"link": "http://en.wikipedia.org/wiki/Lucknow"
},
{
"name": "Jaipur",
"size": "3073350",
"link": "http://en.wikipedia.org/wiki/Jaipur"
},
{
"name": "Pune",
"size": "3115431",
"link": "http://en.wikipedia.org/wiki/Pune"
},
{
"name": "Surat",
"size": "4462002",
"link": "http://en.wikipedia.org/wiki/Surat"
},
{
"name": "Kolkata",
"size": "4486679",
"link": "http://en.wikipedia.org/wiki/Kolkata"
},
{
"name": "Chennai",
"size": "4681087",
"link": "http://en.wikipedia.org/wiki/Chennai"
},
{
"name": "Ahmedabad",
"size": "5570585",
"link": "http://en.wikipedia.org/wiki/Ahmedabad"
},
{
"name": "Hyderabad",
"size": "6809970",
"link": "http://en.wikipedia.org/wiki/Hyderabad,_India"
},
{
"name": "Bangalore",
"size": "8425970",
"link": "http://en.wikipedia.org/wiki/Bangalore"
},
{
"name": "Delhi",
"size": "11007835",
"link": "http://en.wikipedia.org/wiki/Delhi"
},
{
"name": "Mumbai",
"size": "12478447",
"link": "http://en.wikipedia.org/wiki/Mumbai"
}
]
},
{
"name": "Malaysia",
"children": [
{
"name": "Temerloh",
"size": "165451",
"link": "http://en.wikipedia.org/wiki/Temerloh"
},
{
"name": "South Seberang Perai",
"size": "171045",
"link": "http://en.wikipedia.org/wiki/South_Seberang_Perai"
},
{
"name": "Kemaman",
"size": "171383",
"link": "http://en.wikipedia.org/wiki/Kemaman"
},
{
"name": "Keningau",
"size": "177735",
"link": "http://en.wikipedia.org/wiki/Keningau"
},
{
"name": "Batang Padang",
"size": "179494",
"link": "http://en.wikipedia.org/wiki/Batang_Padang"
},
{
"name": "Kerian",
"size": "179706",
"link": "http://en.wikipedia.org/wiki/Kerian"
},
{
"name": "Alor Gajah",
"size": "182666",
"link": "http://en.wikipedia.org/wiki/Alor_Gajah"
},
{
"name": "Bintulu",
"size": "189146",
"link": "http://en.wikipedia.org/wiki/Bintulu"
},
{
"name": "Pasir Mas",
"size": "189292",
"link": "http://en.wikipedia.org/wiki/Pasir_Mas"
},
{
"name": "Segamat",
"size": "189820",
"link": "http://en.wikipedia.org/wiki/Segamat"
},
{
"name": "Kota Tinggi",
"size": "193210",
"link": "http://en.wikipedia.org/wiki/Kota_Tinggi"
},
{
"name": "Hulu Selangor",
"size": "198132",
"link": "http://en.wikipedia.org/wiki/Hulu_Selangor"
},
{
"name": "South-West Penang Island",
"size": "202142",
"link": "http://en.wikipedia.org/wiki/South-West_Penang_Island"
},
{
"name": "Lahad Datu",
"size": "206861",
"link": "http://en.wikipedia.org/wiki/Lahad_Datu"
},
{
"name": "Hilir Perak",
"size": "208570",
"link": "http://en.wikipedia.org/wiki/Hilir_Perak"
},
{
"name": "Kuala Selangor",
"size": "209590",
"link": "http://en.wikipedia.org/wiki/Kuala_Selangor"
},
{
"name": "Sepang",
"size": "211361",
"link": "http://en.wikipedia.org/wiki/Sepang"
},
{
"name": "Kubang Pasu",
"size": "220740",
"link": "http://en.wikipedia.org/wiki/Kubang_Pasu"
},
{
"name": "Kuala Langat",
"size": "224648",
"link": "http://en.wikipedia.org/wiki/Kuala_Langat"
},
{
"name": "Perlis",
"size": "231541",
"link": "http://en.wikipedia.org/wiki/Perlis"
},
{
"name": "Manjung",
"size": "232227",
"link": "http://en.wikipedia.org/wiki/Manjung"
},
{
"name": "Muar",
"size": "247957",
"link": "http://en.wikipedia.org/wiki/Muar_District"
},
{
"name": "Sibu",
"size": "247995",
"link": "http://en.wikipedia.org/wiki/Sibu"
},
{
"name": "Kulaijaya",
"size": "251650",
"link": "http://en.wikipedia.org/wiki/Kulaijaya"
},
{
"name": "Kulim",
"size": "287694",
"link": "http://en.wikipedia.org/wiki/Kulim"
},
{
"name": "North Seberang Perai",
"size": "295979",
"link": "http://en.wikipedia.org/wiki/North_Seberang_Perai"
},
{
"name": "Kluang",
"size": "298332",
"link": "http://en.wikipedia.org/wiki/Kluang"
},
{
"name": "Miri",
"size": "300543",
"link": "http://en.wikipedia.org/wiki/Miri"
},
{
"name": "Larut & Matang",
"size": "334073",
"link": "http://en.wikipedia.org/wiki/Larut,_Matang_dan_Selama"
},
{
"name": "Kuala Terengganu",
"size": "343284",
"link": "http://en.wikipedia.org/wiki/Kuala_Terengganu"
},
{
"name": "Kota Setar",
"size": "366787",
"link": "http://en.wikipedia.org/wiki/Kota_Setar"
},
{
"name": "Central Seberang Perai",
"size": "371975",
"link": "http://en.wikipedia.org/wiki/Central_Seberang_Perai"
},
{
"name": "Sandakan",
"size": "409056",
"link": "http://en.wikipedia.org/wiki/Sandakan"
},
{
"name": "Tawau",
"size": "412375",
"link": "http://en.wikipedia.org/wiki/Tawau"
},
{
"name": "Batu Pahat",
"size": "417458",
"link": "http://en.wikipedia.org/wiki/Batu_Pahat"
},
{
"name": "Kuala Muda",
"size": "456605",
"link": "http://en.wikipedia.org/wiki/Kuala_Muda"
},
{
"name": "Kuantan",
"size": "461906",
"link": "http://en.wikipedia.org/wiki/Kuantan"
},
{
"name": "Kota Kinabalu",
"size": "462963",
"link": "http://en.wikipedia.org/wiki/Kota_Kinabalu"
},
{
"name": "Kota Bharu",
"size": "491237",
"link": "http://en.wikipedia.org/wiki/Kota_Bharu"
},
{
"name": "Central Malacca",
"size": "503127",
"link": "http://en.wikipedia.org/wiki/Central_Malacca"
},
{
"name": "North-East Penang Island",
"size": "520202",
"link": "http://en.wikipedia.org/wiki/North-East_Penang_Island"
},
{
"name": "Seremban",
"size": "555935",
"link": "http://en.wikipedia.org/wiki/Seremban"
},
{
"name": "Kuching",
"size": "617887",
"link": "http://en.wikipedia.org/wiki/Kuching"
},
{
"name": "Gombak",
"size": "682226",
"link": "http://en.wikipedia.org/wiki/Gombak"
},
{
"name": "Kinta",
"size": "767794",
"link": "http://en.wikipedia.org/wiki/Kinta_District"
},
{
"name": "Klang",
"size": "861189",
"link": "http://en.wikipedia.org/wiki/Klang,_Malaysia"
},
{
"name": "Hulu Langat",
"size": "1156585",
"link": "http://en.wikipedia.org/wiki/Hulu_Langat"
},
{
"name": "Johor Bahru",
"size": "1386569",
"link": "http://en.wikipedia.org/wiki/Johor_Bahru"
},
{
"name": "Kuala Lumpur",
"size": "1674621",
"link": "http://en.wikipedia.org/wiki/Kuala_Lumpur"
},
{
"name": "Petaling",
"size": "1812633",
"link": "http://en.wikipedia.org/wiki/Petaling,_Selangor"
}
]
},
{
"name": "China",
"children": [
{
"name": "Zhuhai",
"size": "1047400",
"link": "http://en.wikipedia.org/wiki/Zhuhai"
},
{
"name": "Baoding",
"size": "1057500",
"link": "http://en.wikipedia.org/wiki/Baoding"
},
{
"name": "Daqing",
"size": "1084300",
"link": "http://en.wikipedia.org/wiki/Daqing"
},
{
"name": "Qiqihar",
"size": "1115000",
"link": "http://en.wikipedia.org/wiki/Qiqihar"
},
{
"name": "Wuhu",
"size": "1131900",
"link": "http://en.wikipedia.org/wiki/Wuhu"
},
{
"name": "Huai'an",
"size": "1131900",
"link": "http://en.wikipedia.org/wiki/Huai%27an"
},
{
"name": "Luoyang",
"size": "1160100",
"link": "http://en.wikipedia.org/wiki/Luoyang"
},
{
"name": "Suqian",
"size": "1193500",
"link": "http://en.wikipedia.org/wiki/Suqian"
},
{
"name": "Changzhou",
"size": "1219600",
"link": "http://en.wikipedia.org/wiki/Changzhou"
},
{
"name": "Fushun",
"size": "1236800",
"link": "http://en.wikipedia.org/wiki/Fushun"
},
{
"name": "Baotou",
"size": "1240300",
"link": "http://en.wikipedia.org/wiki/Baotou"
},
{
"name": "Datong",
"size": "1245100",
"link": "http://en.wikipedia.org/wiki/Datong"
},
{
"name": "Handan",
"size": "1257700",
"link": "http://en.wikipedia.org/wiki/Handan"
},
{
"name": "Xiangyang",
"size": "1286000",
"link": "http://en.wikipedia.org/wiki/Xiangyang"
},
{
"name": "Jilin City",
"size": "1287900",
"link": "http://en.wikipedia.org/wiki/Jilin_City"
},
{
"name": "Anshan",
"size": "1296800",
"link": "http://en.wikipedia.org/wiki/Anshan,_China"
},
{
"name": "Maoming",
"size": "1327800",
"link": "http://en.wikipedia.org/wiki/Maoming"
},
{
"name": "Huizhou",
"size": "1338800",
"link": "http://en.wikipedia.org/wiki/Huizhou"
},
{
"name": "Yantai",
"size": "1358900",
"link": "http://en.wikipedia.org/wiki/Yantai"
},
{
"name": "Nantong",
"size": "1361000",
"link": "http://en.wikipedia.org/wiki/Nantong"
},
{
"name": "Ningbo",
"size": "1365000",
"link": "http://en.wikipedia.org/wiki/Ningbo"
},
{
"name": "Nanning",
"size": "1376800",
"link": "http://en.wikipedia.org/wiki/Nanning"
},
{
"name": "Jiangmen",
"size": "1382100",
"link": "http://en.wikipedia.org/wiki/Jiangmen"
},
{
"name": "Xiamen",
"size": "1450700",
"link": "http://en.wikipedia.org/wiki/Xiamen"
},
{
"name": "Linyi",
"size": "1511700",
"link": "http://en.wikipedia.org/wiki/Linyi"
},
{
"name": "Zhanjiang",
"size": "1535300",
"link": "http://en.wikipedia.org/wiki/Zhanjiang"
},
{
"name": "Zibo",
"size": "1551500",
"link": "http://en.wikipedia.org/wiki/Zibo"
},
{
"name": "Weifang",
"size": "1565000",
"link": "http://en.wikipedia.org/wiki/Weifang"
},
{
"name": "Fuzhou",
"size": "1574700",
"link": "http://en.wikipedia.org/wiki/Fuzhou"
},
{
"name": "Guiyang",
"size": "1605800",
"link": "http://en.wikipedia.org/wiki/Guiyang"
},
{
"name": "Yangzhou",
"size": "1705200",
"link": "http://en.wikipedia.org/wiki/Yangzhou"
},
{
"name": "Tangshan",
"size": "1719300",
"link": "http://en.wikipedia.org/wiki/Tangshan"
},
{
"name": "Nanchang",
"size": "1721200",
"link": "http://en.wikipedia.org/wiki/Nanchang"
},
{
"name": "Ürümqi",
"size": "1777900",
"link": "http://en.wikipedia.org/wiki/%C3%9Cr%C3%BCmqi"
},
{
"name": "Hefei",
"size": "1783600",
"link": "http://en.wikipedia.org/wiki/Hefei"
},
{
"name": "Lanzhou",
"size": "1878400",
"link": "http://en.wikipedia.org/wiki/Lanzhou"
},
{
"name": "Kunming",
"size": "1881100",
"link": "http://en.wikipedia.org/wiki/Kunming"
},
{
"name": "Changsha",
"size": "1965300",
"link": "http://en.wikipedia.org/wiki/Changsha"
},
{
"name": "Xuzhou",
"size": "2098000",
"link": "http://en.wikipedia.org/wiki/Xuzhou"
},
{
"name": "Zhengzhou",
"size": "2208500",
"link": "http://en.wikipedia.org/wiki/Zhengzhou"
},
{
"name": "Wuxi",
"size": "2252600",
"link": "http://en.wikipedia.org/wiki/Wuxi"
},
{
"name": "Taiyuan",
"size": "2372800",
"link": "http://en.wikipedia.org/wiki/Taiyuan"
},
{
"name": "Shijiazhuang",
"size": "2438700",
"link": "http://en.wikipedia.org/wiki/Shijiazhuang"
},
{
"name": "Changchun",
"size": "2578900",
"link": "http://en.wikipedia.org/wiki/Changchun"
},
{
"name": "Shenzhen",
"size": "2598700",
"link": "http://en.wikipedia.org/wiki/Shenzhen"
},
{
"name": "Dalian",
"size": "2724800",
"link": "http://en.wikipedia.org/wiki/Dalian"
},
{
"name": "Suzhou",
"size": "2752300",
"link": "http://en.wikipedia.org/wiki/Suzhou"
},
{
"name": "Hangzhou",
"size": "3075200",
"link": "http://en.wikipedia.org/wiki/Hangzhou"
},
{
"name": "Qingdao",
"size": "3146000",
"link": "http://en.wikipedia.org/wiki/Qingdao"
},
{
"name": "Harbin",
"size": "3399800",
"link": "http://en.wikipedia.org/wiki/Harbin"
},
{
"name": "Xi'an",
"size": "3424300",
"link": "http://en.wikipedia.org/wiki/Xi%27an"
},
{
"name": "Jinan",
"size": "3478400",
"link": "http://en.wikipedia.org/wiki/Jinan"
},
{
"name": "Foshan",
"size": "3708900",
"link": "http://en.wikipedia.org/wiki/Foshan"
},
{
"name": "Shenyang",
"size": "4270100",
"link": "http://en.wikipedia.org/wiki/Shenyang"
},
{
"name": "Chengdu",
"size": "4308900",
"link": "http://en.wikipedia.org/wiki/Chengdu"
},
{
"name": "Nanjing",
"size": "5105900",
"link": "http://en.wikipedia.org/wiki/Nanjing"
},
{
"name": "Shantou",
"size": "5167400",
"link": "http://en.wikipedia.org/wiki/Shantou"
},
{
"name": "Wuhan",
"size": "5412800",
"link": "http://en.wikipedia.org/wiki/Wuhan"
},
{
"name": "Tianjin",
"size": "5688600",
"link": "http://en.wikipedia.org/wiki/Tianjin"
},
{
"name": "Guangzhou",
"size": "6642800",
"link": "http://en.wikipedia.org/wiki/Guangzhou"
},
{
"name": "Hong Kong",
"size": "6780000",
"link": "http://en.wikipedia.org/wiki/Hong_Kong"
},
{
"name": "Chongqing",
"size": "7873800",
"link": "http://en.wikipedia.org/wiki/Chongqing"
},
{
"name": "Beijing",
"size": "9645600",
"link": "http://en.wikipedia.org/wiki/Beijing"
},
{
"name": "Shanghai",
"size": "12286300",
"link": "http://en.wikipedia.org/wiki/Shanghai"
}
]
},
{
"name": "Singapore",
"size": "5312400",
"href": "http://en.wikipedia.org/wiki/Singapore"
}
]
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
font: 10px sans-serif;
}
#main {
left: 25%;
position: absolute;
}
#main #text {
padding-bottom: 10px;
}
</style>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>GDP of all countries</title>
<link type="text/css" rel="stylesheet" href="pack-hierarchy.css"/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
<link rel="stylesheet" href="tooltip.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>window.jQuery || document.write('<script src="http://code.jquery.com/jquery-1.7.2.min.js"><\/script>')</script>
<script src="tooltip.js"></script>
</head>
<body>
<h2>
<div id = "footer">
<a href="https://www.cia.gov/library/publications/the-world-factbook/docs/notesanddefs.html#2001"> GDP (PPP) <br>of all countries<br></a>
<div class="hint">click to zoom; click on the outer circle to zoom out<br>
hierarchy has only been created to allow easier selection<br>
circles have hyperlinks to the CIA World Factbook<br><br>
Thanks to Michael Schierl for factbook data
</div>
</div>
</h2>
<script src="packcities.js">
</script>
</body>
</html>
Raw
pack-hierarchy.css
body {
font: 300 36px "Helvetica Neue";
height: 640px;
/* margin: 80px 160px 80px 160px; */
overflow: hidden;
position: relative;
width: 960px;
}
a:link, a:visited {
color: #777;
/*text-decoration: none; */
}
a:hover {
color: #666;
}
blockquote {
margin: 0;
}
blockquote:before {
content: "“";
position: absolute;
left: -.4em;
}
blockquote:after {
content: "”";
position: absolute;
}
body > ul {
margin: 0;
padding: 0;
}
h1 {
font-size: 64px;
}
h1, h2 {
font-weight: inherit;
margin: 0;
}
h3 {
font-size: 16px;
}
h2 {
text-align: right;
font-size: inherit;
position: absolute;
bottom: 0;
right: 0;
}
h2 {
font-size: 24px;
position: absolute;
}
.invert {
background: #1f1f1f;
color: #dcdccc;
}
.invert h2, .invert {
color: #7f9f7f;
}
.string, .regexp {
color: #f39;
}
.keyword {
color: #00c;
}
.comment {
color: #777;
font-style: oblique;
}
.number {
color: #369;
}
.class, .special {
color: #1181B8;
}
body > svg {
position: absolute;
top: -80px;
left: -160px;
}
#country {
float: right;
right: 140px;
}
#chart1 {
float: center;
}
#footer {
top: 680px;
right: 140px;
text-align: right;
}
text {
font: 10px sans-serif;
/* pointer-events: none; */
}
text.parent {
fill: #1f77b4;
}
circle {
fill: #ccc;
stroke: #999;
pointer-events: all;
}
circle.parent {
fill: #1f77b4;
fill-opacity: .1;
stroke: steelblue;
}
circle.parent:hover {
stroke: #ff7f0e;
stroke-width: .5px;
}
circle.child{
fill: #ff7f0e;
fill-opacity: 1;
}
circle.debt{
fill: dodgerblue;
fill-opacity: 1;
}
circle.gdp{
fill: orange;
fill-opacity: 1;
}
.hint {
position: absolute;
right: 0;
width: 1280px;
font-size: 12px;
color: #999;
}
Raw
packcities.js
var graphic;
graphic = new Object;
graphic.create = function() {
d3.json("cities.json", function(data) { update2(data);});
}
var w = 1280,
h = 800,
r = 720,
x = d3.scale.linear().range([0, r]),
y = d3.scale.linear().range([0, r]),
node,
root,
data;
var pack = d3.layout.pack()
.size([r, r])
.value(function(d) { return d.size/1000000; })
var vis = d3.select("body").insert("svg:svg", "h2")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");
function update2(data) {
node = root = data;
var node = vis.data([data]).selectAll("g.node")
.data(pack.nodes)
.enter().append("g")
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("a")
.attr("xlink:href", function(d) { return d.link; })
.append("svg:circle")
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("r", function(d) { return d.r; })
.on("click", function(d) {
if (d.children) {
return zoom(node == d ? root : d);} });
node.filter(function(d) { return !d.children; }).append("svg:text")
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
.text(function(d) { return d.name.substring(0, d.r / 3); });
node.filter(function(d) { return !d.children; })
.tooltip(function(d, i) {
var r, svg;
//r = +d3.select(this).attr('r');
r = d.r;
svg = d3.select(document.createElement("svg")).attr("height", 50);
g = svg.append("g");
g.append("rect").attr("width", r * 10).attr("height", 10);
g.append("text").text("10 times the radius of the circle").attr("dy", "25");
g.append("a").attr("xlink:href","http://www.google.com").append("text").text("google.com").attr("dy", "35");
return {
type: "popover",
title: d.name,
content: svg,
detection: "shape",
placement: "fixed",
gravity: "right",
position: [d.x, d.y],
displacement: [r + 2, -72],
//displacement: [0, 0],
mousemove: false
};
});
// .append("svg:title")
// .text(function(d) { return d.name.concat(" : ",numberWithCommas(d.size)); });
};
$(document).ready(graphic.create);
function numberWithCommas(x) {
x = x/1000000
return "$".concat(x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")," million");
}
function zoom(d, i) {
var k = r / d.r / 2;
x.domain([d.x - d.r, d.x + d.r]);
y.domain([d.y - d.r, d.y + d.r]);
var t = vis.transition()
.duration(d3.event.altKey ? 7500 : 750);
t.selectAll("g.node")
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
t.selectAll("circle")
.attr("r", function(d) { return k * d.r; });
t.selectAll("text")
.text(function(d) { return d.name.substring(0, k * d.r / 3); })
.style("opacity", function(d) { return k * d.r > 20 ? 1 : 0; });
t.filter(function(d1) { return !d1.children; })
.tooltip(function(d2, i) {
var r, svg;
//r = +d3.select(this).attr('r');
r = d2.r;
svg = d3.select(document.createElement("svg")).attr("height", 50);
g = svg.append("g");
g.append("rect").attr("width", r * 10).attr("height", 10);
g.append("text").text("10 times the radius of the circle").attr("dy", "25");
g.append("a").attr("xlink:href","http://www.google.com").append("text").text("google.com").attr("dy", "35");
return {
type: "popover",
title: "It's a me, Rectangle",
content: svg,
detection: "shape",
placement: "fixed",
gravity: "right",
position: [d2.x, d2.y],
displacement: [r + 2, -72],
//displacement: [0, 0],
mousemove: false
};
});
node = d;
d3.event.stopPropagation();
}
Raw
tooltip.css
/* Taken from bootstrap: https://github.com/twitter/bootstrap/blob/master/less/tooltip.less */
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-ms-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
}
.tooltip {
position: absolute;
z-index: 1020;
display: block;
padding: 5px;
font-size: 11px;
opacity: 0.5;
filter: alpha(opacity=0.5);
visibility: visible;
}
.tooltip.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.tooltip.top {
margin-top: -2px;
}
.tooltip.right {
margin-left: 2px;
}
.tooltip.bottom {
margin-top: 2px;
}
.tooltip.left {
margin-left: -2px;
}
.tooltip.top .arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-top: 5px solid #000000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.tooltip.left .arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #000000;
}
.tooltip.bottom .arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-right: 5px solid transparent;
border-bottom: 5px solid #000000;
border-left: 5px solid transparent;
}
.tooltip.right .arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-right: 5px solid #000000;
border-bottom: 5px solid transparent;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #ffffff;
text-align: center;
text-decoration: none;
background-color: #000000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.arrow {
position: absolute;
width: 0;
height: 0;
}
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1010;
display: none;
padding: 5px;
}
.popover.top {
margin-top: -5px;
}
.popover.right {
margin-left: 5px;
}
.popover.bottom {
margin-top: 5px;
}
.popover.left {
margin-left: -5px;
}
.popover.top .arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-top: 5px solid #000000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.popover.right .arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-right: 5px solid #000000;
border-bottom: 5px solid transparent;
}
.popover.bottom .arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-right: 5px solid transparent;
border-bottom: 5px solid #000000;
border-left: 5px solid transparent;
}
.popover.left .arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #000000;
}
.popover-inner {
width: 280px;
padding: 3px;
overflow: hidden;
background: #000000;
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.popover-title {
padding: 9px 15px;
line-height: 1;
background-color: #f5f5f5;
border-bottom: 1px solid #eee;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
margin: 0;
}
.popover-content {
padding: 14px;
background-color: #ffffff;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.popover-content p,
.popover-content ul,
.popover-content ol {
margin-bottom: 0;
}
Raw
tooltip.js
d3.selection.prototype.tooltip = function(o, f) {
var body, clipped, clipper, d, defaults, height, holder, optionsList, parent, positions, sets, voronois, width;
if (arguments.length < 2) {
f = o;
}
body = d3.select('body');
defaults = {
type: "tooltip",
text: "You need to pass in a string for the text value",
title: "Title value",
content: "Content examples",
detection: "shape",
placement: "fixed",
gravity: "right",
position: [100, 100],
displacement: [0, 0],
mousemove: false
};
optionsList = [];
voronois = [];
this.each(function(d, i) {
var opt;
opt = f.apply(this, arguments);
optionsList.push(opt);
if (opt.detection === 'voronoi') {
return voronois.push([opt, i]);
}
});
if (voronois.length !== 0) {
parent = d3.select(this[0][0].ownerSVGElement);
holder = parent.append("g").attr("id", "__clip__holder__");
console.log(voronois);
positions = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = voronois.length; _i < _len; _i++) {
d = voronois[_i];
_results.push(d[0].position);
}
return _results;
})();
console.log(positions);
sets = d3.geom.voronoi(positions);
height = parent.attr("height");
width = parent.attr("width");
clipper = d3.geom.polygon([[0, 0], [0, height], [width, height], [width, 0]]).clip;
clipped = positions.map(clipper);
holder.append("g").attr("id", "clipPaths").selectAll("clipPath").data(voronois).enter().append("clipPath").attr("id", function(d, i) {
return "clip-" + i;
}).append("circle").attr("cx", function(d) {
return d[0].position[0];
}).attr("cy", function(d) {
return d[0].position[1];
}).attr("r", function(d) {
return 20;
});
holder.append("g").attr("id", "clipped").selectAll("path").data(voronois).enter().append("path").attr("d", function(d, i) {
return "M" + (clipped[i].join('L')) + "Z";
}).attr("clip-path", function(d, i) {
return "url(#clip-" + i + ")";
});
}
return this.each(function(d, i) {
var el, move_tip, options, tip, htimer, tip_state;
options = optionsList[i];
el = d3.select(this);
move_tip = function(selection) {
var center, offsets;
center = [0, 0];
if (options.placement === "mouse") {
center = d3.mouse(body.node());
} else {
offsets = this.ownerSVGElement.getBoundingClientRect();
center[0] = offsets.left;
center[1] = offsets.top;
center[0] += options.position[0];
center[1] += options.position[1];
center[0] += window.scrollX;
center[1] += window.scrollY;
}
center[0] += options.displacement[0];
center[1] += options.displacement[1];
return selection.style("left", "" + center[0] + "px").style("top", "" + center[1] + "px").style("display", "block");
};
el.on("mouseover", function() {
var inner;
console.log("mouseover", this, arguments, options, el, tip, tip_state);
tip_state |= 1;
if (tip) {
console.log("***** TIP already built ***** ", this, arguments, options, el, tip, tip_state);
// update tooltip texts?
if (options.type === "tooltip") {
tip.select(".tooltip-inner").html(options.text);
}
if (options.type === "popover") {
inner = tip.select(".popover-inner");
inner.select(".popover-title").text(options.title);
inner.select(".popover-content").select("p").remove();
inner.select(".popover-content").append("p").html(options.content[0][0].outerHTML);
}
} else {
tip = body.append("div").classed(options.type, true).classed(options.gravity, true).classed('fade', true).style("display", "none");
if (options.type === "tooltip") {
tip.append("div").html(options.text).attr("class", "tooltip-inner");
}
if (options.type === "popover") {
inner = tip.append("div").attr("class", "popover-inner");
inner.append("h3").text(options.title).attr("class", "popover-title");
inner.append("div").attr("class", "popover-content").append("p").html(options.content[0][0].outerHTML);
}
tip.append("div").attr("class", "arrow");
tip.on("mouseenter", function() {
console.log("TT.mouseenter", this, arguments, options, el, tip_state);
tip_state |= 2;
}).on("mouseleave", function() {
console.log("TT.mouseleave ******** ", this, arguments, options, el, tip_state);
tip_state &= ~2;
console.log("TT.mouseleave ******** ", this, arguments, options, el, tip_state);
});
}
if (htimer) clearTimeout(htimer);
/* htimer = */ setTimeout(function() {
if (tip && (tip_state & 1))
tip.classed('in', true);
}, 10);
return tip.style("display", "").call(move_tip.bind(this));
});
if (options.mousemove) {
el.on("mousemove", function() {
console.log("mousemove", this, arguments, options, el);
return tip.call(move_tip.bind(this));
});
}
return el.on("mouseout", function() {
var tip_remover;
console.log("mouseout", this, arguments, options, el, tip);
tip_remover = function() {
console.log("tip_remover", this, arguments, options, el, tip, tip_state);
if (tip && (tip_state & 1) && !(tip_state & 2)) {
tip_state = 0;
tip.classed('in', false);
setTimeout(function() {
if (tip)
tip.remove();
tip = null;
}, 500);
} else {
if (htimer) clearTimeout(htimer);
htimer = setTimeout(tip_remover, 150);
}
};
if (htimer) clearTimeout(htimer);
htimer = setTimeout(tip_remover, 150);
});
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment