Skip to content

Instantly share code, notes, and snippets.

@jalague

jalague/.block

Created February 26, 2017 23:33
Show Gist options
  • Save jalague/3b904c2a2be562d8a99096a7fd38df35 to your computer and use it in GitHub Desktop.
Save jalague/3b904c2a2be562d8a99096a7fd38df35 to your computer and use it in GitHub Desktop.
Download ZIP
Bubble Chart Homework 2
Raw
.block
license: mit
Raw
data.csv
name tier_name Sum_Tiers state count1 par_mean par_median k_mean k_median
Academy Of Art University Four-year for-profit 9 CA 495.6666666666667 166594.9696116342 92300 39988.01720641392 27400
Allan Hancock College Two-year (public and private not-for-profit) 69 CA 1220 76983.84073522082 65700 33651.39346965846 30800
"American Career College of Los Angeles, CA" Two-year for-profit 11 CA 489.5 55879.31704135618 30400 27716.0283251465 25700
Antelope Valley College Two-year (public and private not-for-profit) 69 CA 1904.666666666667 71043.66439064141 66600 32210.87520372112 25700
Argosy University Four-year for-profit 9 CA 119 101653.7685817502 84000 31006.41827692663 29700
Art Center College Of Design Nonselective four-year private not-for-profit 5 CA 109.5 140836.1464030771 84800 53629.40664619593 42800
Azusa Pacific University Selective private 23 CA 647 172835.4880779882 103700 47276.71289766873 42100
Barstow Community College Two-year (public and private not-for-profit) 69 CA 478 62711.74122591963 58000 34251.5747472106 28700
Biola University Selective private 23 CA 535 159678.2209501558 95300 44505.2000097352 35700
Brooks Institute Four-year for-profit 9 CA 250.1666666666667 161301.6020753406 95300 35938.51107164806 30500
Butte College Two-year (public and private not-for-profit) 69 CA 1751 81294.32462104988 64100 34286.5956112876 27300
Cabrillo College Two-year (public and private not-for-profit) 69 CA 1641 103351.7814515412 70200 33680.19710931152 26500
California Baptist University Selective private 23 CA 197.3333333333333 94525.19923194681 82600 40537.43385108742 36200
California College Of The Arts Nonselective four-year private not-for-profit 5 CA 123.6666666666667 160342.7457884097 90100 37838.00830736186 29700
California Culinary Academy Two-year for-profit 11 CA 154 110464.0924648268 66000 34039.54724702381 27900
California Institute Of Technology Other elite schools (public and private) 8 CA 190.6666666666667 185591.1348339161 124500 119502.5454955201 83000
California Institute Of The Arts Nonselective four-year private not-for-profit 5 CA 122.6666666666667 205473.4940981658 108700 46508.11575450068 25300
California Lutheran University Selective private 23 CA 300 169644.5575173611 110600 57255.63567708333 50900
California Maritime Academy Selective public 25 CA 92 132454.2233922101 113100 89270.2313745471 85800
California Polytechnic State University Selective public 25 CA 2887.666666666667 169835.7176028801 124800 76443.30961596733 65500
"California State Polytechnic University, Pomona" Selective public 25 CA 2195.333333333334 98379.03404831271 80200 58449.62114357159 55100
California State University - Sacramento Selective public 25 CA 2041.333333333333 107518.9903721526 88700 51314.20330742774 47900
California State University Channel Islands Nonselective four-year public 1 CA 50 141960.9634924778 96300 45810.76147013659 47300
"California State University, Bakersfield" Selective public 25 CA 542.6666666666666 84211.55416442722 67700 47321.12535991247 46100
"California State University, Chico" Selective public 25 CA 1895.333333333333 150534.7387635201 112200 56332.84071623285 48700
"California State University, Dominguez Hills" Selective public 25 CA 451.3333333333333 57771.22736740676 45600 42627.00178579671 40300
"California State University, East Bay" Selective public 25 CA 696.6666666666666 104528.779388457 86000 55258.10369318182 51300
"California State University, Fresno" Selective public 25 CA 1656.333333333333 93996.48604629956 72400 50156.25069807807 44400
"California State University, Fullerton" Selective public 25 CA 2374 103739.6362152485 83300 52188.20571161542 47800
"California State University, Long Beach" Selective public 25 CA 2863.666666666667 116773.1328461471 85800 53931.90846207149 48800
"California State University, Los Angeles" Selective public 25 CA 1179.666666666667 52114.62349003956 36600 44225.55413230255 43000
"California State University, Monterey Bay" Selective public 25 CA 322.6666666666667 123045.0469718492 93200 44659.59198250259 41100
"California State University, Northridge" Selective public 25 CA 2348.666666666667 84829.51676815747 61100 49244.3334100243 44100
"California State University, San Bernardino" Selective public 25 CA 1151.666666666667 82251.9872987518 69800 45793.71724629161 43500
"California State University, San Marcos" Selective public 25 CA 427.6666666666667 128226.3447669037 93600 50603.34853005652 44400
"California State University, Stanislaus" Selective public 25 CA 603 83972.02921158099 72300 44836.22889674889 44800
Carrington College California Two-year for-profit 11 CA 434.5 59022.17385918939 47900 26076.92089461125 25000
Center For Employment Training Less than two-year schools of any type 6 CA 290 39084.00937003062 29300 21629.48800394589 16300
Cerritos Community College Two-year (public and private not-for-profit) 69 CA 3216 56123.49817967453 45500 32951.94417560635 30200
Chabot-Las Positas Community College District Two-year (public and private not-for-profit) 69 CA 2381.666666666667 101121.4640307908 84000 40258.29423602606 35200
Chaffey Community College Two-year (public and private not-for-profit) 69 CA 2802.666666666667 76332.50965412405 66300 31579.25653349117 27700
Chapman University Highly selective private 6 CA 603 233063.9001865672 109600 55754.45066550926 47900
Citrus Community College Two-year (public and private not-for-profit) 69 CA 2030.666666666667 77666.00097720372 66500 33443.44549267995 28100
Claremont Mckenna College Other elite schools (public and private) 8 CA 266 335092.9724310777 142000 98125.42079808898 69900
Coast Community College District Two-year (public and private not-for-profit) 69 CA 5334.666666666667 101057.1972910093 72800 36782.17605657179 30600
College Of Marin Two-year (public and private not-for-profit) 69 CA 580.6666666666666 118352.0521469986 82000 36083.41067314175 29700
College Of The Canyons Two-year (public and private not-for-profit) 69 CA 1868.666666666667 103185.4908580093 88200 40109.35613349536 32500
College Of The Desert Two-year (public and private not-for-profit) 69 CA 1342.666666666667 59464.92464661432 44900 31873.89078743716 28400
College Of The Redwoods Two-year (public and private not-for-profit) 69 CA 1064.666666666667 71567.55342292189 59900 26270.29559513443 20300
College Of The Sequoias Two-year (public and private not-for-profit) 69 CA 1764.666666666667 66608.21152779089 51500 32212.81047161291 27500
College Of The Siskiyous Two-year (public and private not-for-profit) 69 CA 345 85761.71080163044 57500 33321.62227317331 27900
"Concordia University of Irvine, CA" Selective private 23 CA 201 131138.3081208541 94000 44780.79943382048 39600
Contra Costa Community College District Two-year (public and private not-for-profit) 69 CA 4957.666666666667 108743.3619157828 85400 38786.84561605972 32900
Copper Mountain College Two-year (public and private not-for-profit) 69 CA 327 67192.23507443351 50100 31708.20901895941 27100
Crimson Technical College Two-year for-profit 11 CA 156 47183.26101615608 44700 41296.77342876963 37600
Cuesta College Two-year (public and private not-for-profit) 69 CA 1881.333333333333 107517.488904146 79900 38964.53006165286 31000
Dominican University Of California Selective private 23 CA 137.6666666666667 163987.1139288617 98100 55005.75202519778 45200
El Camino College Two-year (public and private not-for-profit) 69 CA 3618.333333333334 70792.21628137954 51600 33298.01473075484 28300
Fashion Institute Of Design & Merchandising Four-year for-profit 9 CA 932.5 130106.3759234352 76300 35981.48930964657 28200
Feather River College Two-year (public and private not-for-profit) 69 CA 179 81433.79261231377 66000 28948.29651492668 23400
Foothill-Deanza Community College District Two-year (public and private not-for-profit) 69 CA 4000.666666666667 120318.385189057 80200 42251.74621319624 33900
Fresno Pacific University Selective private 23 CA 160.6666666666667 83954.31638416024 71100 43699.91889142105 37900
Gavilan College Two-year (public and private not-for-profit) 69 CA 588.6666666666666 96273.36366170018 80500 35232.76896499858 29800
Glendale Career College Less than two-year schools of any type 6 CA 172 53849.61800508721 33200 24112.40303264293 17900
Glendale Community College Two-year (public and private not-for-profit) 69 CA 1437 60158.27255041608 40100 37418.35056668262 30500
Grossmont-Cuyamaca Community College District Two-year (public and private not-for-profit) 69 CA 3461 95826.83270956732 77400 37289.85192818188 31700
Hartnell Community College Two-year (public and private not-for-profit) 69 CA 1280 65456.23266906738 51800 34724.02799479166 30500
Harvey Mudd College Other elite schools (public and private) 8 CA 164 207971.9583333334 139800 109616.2766450712 82400
Heald College Two-year for-profit 11 CA 2428.333333333334 64024.20347353294 52400 35981.13637826013 33600
Humboldt State University Selective public 25 CA 736.6666666666666 126254.519948388 96000 38719.98498126414 35500
Imperial Valley College Two-year (public and private not-for-profit) 69 CA 885.6666666666666 48809.86005274981 34300 31419.64231422892 25800
International Career Development Center Two-year for-profit 11 CA 215 36129.47426399028 29500 18241.47702884114 16700
Irvine Valley College Two-year (public and private not-for-profit) 69 CA 708.3333333333334 120056.0568860294 81200 36744.72465808824 30900
Kern & North Orange County Community College Districts Two-year (public and private not-for-profit) 69 CA 8556.333333333334 77913.8857227468 63600 35529.03559573927 30000
La Sierra University Selective private 23 CA 205 114744.1669207317 81300 52419.90745045732 43200
Lake Tahoe Community College Two-year (public and private not-for-profit) 69 CA 340.6666666666667 86911.49272260274 64600 29165.23548916035 22100
Las Positas College Two-year (public and private not-for-profit) 69 CA 988.5 138317.9216983418 109500 43559.75697280064 37300
Lassen College Two-year (public and private not-for-profit) 69 CA 292 75203.63295519406 64200 29902.41728203481 23300
"Le Cordon Bleu College Of Culinary Arts of Pasadena, CA" Two-year for-profit 11 CA 131.6666666666667 98614.81077927216 64800 31692.84782931171 27600
Long Beach City College Two-year (public and private not-for-profit) 69 CA 3148.666666666667 64488.08888931161 49900 33103.55943694752 28100
West Hills Community College District Two-year (public and private not-for-profit) 69 CA 808 60311.66402122852 46100 31395.34188888328 25600
West Valley-Mission Community College District Two-year (public and private not-for-profit) 69 CA 1567.333333333333 127606.0561828743 91600 42638.32223322523 36700
Westmont College Highly selective private 6 CA 296.6666666666667 293421.6731231765 132100 57369.46232480841 47600
Westwood College - Los Angeles Four-year for-profit 9 CA 412.5 48385.38267342467 37800 30488.57819703511 26400
Westwood College - South Bay Four-year for-profit 9 CA 52.5 49891.94393395967 39500 29111.49305388339 19000
Whittier College Selective private 23 CA 251 198170.0397576361 98500 51710.16999709496 47900
Woodbury University Selective private 23 CA 115.6666666666667 106416.8121847983 61900 45386.35045929395 44300
Yosemite Community College District Two-year (public and private not-for-profit) 69 CA 2879 75045.32366019741 66400 34299.25386237988 28900
Yuba Community College District Two-year (public and private not-for-profit) 69 CA 1240.666666666667 61468.37070753292 48700 30748.12032551384 25400
Los Angeles Community College District Two-year (public and private not-for-profit) 69 CA 8129.333333333333 62361.81124457981 41400 33390.78676740995 28400
Los Rios Community College District Two-year (public and private not-for-profit) 69 CA 5873.333333333333 85024.17192377271 71900 35325.04731750142 31200
Loyola Marymount University Selective private 23 CA 1016 314268.5526164698 131800 66238.50992069594 56200
MTI College Two-year for-profit 11 CA 98 56079.00998544186 48400 31827.19797319738 32300
"Marinello School Of Beauty, Xenon International Academy, International School Of Skin And Nailcare And Hair Professionals Academy" Less than two-year schools of any type 6 CA 591.3333333333334 71783.10046372957 44200 15921.03342937482 11400
Marymount California University Nonselective four-year private not-for-profit 5 CA 110 298825.9512532233 104900 34001.2407544421 31300
Master's College & Seminary Selective private 23 CA 213.6666666666667 142117.1265844384 87700 46047.74650814157 30700
Mendocino College Two-year (public and private not-for-profit) 69 CA 482 78956.25671572442 51900 27068.71580950683 21400
Merced Community College Two-year (public and private not-for-profit) 69 CA 1336.333333333333 59779.38904228873 48400 30197.23811189169 25400
"Milan Institute of Palm Desert, CA" Less than two-year schools of any type 6 CA 242 47744.54783188603 35800 15524.98856229851 19000
Mills College Selective private 23 CA 115 167050.5976449275 79100 47127.57476222826 40200
Miracosta College Two-year (public and private not-for-profit) 69 CA 1413.333333333333 108409.5196049528 71200 34171.06007701946 26500
Monterey Peninsula College Two-year (public and private not-for-profit) 69 CA 722.3333333333334 95532.72385137863 66100 34167.75012437991 27200
Mount San Antonio College Two-year (public and private not-for-profit) 69 CA 4660 76053.56087714592 62800 36643.54247893196 30800
Mount St. Mary's College Selective private 23 CA 222.3333333333333 67906.38965282984 48500 48089.91409178224 44900
Mt. San Jacinto College Two-year (public and private not-for-profit) 69 CA 1448 81050.92463203556 71000 31223.54659039408 25100
Musicians Institute Four-year for-profit 9 CA 170.5 116335.87957967 77400 25945.04778912966 15500
Napa Valley College Two-year (public and private not-for-profit) 69 CA 837 86412.95091908105 75000 37194.80157618976 33700
Occidental College Other elite schools (public and private) 8 CA 380 254125.550095943 122400 58066.14856085526 49000
Ohlone College Two-year (public and private not-for-profit) 69 CA 1059.333333333333 107335.2980943203 91100 44142.780249469 38500
Otis College Of Art & Design Nonselective four-year private not-for-profit 5 CA 124 191723.4730691425 80500 55442.95348031126 47600
Pacific Union College Selective private 23 CA 233 175658.9385613187 96400 57674.84325172578 50700
Palomar College Two-year (public and private not-for-profit) 69 CA 3595.333333333334 94223.16822081286 73500 37108.57361394401 31500
Pasadena City College Two-year (public and private not-for-profit) 69 CA 3321.333333333334 68739.4625550419 44600 34430.09623903866 29500
"Paul Mitchell The School of Costa Mesa, CA" Less than two-year schools of any type 6 CA 227 131895.1188490072 85200 17539.01951594165 10300
Pepperdine University Highly selective private 6 CA 569.3333333333334 371031.0396113876 124100 74970.85491757539 55800
Pitzer College Highly selective private 6 CA 192 434121.4143880208 131900 51976.01988389757 43500
"Platt College of Alhambra, CA" Four-year for-profit 9 CA 99.66666666666667 61987.96098975753 48500 28357.83860916597 24500
Point Loma Nazarene University Selective private 23 CA 501.6666666666667 168316.8486918605 113300 51744.29554869186 45900
Pomona College Other elite schools (public and private) 8 CA 369.3333333333333 324439.5015794224 161600 90406.20436597473 62000
Rancho Santiago Community College District Two-year (public and private not-for-profit) 69 CA 2269.333333333334 86310.7622339986 63600 41066.00839832275 33700
Rio Hondo Community College Two-year (public and private not-for-profit) 69 CA 1545.333333333333 57731.04764934075 46500 35389.45940398511 32400
Riverside Community College District Two-year (public and private not-for-profit) 69 CA 3868.333333333334 80882.55802186558 70800 33397.39899894981 28800
Saddleback College Two-year (public and private not-for-profit) 69 CA 2124.666666666667 138658.739265473 100600 37931.57487449011 31100
Saint Mary's College Of California Selective private 23 CA 509.6666666666667 191245.6763398594 110500 65125.44909473821 55200
San Bernardino Community College District Two-year (public and private not-for-profit) 69 CA 2298.666666666667 69714.46351372173 55000 31807.68551033887 25900
San Diego Community College District Two-year (public and private not-for-profit) 69 CA 4152.666666666667 89368.3024725578 63200 36581.09854297941 30900
San Diego State University Selective public 25 CA 3196.333333333334 139292.3703820784 100500 57036.05158294986 51000
San Francisco Community College District Two-year (public and private not-for-profit) 69 CA 2076.333333333334 72116.39306193811 53400 39077.68185227364 33000
San Francisco State University Selective public 25 CA 1854.666666666667 119248.8324889917 87200 50721.37696014558 45800
San Joaquin Delta College Two-year (public and private not-for-profit) 69 CA 2258.666666666667 78048.92616634077 66300 35298.14719806118 30700
San Joaquin Valley College Two-year for-profit 11 CA 536.5 47284.3910251885 36000 25566.68046375515 21500
San Jose State University Selective public 25 CA 2182.333333333334 115874.4906851421 91700 64343.15491112341 56500
San Jose-Evergreen Community College District Two-year (public and private not-for-profit) 69 CA 1523 82338.57424583445 67900 37561.01985056541 31900
San Mateo County Community College District Two-year (public and private not-for-profit) 69 CA 2601.666666666667 95244.31779107943 77000 44528.05577154068 37800
Santa Barbara Business College Four-year for-profit 9 CA 167 54232.58411820304 39400 23865.80059124432 17100
Santa Barbara City College Two-year (public and private not-for-profit) 69 CA 1827 149972.6476321611 86100 42977.7478106185 31400
Santa Clara University Highly selective private 6 CA 989.6666666666666 327182.7914701919 149900 91531.37010567531 72500
Santa Monica College Two-year (public and private not-for-profit) 69 CA 2886.666666666667 114345.2306969905 51300 37890.72393593028 28800
Santa Rosa Junior College Two-year (public and private not-for-profit) 69 CA 2559.333333333334 97198.35911756805 80900 37894.20293777676 31600
Scripps College Other elite schools (public and private) 8 CA 185 254753.8225788288 126300 54995.78643721848 46400
Sierra College Two-year (public and private not-for-profit) 69 CA 2786.333333333334 101030.3040743884 85900 36985.47884017227 30900
Simpson University Selective private 23 CA 161 89041.90644734784 72700 35757.83329032832 27800
Solano Community College Two-year (public and private not-for-profit) 69 CA 1518.333333333333 87508.3391516877 84300 38895.37011783068 34300
Sonoma State University Selective public 25 CA 907.6666666666666 147106.3358829875 113700 50419.0773144854 46400
Southwestern Community College District Two-year (public and private not-for-profit) 69 CA 2576.5 66043.24526579442 54200 32970.82164600943 28200
Stanford University Ivy Plus 1 CA 1516.333333333333 472210.529161629 172600 174059.0453018521 84800
State Center Community College District Two-year (public and private not-for-profit) 69 CA 5160 62990.5543990734 47600 30411.31555850796 25200
Summit College Less than two-year schools of any type 6 CA 160 54286.06211844044 39600 25353.24785037996 20800
Taft College Two-year (public and private not-for-profit) 69 CA 153.5 71812.95834647905 62300 37623.60947467138 32300
United Education Institute Two-year for-profit 11 CA 1165 35004.68340709943 29600 22615.28371948766 19100
"Universal Technical Institute of Rancho Cucamonga, CA" Two-year for-profit 11 CA 2105 75764.72929532858 62900 43138.19657561362 41300
"University Of California, Berkeley" Highly selective public 4 CA 4624.333333333333 194452.1916312261 114700 93578.78176527697 67900
"University Of California, Davis" Selective public 25 CA 3996 158390.0812518247 109400 72099.31765750125 61600
"University Of California, Irvine" Highly selective public 4 CA 3244.333333333334 121501.6514138434 92100 68174.46898358034 60400
"University Of California, Los Angeles" Other elite schools (public and private) 8 CA 4734 171784.8011041579 105500 82856.58800532055 65800
"University Of California, Riverside" Selective public 25 CA 2364.333333333334 102472.0093611219 75000 59668.70068586546 52800
"University Of California, San Diego" Highly selective public 4 CA 3264.666666666667 176468.6574369512 111300 79191.14698970672 65300
"University Of California, Santa Barbara" Highly selective public 4 CA 3450.333333333334 192472.4304264081 124000 71105.52184797966 58800
"University Of California, Santa Cruz" Selective public 25 CA 2341.666666666667 182158.5701801601 115400 53540.2445290258 46100
University Of La Verne Selective private 23 CA 285.3333333333333 98916.00026467582 72300 56189.73180125584 48600
University Of Redlands Selective private 23 CA 397.3333333333333 209235.6738805579 108400 55441.39038577496 47700
University Of San Diego Highly selective private 6 CA 894 315023.0151421953 139300 72549.48045650306 61200
University Of San Francisco Selective private 23 CA 606.3333333333334 242149.4808101979 106900 69600.16216843046 56900
University Of Southern California Other elite schools (public and private) 8 CA 3052.666666666667 285910.4065639332 120100 92409.22638847181 63700
University Of The Pacific Selective private 23 CA 617.6666666666666 202079.9263356719 96500 68705.45715140988 59000
Vanguard University Of Southern California Selective private 23 CA 240.3333333333333 119919.5007693308 83200 41389.99464177358 32900
Ventura County Community College District Two-year (public and private not-for-profit) 69 CA 4747.333333333333 95888.39963060402 73700 36632.46611118304 30600
Victor Valley Community College Two-year (public and private not-for-profit) 69 CA 1378.666666666667 67682.33843840667 62600 32231.85403507314 25200
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<style>
body {
background-color: whitesmoke;
margin: 0px;
text-align: center;
}
svg {
background-color: white;
}
figure {
margin: 5px 0px;
}
figcaption {
font-family: sans-serif;
font-size: 10pt;
}
text {
font-family: sans-serif;
font-size: 10pt;
fill: black;
}
.axis text {
font-size: 9pt;
}
.bubble text {
visibility: hidden;
}
.bubble circle {
fill-opacity: 0.75;
stroke: white;
stroke-width: 0.5;
}
.hover text {
visibility: visible;
}
.hover circle {
stroke: red;
stroke-width: 1;
}
</style>
</head>
<body>
<figure>
<svg width="940" height="580"></svg>
<figcaption>Source: "<a href="http://www.equality-of-opportunity.org/data/">Online Data Table 1</a>" dataset from the <a href="http://www.equality-of-opportunity.org/">Equality of Opportunity</a> project.</figcaption>
</figure>
<script>
var svg = d3.select("svg");
var g = svg.append("g");
var margin = {
"top": 10, "bottom": 25,
"left": 55, "right": 10
};
var legend = { "width": 100, "height": 20 };
var radius = { "min": 5, "max": 15 };
var plot = {
"width": svg.attr("width") - margin.left - margin.right,
"height": svg.attr("height") - margin.top - margin.bottom
};
console.log("plot area:", [plot.width, plot.height]);
g.attr("id", "plot");
g.attr("transform", translate(margin.left, margin.top));
//d3.csv("mrc_table1.csv", convert, callback);
d3.csv("data.csv", callback)
/* ------------------- */
/*
* called on each row from the csv file. keeps only
* relevant values from the row, renames them to
* something more reasonable, and converts to number
* if appropriate
*/
function convert(row) {
keep = {};
// keep name and id
// rename to something without spaces
keep["name"] = row["Institution Name"];
keep["k_median"]=row["Students' Median Income"]
// keep values for x, y axis
// convert to number (remove extra spaces, commas)
keep["par_median"] = toNumber(row["Parent's Median Income"]);
keep["count1"] = toNumber(row["The Number of Students in a Single Cohort"]);
return keep;
}
/*
* converts strings (with extra spaces and comma thousands
* separators) to a number
*/
function toNumber(text) {
// make sure not given an undefined object
if (text) {
text = text.trim();
text = text.replace(/,/, "");
return +text;
}
return text;
}
/*
* draws visualization after data is loaded
*/
function callback(error, data) {
if (error) throw error;
// make sure to sort the data by the value used for circle area
/*data.sort(function(a, b) {
return a.k_median - b.k_median;
});
*/
// placeholders for our scales and axes
var scales = {};
var axes = {};
var groups = {};
// you can decide on the scales using d3.min, max, and extent
// we already know good values from our tableau prototype
scales["x"] = d3.scaleLinear()
.range([0, plot.width-15])
.domain([0, 9000]);
scales["y"] = d3.scaleLinear()
.range([plot.height, 0])
.domain([-5, 200000]);
// lets programatically set the domains for our other scales
// always use sqrt() to scale circle area
scales["radius"] = d3.scaleSqrt()
.range([5, 15])
.domain(d3.extent(data, function(d) { return d.k_median; }))
.nice();
// using a sequential color scale from:
// https://github.com/d3/d3-scale-chromatic
scales["color"] = d3.scaleSequential(d3.interpolatePRGn)
.domain(d3.extent(data, function(d) {
return d.k_median;
}).reverse())
.nice();
console.log("x domain:", scales.x.domain());
console.log("y domain:", scales.y.domain());
console.log("r domain:", scales.radius.domain());
console.log("c domain:", scales.color.domain());
// lets draw our bubbles!
var bubbles = g.selectAll(".bubble")
.data(data)
.enter()
.append("g")
.attr("id", function(d) { return "id-" + d.id; })
.attr("class", "bubble");
bubbles.append("circle")
.attr("cx", function(d) { return scales.x(d.count1); })
.attr("cy", function(d) { return scales.y(d.p_median); })
.attr("r", function(d) { return scales.radius(d.k_median); })
.style("fill", function(d) { return scales.color(d.k_median); });
// how about some text labels?
/*
bubbles.append("text")
.attr("x", function(d) { return scales.x(d.count1); })
.attr("y", function(d) { return scales.y(d.p_median); })
// adjust position based on location in chart
.attr("dx", function(d) {
var shift = scales.radius(d.count1) + 1;
return d.access > 40 ? -shift : shift;
})
.attr("dy", "0.35em")
.attr("text-anchor", function(d) {
return d.access > 40 ? "end" : "start";
})
.text(function(d) { return d.name; });
*/
// too many to display at once
// only show text labels when group is hovered
bubbles.on("mouseover", function(d) {
// change the class
d3.select(this).classed("hover", true);
// bring the bubble to the front
// breaks sorting, but helps interactivity
d3.select(this).raise();
})
.on("mouseout", function(d, i) {
// remove hover class
d3.select(this).classed("hover", false);
});
// create x-axis generator and svg group
axes["x"] = d3.axisBottom(scales.x);
groups["x"] = svg.append("g")
.attr("id", "x")
.attr("class", "axis");
// p.s. groups["x"] and groups.x are basically the same
// just different ways of accessing object properties
// the [ ] approach works for property names with spaces
// the dot . approach does not work for names with spaces
// i tend to use [ ] for assignment and . for access
// draw axis
groups.x.call(axes.x);
// shift axis to appropriate location
groups.x.attr("transform", translate(margin.left, margin.top + plot.height));
// append axis text
groups.x.append("text")
.attr("x", plot.width)
.attr("y", 0)
.attr("dy", -2)
.attr("text-anchor", "end")
.text("Number of Students in a Cohort");
// do the same for the y-axis
axes["y"] = d3.axisLeft(scales.y);
groups["y"] = svg.append("g")
.attr("id", "y")
.attr("class", "axis");
groups.y.call(axes.y);
groups.y.attr("transform", translate(margin.left, margin.top));
groups.y.append("text")
.attr("x", 0)
.attr("y", 0)
.attr("dy", -4)
.attr("text-anchor", "start")
.attr("transform", "rotate(90)")
.text("Parents' Median Income");
// lets try to make a circle legend
groups["radius"] = svg.append("g")
.attr("id", "radius")
.attr("class", "axis");
// use the circle radius range as our "data"
var selection = groups.radius.selectAll("circle")
.data(scales.radius.range())
.enter();
// add our circles
selection.append("circle")
.attr("cx", 0)
.attr("cy", function(d) { return -d; })
.attr("r", function(d) { return d; })
.style("fill", "none")
.style("stroke", "black")
.style("stroke-width", "1px");
// add our circle labels
selection.append("text")
.attr("x", 0)
.attr("y", function(d) { return -2 * d; })
.attr("dx", 0)
.attr("dy", "-2px")
.attr("text-anchor", "middle")
.text(function(d) {
var value = scales.radius.invert(d);
var label = d3.format(".0s")(value);
return label;
});
// add our legend label
groups.radius.append("text")
.attr("x", 0)
.attr("y", 0)
.attr("dx", 0)
.attr("dy", "1em")
.attr("text-anchor", "middle")
.text("Child Earnings");
// figure out the size of our legend
var radiusBbox = groups.radius.node().getBBox();
// shift our legend to the upper-right corner
groups.radius.attr("transform", translate(margin.left + plot.width - radiusBbox.width / 2, radiusBbox.height));
// hmmm lets make our color legend the same width?
legend.width = radiusBbox.width;
// lets try to make a color legend
groups["legend"] = svg.append("g")
.attr("id", "color")
.attr("class", "axis");
// our color scale doesn't have an invert() function
// and we need some way of mapping 0% and 100% to our domain
// so we'll create a scale to reverse that mapping
scales["percent"] = d3.scaleLinear()
.domain([0, 100].reverse()) // since we reversed the color
.range(scales.color.domain());
// setup gradient for legend
// http://bl.ocks.org/mbostock/1086421
svg.append("defs")
.append("linearGradient")
.attr("id", "gradient")
.selectAll("stop")
.data(d3.ticks(0, 100, 10))
.enter()
.append("stop")
.attr("offset", function(d) {
return d + "%";
})
.attr("stop-color", function(d) {
return scales.color(scales.percent(d));
});
// draw the color rectangle with gradient
groups.legend.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", legend.width)
.attr("height", legend.height)
.attr("fill", "url(#gradient)");
// lets also draw an axis with tick marks at the top
scales["legend"] = d3.scaleLinear()
.domain(scales.color.domain().reverse())
.range([0, legend.width]);
axes["legend"] = d3.axisTop(scales.legend)
.tickValues(scales.color.domain())
.tickFormat(d3.format(".0s"));
groups.legend.call(axes.legend);
// tweak the tick marks
groups.legend.selectAll("text").each(function(d, i) {
if (d == scales.legend.domain()[0]) {
d3.select(this).attr("text-anchor", "start");
}
else if (d == scales.legend.domain()[1]) {
d3.select(this).attr("text-anchor", "end");
}
});
// add text label at the bottom
groups.legend.append("text")
.attr("x", legend.width / 2)
.attr("y", legend.height)
.attr("dx", 0)
.attr("dy", "1em")
.attr("text-anchor", "middle")
.text("Parent Income");
// shift to a nice location
groups.legend.attr("transform", translate(margin.left + plot.width - legend.width, margin.top + legend.height + radiusBbox.height + 20));
}
/*
* returns a translate string for the transform attribute
*/
function translate(x, y) {
return "translate(" + String(x) + "," + String(y) + ")";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment