Skip to content

Instantly share code, notes, and snippets.

@wykbill03

wykbill03/README.md

Created April 4, 2016 07:21
Show Gist options
  • Save wykbill03/a0d6718c9019ce2c692271bc6df13a1c to your computer and use it in GitHub Desktop.
Save wykbill03/a0d6718c9019ce2c692271bc6df13a1c to your computer and use it in GitHub Desktop.
Download ZIP
National Day of Civic Hacking: Learning D3.js (part 1)
Raw
README.md

Join the chat at https://gitter.im/Jay-Oh-eN/interactive-data-viz

These are the materials for an introduction to D3.js workshop for the National day of Civic Hacking (Code for SF) attendees.

We will be using the following two tools to works through these exercises:

I would love your feedback on the materials in the Gitter forum or in the Github issues.

And please do not hesitate to reach out to me directly via email at jondinu@gmail.com or over twitter @clearspandex

Exercises

  • Part 1 (you are here 👇): Bar chart of median rent over time for the Civic Center neighborhood in SF
  • Part 2: Improving the bar chart of median rent by using a line chart instead

The Data

The data is from Zillow and is calculated according to their methodology.

The files are comma separated with headers with each column representing a given neighborhood in SF:

Month Mission Bernal Heights Excelsior ...
2014-014.211248285322362.324840764331211.50130548302872 ...
2014-024.133333333333332.547263681592041.225 ...
2014-034.549214226633582.702127659574472.25225225225225 ...
... ... ... ... ...
---

Archival event link: National Day of Civic Hacking 2015: San Francisco

<style> @import url(http://fonts.googleapis.com/css?family=Crimson+Text:700italic,400,700,400italic); div.gist-readme { font: "Helvetica Neue",Helvetica,Arial,sans-serif; color: #666; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .gist-readme pre { width: 200%; margin-left: -50%; overflow: hidden; } .gist-readme p.small { color: #bbb; font-size: 14px; line-height: 1.5; display: block; } .gist-readme blockquote { padding-left: 15px; border-left: 4px solid #5694f1; color: #aaa; } .gist-readme span.code { font-family: Menlo, Monaco, Courier; background-color: #EEE; font-size: 14px; } .gist-readme pre { font-family: Menlo, Monaco, Courier; white-space: pre-wrap; padding: 20px; font-size: 14px; } .gist-readme code { padding: .25em .5em; font-size: 85%; color: #bf616a; background-color: #f9f9f9; border-radius: 3px; border: 1px solid #eee; } .gist-readme table { width: 100%; margin: 40px 0; border-collapse: collapse; font-size: 13px; line-height: 1.5em; } .gist-readme th, .gist-readme td { text-align: left; padding-right: 20px; vertical-align: top; } .gist-readme table td, .gist-readme td { border-spacing: none; border-style: solid; padding: 10px 15px; border-width: 1px 0 0 0; } .gist-readme tr > td { border-top: 1px solid #eaeaea; } .gist-readme tr:nth-child(odd) > td { background: #fcfcfc; } .gist-readme thead th, .gist-readme th { text-align: left; padding: 10px 15px; height: 20px; font-size: 13px; font-weight: bold; color: #444; border-bottom: 1px solid #dadadc; cursor: default; white-space: nowrap; } </style>
Raw
data.csv
month Mission Bernal Heights Excelsior Central Richmond Bayview Downtown South of Market Central Sunset Tenderloin Visitacion Valley Parkside Pacific Heights Nob Hill Inner Richmond Noe Valley Outer Sunset Portola Outer Richmond Inner Sunset Russian Hill Hayes Valley Marina Van Ness - Civic Center South Beach Lower Pacific Heights Eureka Valley - Dolores Heights - Castro Western Addition Stonestown Potrero Hill North Panhandle Haight-Ashbury Mission Terrace Cow Hollow Glen Park Telegraph Hill Lake North Beach Ingleside Heights Chinatown Alamo Square Lakeshore Parnassus - Ashbury Yerba Buena Mission Bay Miraloma Park Presidio Heights Financial District Presidio Forest Knolls Twin Peaks North Waterfront Diamond Heights Westwood Park Central Waterfront - Dogpatch
2010-02
2010-03 3.1805745554035596
2010-04 2.5429116338207205 3.1805745554035596
2010-05 2.58620689655172 3.0094582975064506
2010-06 2.22335025380711 3.0094582975064506
2010-07 2.14285714285714 3.04347826086956
2010-08 2.76932084309133 2.96610169491525 3.57931034482759
2010-09 2.82954545454545 2.85198555956679 3.57931034482759
2010-10 2.82954545454545 2.96610169491525 3.57931034482759
2010-11 2.9357798165137594 3.04347826086956 3.57931034482759
2010-12 3.4375 3.32539682539683 3.1 2.89878048780488 3.17330210772834 2.9221435793731 3.57931034482759 3.16738816738817
2011-01 2.6666666666666696 2.48011928429423 3.2960477255779304 1.7528089887640401 3.32539682539683 3.1 2.82608695652174 3.13519813519813 2.9221435793731 2.0833333333333304 2.53846153846154 2.0967365967366 3.3869731800766303 3.221875 2.91176470588235
2011-02 2.46153846153846 2.9595015576323997 3.17007534983854 3.1978319783197797 1.7528089887640401 3.32539682539683 2.875 2.5547445255474504 3.46666666666667 2.9221435793731 2.0833333333333304 2.0967365967366 3.73488372093023 3.16738816738817 2.91176470588235
2011-03 2.4324324324324302 1.875 3.4406779661016897 3.2608695652173902 1.7528089887640401 3.32539682539683 2.78571428571429 3.0 2.7793696275071604 2.64817150063052 3.50740452065472 2.93617021276596 2.0833333333333304 2.2132867132867102 3.57931034482759 3.16738816738817 2.91176470588235 2.49326145552561
2011-04 2.4166666666666696 1.99444444444444 3.18115942028985 2.7727272727272703 3.0 3.1214528944381406 3.50740452065472 2.77777777777778 4.08029197080292
2011-05 2.7 2.0 3.1666666666666696 1.65 2.93931731984829 2.85829145728643 2.8125 2.88888888888889 3.43773873185638 2.53275109170306 3.29545454545454 4.2923076923076895
2011-06 2.82608695652174 2.0 2.94511378848728 2.9 2.74602026049204 3.50740452065472 2.49166666666667 2.9753761969904198 2.5283347863993 3.5634743875278403
2011-07 3.4875 2.30369515011547 2.99600532623169 2.93931731984829 2.25903614457831 3.1933333333333302 3.38235294117647
2011-08 2.6056338028169 3.14741035856574 2.7905027932960897 3.53333333333333 4.42546583850932
2011-09 1.98347107438016 3.19444444444444 2.7905027932960897 3.23834196891192 3.9039039039039 4.38047559449312
2011-10 2.8985507246376803 2.2272727272727297 2.97297297297297 3.47551342812006 3.03347280334728 2.68965517241379 3.41176470588235 3.4965034965035 3.2727272727272703 3.9166666666666696 2.26785714285714 3.24742268041237 2.7058823529411806 4.38047559449312 3.64485981308411
2011-11 2.8285714285714305 2.11180124223602 2.1115668580803897 3.04679552390641 3.6108108108108103 2.93931731984829 3.66812227074236 2.18181818181818 2.90076335877863 3.03030303030303 3.5233711048158596 3.89444444444444 3.26481257557437 4.2852713178294595 3.41379310344827 2.55645161290323
2011-12 2.8285714285714305 2.11180124223602 2.30593881223755 3.25 3.6192660550458697 3.4604651162790696 3.03347280334728 3.66812227074236 3.5736842105263196 2.4 2.51141552511415 3.41038812785388 4.03555555555555 3.39130434782609 2.44360902255639 4.2566709021601 4.6153846153846105 2.944
2012-01 3.20247933884297 2.30593881223755 2.95 3.7013698630137 2.7727272727272703 3.24375 3.18 2.4375 3.31666666666667 2.71055179090029 3.43682906688687 4.24867724867725 3.54519774011299 4.05727923627685 4.35280641466208 2.944
2012-02 2.80448717948718 1.0 2.25776105362183 3.04679552390641 3.87733333333333 2.85 3.21428571428571 3.49344978165939 2.35454545454545 2.99 3.4452296819787995 1.8818760856977401 3.3333333333333304 3.9983844911147006 3.7328 3.5 3.60727272727273 2.90909090909091 4.05727923627685 3.5752330226364797 4.45205479452055 3.1063636363636404 3.07692307692308 2.85826155050901
2012-03 2.38549618320611 2.52902155887231 2.25776105362183 3.04679552390641 3.4615384615384603 1.84615384615385 4.12650602409639 2.79189944134078 3.81818181818182 2.9195979899497497 3.3333333333333304 2.9 3.02863436123348 3.1808422791081696 3.8560000000000003 3.41738197424893 3.55 3.1686358754027903 4.37727272727273 2.44360902255639 3.6433628318584104 3.44204851752021 4.08898305084746 3.14666666666667 3.07692307692308 3.3703071672354903 2.85826155050901
2012-04 3.24675324675325 2.52902155887231 2.0801317233809002 3.04679552390641 3.2941176470588194 1.85909090909091 4.17400881057269 1.85185185185185 3.25 3.54 2.5 2.6865671641791002 3.0530973451327403 2.96875 3.46113445378151 3.248670998228 3.8784 3.12753858651503 3.17021276595745 2.7058823529411806 3.5714285714285694 4.17142857142857 4.1838134430727 4.63917525773196 3.8551724137931003 3.05555555555555
2012-05 3.11111111111111 2.1296296296296298 3.16129032258065 3.64838709677419 3.8353413654618502 3.55182926829268 3.57491062723432 2.80952380952381 3.6231884057971 3.1526291298278304 3.28571428571429 3.625 3.6386946386946404 3.9535135135135095 2.71281571562208 2.74193548387097 3.1724137931034497 4.17130919220056 4.02727272727273 4.17661097852029 4.64574898785425 4.34909090909091 3.05555555555555
2012-06 3.1067961165048503 3.1809145129224596 1.95 2.24146147736299 3.6281179138322 3.6915504511895003 3.8353413654618502 1.99545454545454 3.4334763948497904 3.4229828850855695 3.11462450592885 3.6231884057971 2.28544600938967 3.2258064516129 3.7656903765690397 3.6451990632318503 4.2544 2.67857142857143 2.5 2.60281103591879 4.17130919220056 4.08461538461538 3.81238615664845 3.24779541446208 4.45205479452055 4.343636363636359 3.6734693877551003 3.05846422338569
2012-07 3.2666666666666697 2.5969976905311802 0.9596153846153841 1.84873949579832 4.14424111948331 3.7369420702753997 4.33734939759036 3.6875 3.4285714285714306 2.9497487437185903 3.0818181818181802 4.0577716643741395 3.6252927400468398 4.2208 3.1968031968032005 2.88272727272727 2.47422680412371 2.60281103591879 4.07216494845361 4.31519699812383 2.46305418719212 4.5 4.343636363636359 3.72399445214979 2.98287345385347
2012-08 3.0 2.2366522366522403 2.06100577081616 3.9715536105032796 3.64655172413793 1.8181818181818201 4.4578313253012 3.47517730496454 3.2727272727272703 2.88888888888889 3.28162291169451 2.77777777777778 3.33125 3.9312039312039304 3.40609555189456 3.97837837837838 1.06761565836299 3.02127659574468 2.90053050397878 3.46341463414634 2.78571428571429 3.21428571428571 4.07216494845361 4.29378531073446 2.69966254218223 4.45205479452055 4.09076923076923 3.5384615384615397 2.81196581196581
2012-09 2.4951923076923097 1.86706497386109 0.914634146341463 2.1476130653266297 3.47222222222222 3.7418147801683803 4.58333333333333 3.41379310344827 3.80824372759857 0.7142857142857142 3.125 1.07095046854083 4.0 3.1526291298278304 3.33125 3.9312039312039304 3.47579425113464 4.195 3.38418079096045 3.12359550561798 3.02122015915119 3.46341463414634 2.4813895781637703 2.81818181818182 2.3622047244094504 4.07216494845361 4.08719346049046 3.5743464052287597 4.18098510882016 3.9419999999999997 3.67669172932331 2.6870078740157504
2012-10 3.0 1.9975 1.20833333333333 2.3802729528536 3.7405812701829904 3.8527027027027 1.6773162939297102 4.2375 3.4334763948497904 3.80824372759857 0.833333333333333 2.96273671350031 0.9530791788856301 3.58208955223881 3.11111111111111 2.1052631578947403 3.97877984084881 3.56521739130435 4.4496 2.5386012715712996 2.2727272727272703 4.5454545454545405 4.18509895227008 2.69966254218223 3.98391812865497 3.92 3.07692307692308 2.96943231441048
2012-11 3.0 1.97095435684647 2.34181141439206 3.78234398782344 3.7616438356164403 3.84246575342466 3.08953341740227 4.00909090909091 1.07903965470731 2.82352941176471 0.6666666666666661 3.5078993563487404 1.5555555555555503 2.22884615384615 4.004914004914 3.73212121212121 4.29157894736842 1.0 3.74875 3.69595536959554 3.6533559898045898 1.9867549668874198 4.03225806451613 3.76140808344198 3.0551905387647795
2012-12 3.1063321385902 2.3114956736712005 2.31502423263328 3.7248322147651 3.7616438356164403 4.29 3.55 3.8333333333333304 1.0 3.01507537688442 1.98 3.5 3.2636363636363597 4.02684563758389 3.75523012552301 4.216 3.3333333333333304 3.2861476238624903 3.1971223021582698 3.0973451327433597 2.5833333333333304 1.06060606060606 3.4965034965035 4.16666666666667 3.58424725822532 3.58870967741935 3.0416666666666696 2.96504369538077 4.19272727272727 3.5384615384615397 4.49915110356536 3.3257506824385796
2013-01 3.38983050847458 2.4788135593220297 2.25848142164782 4.06779661016949 3.7623853211009197 4.35593220338983 1.78929765886288 3.9463220675944304 3.8333333333333304 1.0 3.3266666666666698 2.52666666666667 3.96036585365854 2.62894736842105 3.05555555555555 3.9367396593674 3.86601307189542 4.0384 3.66551724137931 3.8921568627451 2.68489208633093 3.6985018726591803 3.0 3.8645161290322596 4.16666666666667 3.62758620689655 3.58490566037736 2.8125 4.28181818181818 3.61867704280156 4.49915110356536 3.23979591836735
2013-02 3.5 2.22857142857143 2.26755852842809 4.5 3.8861985472155 4.1566265060241 2.90909090909091 3.84 1.19642857142857 3.33165829145729 2.1875 1.2576335877862599 3.90702274975272 2.62894736842105 3.70762711864407 3.9367396593674 3.90666666666667 3.84108108108108 3.42592592592593 3.77654196157735 2.54936708860759 3.995 3.24675324675325 3.71428571428571 3.5379746835442996 3.7310344827586204 3.49593495934959 2.7808676307007794 3.9970059880239504 3.1369982547993
2013-03 3.2991202346041 2.3255813953488396 2.0 4.27682737169518 3.9572192513369 4.03 3.1666666666666696 3.8659793814432994 2.27156712608474 2.2681787858572404 2.1098901098901104 3.90702274975272 3.3333333333333304 3.48404255319149 4.00126742712294 4.15456674473068 3.48976982097187 3.3612542955326496 3.79746835443038 3.6815789473684197 2.1481481481481497 3.71428571428571 3.5087719298245603 4.35862068965517 2.6666666666666696 5.78673602080624
2013-04 3.1531531531531503 1.88518378173551 2.29607250755287 3.89408099688473 4.03825717321998 3.9888888888888903 3.13888888888889 3.75 1.00574712643678 2.45454545454545 2.25786163522013 4.85212569316081 3.31666666666667 2.98850574712644 3.9367396593674 4.15456674473068 4.2144 3.75553097345133 2.70291777188329 3.24395770392749 2.63157894736842 3.92592592592593 1.75284837861525 4.21592279855247 4.06698564593301 3.3333333333333304 5.30179445350734 3.09055118110236
2013-05 3.4965034965035 1.70454545454545 2.0 1.9271948608137 4.69565217391304 4.16666666666667 3.83846153846154 2.28846153846154 3.2666666666666697 3.8984587488667297 2.44444444444444 3.8944723618090404 2.24137931034483 4.15754923413567 2.03125 3.5736842105263196 4.197478991596641 4.30445544554455 4.30851063829787 3.2860824742267996 4.00512820512821 2.7560000000000002 3.34905660377358 2.63157894736842 4.33333333333333 4.21592279855247 4.0 4.06698564593301 3.88166666666667 5.428571428571429 3.0791788856305
2013-06 3.2541776605101096 1.5426497277676898 2.16368767638758 4.84411085450346 4.16666666666667 3.17460317460317 0.923076923076923 3.36247478143914 4.14814814814815 3.96666666666667 2.3494860499265804 2.41013071895425 2.73607748184019 3.6875 2.63374485596708 3.66333333333333 4.197478991596641 4.26136363636364 4.37062937062937 2.73658192090395 4.13725490196078 2.70291777188329 3.67335562987737 1.24203821656051 3.53333333333333 4.39759036144578 4.38888888888889 3.89426957223567 4.20438683948155 2.12121212121212 2.27963525835866 3.3403141361256496 3.99659863945578 5.20416666666667 3.00751879699248 3.25768667642753
2013-07 4.28571428571428 1.2093023255814 1.50501672240803 5.02886836027714 4.25 3.8365384615384603 3.2478632478632496 4.20072661217075 1.50066401062417 3.6783919597989905 1.5290519877675801 2.26818181818182 4.405737704918031 3.39130434782609 3.8 4.19982316534041 4.72121212121212 3.99285714285714 2.73658192090395 4.13333333333333 2.702 4.22885572139303 3.3333333333333304 3.53333333333333 4.389880952380951 0.8103727714748779 4.44444444444444 3.8395904436860095 4.20438683948155 3.88888888888889 2.70177838577291 3.1707317073170698 3.99659863945578 2.8136363636363595 4.11806543385491 3.2
2013-08 3.8451668092386604 2.0833333333333304 2.13377416073245 5.2592592592592595 3.9824561403508802 3.88888888888889 3.77155172413793 4.44444444444444 0.850591715976331 3.4 2.26818181818182 3.75 3.39130434782609 3.88 4.77239353891336 4.41084558823529 4.06338694418165 3.71875 3.7239583333333304 2.702 3.39130434782609 2.51851851851852 3.3316666666666697 4.28571428571428 4.6047582501918605 1.16129032258065 3.9558417663293497 2.6938775510204103 3.4679543459174704 4.3134872417983 3.75 3.46491228070175 3.65650969529086 2.8136363636363595 4.24319727891156 3.4285714285714306
2013-09 4.0 2.67175572519084 2.1097308488612803 5.5 4.00473372781065 2.24673202614379 3.6724137931034497 3.9583333333333304 1.0684491978609598 2.665 4.259740259740259 3.5416666666666696 4.33333333333333 4.12719891745602 3.5701021355617404 3.75 2.87063492063492 3.8147792706334003 2.62631578947368 4.09090909090909 4.06441717791411 3.96323529411765 4.23620025673941 4.593929450369151 4.66114457831325 3.76833333333333 3.6211699164345403 3.4285714285714306
2013-10 4.29704016913319 2.69080234833659 5.07692307692308 4.0037037037037 1.9021739130434798 2.21428571428571 3.59333333333333 4.0 1.12676056338028 2.44444444444444 1.9023809523809498 4.14930555555556 3.8508771929824595 4.33948863636364 4.4078319006685796 3.7760416666666696 2.40625 2.8395225464191003 3.63051470588235 3.125 4.05555555555556 2.4703557312253 4.18410041841004 4.2725509214355 3.75 3.6510000000000002 4.65444287729196
2013-11 4.0125 1.89853658536585 2.03083333333333 4.6153846153846105 4.0 3.8333333333333304 1.916 3.63157894736842 3.54223433242507 2.74862568715642 2.0 2.6875 4.14930555555556 3.75 4.40577716643741 4.30555555555556 3.1470588235294104 1.67924528301887 3.0310945273631797 3.07112068965517 3.1 3.06923076923077 3.92592592592593 3.6316947909024195 3.17727272727273 2.7424094025465204 4.19770773638968 4.18781725888325 3.9064748201438797 3.61090909090909 3.52262234533703 3.0 4.08898305084746 3.3614864864864904 3.4285714285714306
2013-12 4.2512690355329905 2.53333333333333 1.1 1.51724137931034 4.59259259259259 4.05821917808219 3.88888888888889 3.6771300448430497 3.97614314115308 0.977653631284916 2.82608695652174 3.7758620689655205 2.2459078797107 3.94736842105263 4.38216560509554 4.08852213053263 3.3 2.72331154684096 3.0310945273631797 2.9633620689655205 3.2941176470588194 3.80388841927303 4.0 3.02197802197802 4.00668576886342 4.23913043478261 4.29896907216495 3.803 3.81414701803051 2.58192651439921 4.1749502982107405 3.20794590025359
2014-01 4.21124828532236 2.32484076433121 1.50130548302872 1.89473684210526 5.27272727272727 4.07297096053611 3.88888888888889 3.62976406533575 3.36351875808538 1.68868921775898 3.45779220779221 2.03720106288751 1.25 3.90702274975272 4.1131498470948 4.0263157894736805 4.36363636363636 4.30769230769231 3.375 3.75170532060027 3.15673575129534 2.99273387829246 3.34919472913616 3.5414480587618 3.47343841214244 3.6136363636363598 3.3146067415730296 3.9344262295082 4.19289340101523 3.2674118658641405 3.987 4.13416536661466 4.65444287729196
2014-02 4.21124828532236 2.54726368159204 1.225 2.15252152521525 4.94987468671679 4.16480446927374 2.4583333333333304 3.992 3.62976406533575 3.5714285714285694 2.6 3.2666666666666697 2.5 2.19888268156424 3.9 3.94990366088632 3.86666666666667 4.361510791366911 4.20168067226891 3.495 3.5714285714285694 2.95054945054945 3.2 3.5714285714285694 2.15384615384615 3.3085501858736004 4.0 3.8361508452535804 4.0316742081448 4.16751269035533 3.88888888888889 4.01428571428571 4.0375939849624105 1.46153846153846 4.57142857142857
2014-03 4.1441788743253705 2.47619047619048 2.45092024539877 1.47642679900744 4.82456140350877 4.1878940731399705 1.68596237337192 4.28571428571428 4.02298850574713 2.5889121338912098 3.2916666666666696 2.33747260774288 1.64 3.46320346320346 3.7758620689655205 4.16666666666667 3.87365911799762 4.44444444444444 4.22138836772983 3.6190476190476204 3.50130890052356 2.95054945054945 3.3653846153846096 3.69127516778523 4.142857142857141 3.78571428571429 4.45379310344827 4.11392405063291 2.06912442396313 4.07818181818182 4.10526315789474 4.81896551724138 2.6431718061673997
2014-04 4.54921422663358 2.70212765957447 2.25225225225225 4.90282685512367 4.24137931034483 4.87 0.7352941176470579 4.0 3.4897713598074596 1.0592715231788101 4.5 2.9105928085519905 1.9117647058823501 2.9778629203916602 3.7758620689655205 4.63636363636364 4.28571428571428 4.47727272727273 4.41428571428571 3.97297297297297 3.87658227848101 3.00854700854701 3.65311308767471 3.82498624105669 4.6875 3.24137931034483 3.81818181818182 4.72727272727273 4.24778761061947 4.3045977011494205 4.240932642487049 4.40729483282675 4.324 4.10526315789474 2.56 5.43478260869565 3.0789133247089304 2.6666666666666696
2014-05 4.31063122923588 3.21083172147002 2.61538461538461 4.7068403908794805 4.15859564164649 4.04560810810811 3.9 3.89908256880734 2.97435897435897 4.0 2.81818181818182 3.0222222222222204 4.142857142857141 4.375 3.9285714285714306 4.55172413793103 4.32187201528176 4.4538461538461505 3.995 4.3073593073593095 3.03183791606368 4.118616144975291 4.1 4.16666666666667 3.19506726457399 3.78571428571429 3.6563071297989 4.62068965517241 4.3976683937823795 4.142857142857141 4.527272727272731 4.22307692307692 2.9039463886820496 5.43478260869565 3.24844720496894 3.4992836676217802
2014-06 3.9966666666666697 2.8214285714285694 2.4118738404452698 2.31023102310231 5.224820143884889 4.22297297297297 0.983333333333333 4.3219178082191805 2.2432432432432403 3.8953134510042595 3.4939759036144604 2.7272727272727297 3.30756013745704 2.625 3.1666666666666696 3.75 4.40498442367601 3.375 4.656160458452719 4.19580419580419 3.495 3.34033613445378 3.30996884735202 2.82352941176471 3.52549889135255 2.8 4.402895054282269 4.524904214559389 4.22142286171063 3.6600496277915604 4.24916666666667 4.4244105409154 5.452218430034129 3.4285714285714306
2014-07 4.13333333333333 2.74976213130352 2.24 4.8635477582846 4.30451127819549 1.28068303094984 4.66666666666667 3.87864077669903 3.4939759036144604 2.95 3.9285714285714306 2.3574144486692004 3.28125 4.136690647482009 4.2186001917545495 3.375 4.55172413793103 4.35294117647059 4.49025487256372 3.98009950248756 3.1517094017094 3.61111111111111 2.86666666666667 3.99 2.8 4.38095238095238 3.4210526315789505 4.44827586206897 4.11051212938005 3.9735099337748303 4.48866666666667 4.90977443609022 3.71155885471898
2014-08 4.548635409377191 2.85714285714286 3.0 4.88372093023256 4.32555780933063 4.37062937062937 4.41037735849057 3.046875 4.0 2.9757343550447 4.21428571428571 4.142857142857141 4.0 4.58762886597938 4.50416351249054 4.59666666666667 3.75 3.10751295336788 3.8423076923076898 3.99 3.4285714285714306 3.77777777777778 4.83870967741935 3.6470588235294104 4.487547892720309 4.24528301886792 4.1044776119402995 4.85 4.72 4.99152542372881 3.84615384615385
2014-09 4.71956224350205 3.41176470588235 1.3647540983606499 2.6003649635036497 5.5 4.37275985663082 4.5424657534246595 4.35987903225806 3.7745098039215694 3.94444444444444 2.81196581196581 3.9198606271777003 4.78571428571428 4.20526315789474 4.6448087431694 5.14089870525514 4.57142857142857 3.6482694106641698 3.31668009669621 3.8423076923076898 3.16261879619852 4.31818181818182 3.2698412698412698 3.86652542372881 4.72727272727273 4.82758620689655 4.11764705882353 4.1044776119402995 3.8589743589743595 4.5789473684210495 4.96894409937888 3.52540834845735 3.8333333333333304
2014-10 4.0273556231003 4.06666666666667 2.0833333333333304 4.98863636363636 4.58379888268156 2.59815242494226 4.611111111111111 4.06338694418165 3.9583333333333304 4.06740267286461 2.7071428571428595 3.23404255319149 3.7758620689655205 4.375 4.728070175438599 4.26666666666667 4.860148514851481 4.6 4.275 2.87065217391304 4.0454545454545405 3.8291666666666697 4.33333333333333 4.66666666666667 4.7438330170778 4.25217391304348 4.71464019851117 4.0760000000000005 4.72932330827068 4.9118387909319905 3.53958143767061
2014-11 4.5 3.5 2.8333333333333304 2.0833333333333304 2.74542429284526 5.21590909090909 4.6831797235023 2.58461538461538 4.36 4.5454545454545405 3.9195979899497497 2.4888888888888903 4.16666666666667 4.16666666666667 4.70909090909091 4.35064935064935 4.6875 4.55555555555556 3.04630381803412 4.09270216962525 4.36363636363636 3.9375 3.50526315789474 4.76957831325301 4.17982989064399 4.8484848484848495 3.98809523809524 4.71428571428571 4.9151103565365 3.5259326660600494 3.4
2014-12 4.7593984962406 3.40909090909091 2.72222222222222 4.78666666666667 4.76190476190476 2.496875 3.92876712328767 4.405737704918031 4.829545454545451 4.080402010050251 4.1773231031543 5.804953560371519 4.69565217391304 4.72727272727273 4.929577464788731 4.375 4.04669260700389 3.2597826086956503 4.00350525788683 3.4375 4.12666666666667 3.55405910961466 3.4285714285714306 5.17253278122843 4.77931034482759 4.26963103122043 3.8589743589743595 4.6390977443609005 4.9151103565365 3.23109243697479 3.4
2015-01 4.75 3.2846715328467204 5.325630252100839 4.8728813559322 2.43055555555555 3.865 4.44803881924788 4.96664195700519 4.11111111111111 4.15392156862745 4.44444444444444 5.8074534161490705 4.53636363636364 4.710365853658541 4.97159090909091 4.28954423592493 4.275 3.2597826086956503 4.16 4.12666666666667 5.716878402903809 2.69230769230769 4.2174320524836 4.774904214559389 4.371428571428569 4.454545454545451 4.91766467065868 5.1529790660225405 3.47133757961783 3.46907993966817
2015-02 4.702300405953991 3.25116279069767 4.73211567732116 4.742612011439469 2.97101449275362 4.22 5.0 4.91256830601093 4.37910541132312 3.18181818181818 3.8972929936305696 4.44444444444444 5.726351351351349 4.0 4.7568710359408 4.84962406015037 4.2789189189189205 4.275 3.20384615384615 3.98100803506209 4.46153846153846 3.2727272727272703 4.4858523119392695 4.7438330170778 4.42605915267786 4.02833333333333 4.91766467065868 5.3484602917342
2015-03 4.89719626168224 3.375 3.2 2.460024600246 4.98863636363636 4.76890756302521 4.52465753424658 5.0 4.8 4.37910541132312 3.3699059561128504 4.5454545454545405 5.44545454545455 4.3890243902438995 4.6611111111111105 4.66666666666667 4.67687074829932 4.32851985559567 3.27564102564103 4.44444444444444 4.497126436781611 4.36363636363636 3.91304347826087 5.22727272727273 4.5217391304347805 4.849612403100769 4.32490013315579 4.27133333333333 4.9 3.20794590025359
2015-04 4.90174672489083 4.295 3.06186152099886 2.09121621621622 5.16129032258065 4.915862068965519 4.52465753424658 5.0 4.8628428927680805 3.2666666666666697 4.3 3.11875 3.3333333333333304 4.90909090909091 5.32666666666667 4.59 4.753804834377799 4.813118811881191 4.57916666666667 4.5 3.36787564766839 4.58333333333333 4.5 3.88059701492537 5.0 3.6666666666666696 4.6 3.6956521739130404 4.2894280762565 4.995 4.492102065613611 4.57831325301205 4.8502994011976 4.9118387909319905 4.06455862977602 3.6611111111111097
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
<style>
body {
font-family: futura;
}
h2.title {
color: black;
text-align: center;
}
.axis {
font-family: arial;
font-size: 0.7em;
}
text {
fill: black;
stroke: none;
}
.label {
font-size: 2em;
}
path {
fill: none;
stroke: black;
stroke-width: 2px;
}
.tick {
fill: none;
stroke: black;
}
.bar {
opacity: 0.9;
stroke: none;
fill: steelblue;
}
</style>
<script type="text/javascript">
// https://github.com/mbostock/d3/wiki/Time-Formatting
format = d3.time.format("%Y-%m");
function draw(data) {
"use strict";
debugger;
// set margins according to Mike Bostock's margin conventions
// http://bl.ocks.org/mbostock/3019563
var margin = {top: 25, right: 40, bottom: 100, left: 75};
// set height and width of chart
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var barPadding = 10;
// specify the radius of our circles and the
// column we want to plot
var field = 'Van Ness - Civic Center';
// Append the title for the graph
d3.select("body")
.append("h2")
.text("Civic Center Median Rent")
.attr('class', 'title');
// append the SVG tag with height and width to accommodate for margins
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append('g')
.attr('class','chart')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// remove missing values
data = data.filter(function(d) {
return d[field];
});
// bind our data to svg rects for the bar plot
svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr('class', 'bar')
// maximum price for rent
var max_y = d3.max(data, function(d) {
return +d[field];
});
// get min/max dates
var time_extent = d3.extent(data, function(d){
return format.parse(d['month']);
});
// Create x-axis scale mapping dates -> pixels
var time_scale = d3.time.scale()
.range([0, width])
.domain(time_extent);
// Create y-axis scale mapping price -> pixels
var measure_scale = d3.scale.linear()
.range([height, 0])
.domain([0, max_y]);
// Create D3 axis object from time_scale for the x-axis
var time_axis = d3.svg.axis()
.scale(time_scale)
.tickFormat(d3.time.format("%b %y"));
// Create D3 axis object from measure_scale for the y-axis
var measure_axis = d3.svg.axis()
.scale(measure_scale)
.orient("left");
// Append SVG to page corresponding to the D3 x-axis
svg.append('g')
.attr('class', 'x axis')
.attr('transform', "translate(0," + height + ")")
.call(time_axis);
// Append SVG to page corresponding to the D3 y-axis
svg.append('g')
.attr('class', 'y axis')
.call(measure_axis);
// add label to y-axis
var y_label = d3.select(".y.axis")
.append("text")
.attr('class', 'label')
.text("Price (dollar/sq-ft)")
.style('font-size', '1.2em')
.attr("transform", "rotate(-90)");
// center y axis label
y_label.attr("x", -(height / 2)).attr('y', -40)
.style("text-anchor", "middle");
// based on the data bound to each svg rect,
// change its x, y, width, height accordingly
d3.selectAll('.bar')
.attr('x', function(d) {
return time_scale(format.parse(d['month']));
})
.attr('width', function(d) {
return width / data.length - barPadding;
})
.attr('y', function(d) {
return measure_scale(+d[field]);
})
.attr('height', function(d) {
return height - measure_scale(+d[field]);
});
};
</script>
</head>
<body>
<script type="text/javascript">
// load our data file asynchronously and pass the data
// to the draw function once it is loaded.
d3.csv("data.csv", draw);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment