Last active
June 27, 2017 08:50
-
-
Save hahastudio/5a6d5f99b43582bd724a29304a3b7a80 to your computer and use it in GitHub Desktop.
d3.js Bar Line chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| date | deaths | accidents | |
|---|---|---|---|
| 19830101 | 1068 | 107 | |
| 19840101 | 1042 | 104 | |
| 19850101 | 956 | 97 | |
| 19860101 | 967 | 95 | |
| 19870101 | 837 | 92 | |
| 19880101 | 797 | 87 | |
| 19890101 | 769 | 80 | |
| 19900101 | 770 | 79 | |
| 19910101 | 800 | 79 | |
| 19920101 | 867 | 85 | |
| 19930101 | 744 | 91 | |
| 19940101 | 730 | 91 | |
| 19950101 | 735 | 83 | |
| 19960101 | 636 | 77 | |
| 19970101 | 631 | 72 | |
| 19980101 | 625 | 75 | |
| 19990101 | 619 | 65 | |
| 20000101 | 596 | 66 | |
| 20010101 | 562 | 68 | |
| 20020101 | 581 | 67 | |
| 20030101 | 633 | 67 | |
| 20040101 | 559 | 65 | |
| 20050101 | 563 | 72 | |
| 20060101 | 706 | 64 | |
| 20070101 | 496 | 69 | |
| 20080101 | 494 | 69 | |
| 20090101 | 474 | 72 | |
| 20100101 | 454 | 66 | |
| 20110101 | 444 | 65 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>General aviation statistics</title> | |
| <head> | |
| <style> | |
| body {font: 12px/1.231 'Helvetica Neue', Helvetica, arial, sans-serif;} | |
| h1, h2, h3, h4, h5, h6 {color:#333;} | |
| h1 {font-weight: 700; font-size: 36px;} | |
| h3 {font-family: 'Helvetica Neue', Helvetica, arial, sans-serif; font-weight: 700; color: #333; margin: 5px 0 3px;} | |
| p {font: normal 12px/1.5 'Helvetica Neue', Helvetica, arial, sans-serif; color: #666;} | |
| strong {font-weight: 700;} | |
| a {text-decoration: none;} | |
| /* HTML5 display-role reset for older browsers */ | |
| article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { | |
| display: block; | |
| } | |
| html, body { | |
| line-height: 1; | |
| width: 100% !important; | |
| height: 100%; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| h4 { | |
| font-size: 10px; | |
| font-weight: normal; | |
| text-align: left; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| width: 170px; | |
| height: 11px; | |
| color: #888; | |
| } | |
| .p1 { | |
| margin: 0; | |
| padding: 5px; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| h3 { | |
| font-size: 14px; | |
| font-weight: normal; | |
| font-family:'Futura Today Bold'; | |
| text-align: left; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| width: 170px; | |
| height: 11px; | |
| color: #888; | |
| } | |
| blockquote, q { | |
| quotes: none; | |
| } | |
| blockquote:before, blockquote:after, q:before, q:after { | |
| content:''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| * { | |
| margin: 0; | |
| } | |
| @font-face { | |
| font-family:'Futura Today'; | |
| src: url(http://i.usatoday.net/news/graphics/elections-2012-app/static/fonts/futura_today_normal.eot); | |
| src: url(http://i.usatoday.net/news/graphics/elections-2012-app/static/fonts/futura_today_normal.eot?#iefix) format('embedded-opentype'), url(http://i.usatoday.net/news/graphics/elections-2012-app/static/fonts/futura_today_normal.woff) format('woff'), url(http://i.usatoday.net/news/graphics/elections-2012-app/static/fonts/futura_today_normal.ttf) format('truetype'), url(../../fonts/futura_bold-webfont.svg#FuturaBold) format('svg'); | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family:'Futura Today Light'; | |
| src: url(http://i.usatoday.net/news/graphics/elections-2012-app/static/fonts/futura_today_light.eot); | |
| src: url(http://i.usatoday.net/news/graphics/elections-2012-app/static/fonts/futura_today_light.eot?#iefix) format('embedded-opentype'), url(http://i.usatoday.net/news/graphics/elections-2012-app/static/fonts/futura_today_light.woff) format('woff'), url(http://i.usatoday.net/news/graphics/elections-2012-app/static/fonts/futura_today_light.ttf) format('truetype'), url(http://i.usatoday.net/news/graphics/elections-2012-app/static/fonts/futura_light-webfont.svg#FuturaLight) format('svg'); | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family:'Futura Today Bold'; | |
| src: url(http://i.usatoday.net/news/graphics/elections-2012-app/static/fonts/futura_today_bold.eot); | |
| src: url(http://i.usatoday.net/news/graphics/elections-2012-app/static/fonts/futura_today_bold.eot?#iefix) format('embedded-opentype'), url(http://i.usatoday.net/news/graphics/elections-2012-app/static/fonts/futura_today_bold.woff) format('woff'), url(http://i.usatoday.net/news/graphics/elections-2012-app/static/fonts/futura_today_bold.ttf) format('truetype'), url(http://i.usatoday.net/news/graphics/elections-2012-app/static/fonts/futura_bold-webfont.svg#FuturaBold) format('svg'); | |
| font-style: normal; | |
| } | |
| /* ============================================================================= | |
| Primary Styles | |
| ========================================================================== */ | |
| body { | |
| font: 12px/1.231 Arial, Helvetica, sans-serif; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| color:#333; | |
| } | |
| h1 { | |
| font-weight: 700; | |
| font-size: 36px; | |
| } | |
| h3 { | |
| font-family:'helvetica', 'arial', sans-serif; | |
| font-weight: 700; | |
| color: #333; | |
| margin: 5px 0 3px; | |
| } | |
| p { | |
| font: normal 12px/1.5'arial', 'helvetica', sans-serif; | |
| color: #666; | |
| } | |
| strong { | |
| font-weight: 700; | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| img { | |
| border: 0; | |
| max-width: 100%; | |
| } | |
| img.floatleft { | |
| float: left; | |
| margin: 0 10px 0 0; | |
| } | |
| img.floatright { | |
| float: right; | |
| margin: 0 0 0 10px; | |
| } | |
| cite { | |
| float: right; | |
| font-size: 11px; | |
| color: #707070 | |
| } | |
| /* ============================================================================= | |
| BASE PROJECT CLASSES | |
| ========================================================================== */ | |
| .outter-wrap { | |
| background:#fff; | |
| margin: 0 auto 20px; | |
| padding: 0; | |
| width:100%; | |
| max-width:1000px; | |
| border: 1px solid #ccc; | |
| border-top: none; | |
| position: relative; | |
| } | |
| .outter-wrap:before { | |
| content:""; | |
| display: block; | |
| border-top:10px solid rgb(0, 155, 255); | |
| position: relative; | |
| width: 100%; | |
| left: -1px; | |
| } | |
| .head-wrap { | |
| background: #f8f8f8 url('../graphics/head-wrap-bg.jpg') bottom repeat-x; | |
| padding: 0 0 20px; | |
| margin: 0 0 15px; | |
| } | |
| .head-wrap h1 { | |
| font: 700 32px/34px'helvetica', 'arial', sans-serif; | |
| margin:0; | |
| padding: 15px 0 0; | |
| } | |
| .head-wrap h2 { | |
| font: normal 30px/1.3 'Futura Today Light','arial';; | |
| padding: 15px 0 5px; | |
| text-transform: uppercase; | |
| color: #3C3C3C; | |
| text-align: center; | |
| } | |
| .head-wrap p { | |
| font:normal 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| color: #7c7c7c; | |
| text-align: center; | |
| } | |
| .main-content-wrap { | |
| display: block; | |
| margin: 0 20px; | |
| } | |
| .main-content-wrap p { | |
| margin: 0 0 20px; | |
| } | |
| .footer-wrap { | |
| padding: 10px; | |
| margin: 30px 0 0; | |
| background: #ececec; | |
| min-height: 20px; | |
| } | |
| .footer-wrap h6 { | |
| float: left; | |
| color: #999; | |
| font: normal 11px/1.5 arial, Helvetica, sans-serif; | |
| margin: 2px 0 0 10px; | |
| width: 80%; | |
| } | |
| .footer-wrap h6 strong { | |
| font-weight: 700; | |
| } | |
| .footer-wrap a.credits_btn { | |
| background: url('../graphics/btns/info-btn/base.png'); | |
| cursor: pointer; | |
| display: block; | |
| float: right; | |
| height: 23px; | |
| width: 23px; | |
| } | |
| .span_4_of_4 { | |
| width: 100%; | |
| } | |
| .span_4_of_4 h3 { | |
| font-size: 28px; | |
| line-height: 1.3em; | |
| } | |
| .span_3_of_4 { | |
| width: 74.6%; | |
| } | |
| .span_3_of_4 h3 { | |
| font-size: 24px; | |
| line-height: 1.3em; | |
| } | |
| .span_2_of_4 { | |
| width: 49.2%; | |
| } | |
| .span_2_of_4 h3 { | |
| font-size: 20px; | |
| line-height: 1.3em; | |
| } | |
| .span_1_of_4 { | |
| width: 23.8%; | |
| } | |
| .span_1_of_4 h3 { | |
| font-size: 18px; | |
| line-height: 1.3em; | |
| } | |
| /* ============================================================================= | |
| MEDIA QUERIES FOR RESPONSIVE GRID LAYOUT | |
| ========================================================================== */ | |
| /* Large desktop */ | |
| @media (min-width: 1200px) { | |
| } | |
| /* Portrait tablet to landscape and desktop */ | |
| @media (min-width: 768px) and (max-width: 979px) { | |
| } | |
| /* Landscape phone to portrait tablet */ | |
| @media (max-width: 767px) { | |
| } | |
| /* Landscape phones and down */ | |
| @media (max-width: 480px) { | |
| .col { | |
| margin: 1% 0 1% 0%; | |
| } | |
| .span_4_of_4, .span_3_of_4, .span_2_of_4, .span_1_of_4 { | |
| width: 100%; | |
| } | |
| .span_4_of_4 h3, .span_3_of_4 h3, .span_2_of_4 h3, .span_1_of_4 h3 { | |
| font-size: 24px; | |
| margin: 5px 0 0; | |
| } | |
| } | |
| /* SECTIONS ============================================================================= */ | |
| .section { | |
| clear: both; | |
| padding: 0 20px; | |
| margin: 0px; | |
| } | |
| /* GRID COLUMN SETUP ==================================================================== */ | |
| .col { | |
| display: block; | |
| float:left; | |
| margin: 1% 0 1% 1.6%; | |
| } | |
| .col:first-child { | |
| margin-left: 0; | |
| } | |
| /* all browsers except IE6 and lower */ | |
| /* ============================================================================= | |
| Helper Classes | |
| ========================================================================== */ | |
| /* Hide from both screenreaders and browsers */ | |
| .hidden { | |
| display: none !important; | |
| visibility: hidden; | |
| } | |
| /* Hide only visually, but have it available for screenreaders */ | |
| .visuallyhidden { | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| height: 1px; | |
| margin: -1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; | |
| width: 1px; | |
| } | |
| /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard */ | |
| .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { | |
| clip: auto; | |
| height: auto; | |
| margin: 0; | |
| overflow: visible; | |
| position: static; | |
| width: auto; | |
| } | |
| /* Hide visually and from screenreaders, but maintain layout */ | |
| .invisible { | |
| visibility: hidden; | |
| } | |
| .hidden { | |
| visibility: hidden; | |
| } | |
| /* CLEAR FLOAT */ | |
| .cf { | |
| zoom: 1; | |
| } | |
| .cf:before, .cf:after { | |
| content:""; | |
| display: table; | |
| } | |
| .cf:after { | |
| clear: both; | |
| } | |
| .txt-shadow { | |
| text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); | |
| } | |
| .box-shadow { | |
| -moz-box-shadow: 0px 0px 16px -3px rgb(204, 204, 204); | |
| -webkit-box-shadow: 0px 0px 16px -3px rgb(204, 204, 204); | |
| box-shadow: 0px 0px 16px -3px rgb(204, 204, 204); | |
| } | |
| .no-shadow { | |
| -moz-box-shadow: none; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .rounded-edges { | |
| -moz-border-radius: 3px; | |
| -webkit-border-radius: 3px; | |
| border-radius: 3px; | |
| /* future proofing */ | |
| -khtml-border-radius: 3px; | |
| /* for old Konqueror browsers */ | |
| } | |
| .bdr-top { | |
| border-top: solid 1px #ececec; | |
| } | |
| .bdr-btm { | |
| border-bottom: solid 1px #ececec; | |
| } | |
| .bdr-right { | |
| border-right: solid 1px #e0e0dc; | |
| } | |
| .bdr-left { | |
| border-left: solid 1px #e0e0dc; | |
| } | |
| .bdr-top-dott { | |
| border-top: dotted 3px #e0e0dc; | |
| } | |
| .bdr-btm-dott { | |
| border-bottom: dotted 3px #e0e0dc; | |
| } | |
| .bdr-right-dott { | |
| border-right: dotted 1px #e0e0dc; | |
| } | |
| .bdr-left-dott { | |
| border-left: dotted 1px #e0e0dc; | |
| } | |
| .txt-center { | |
| text-align: center; | |
| } | |
| .right { | |
| float: right; | |
| } | |
| .left { | |
| float: left; | |
| } | |
| /* -------------------------------------------------- | |
| /* MARGINS AND PADDING | |
| -------------------------------------------------- */ | |
| .m05 { | |
| margin: 5px | |
| } | |
| .mB05 { | |
| margin-bottom: 5px | |
| } | |
| .mL05 { | |
| margin-left: 5px | |
| } | |
| .mR05 { | |
| margin-right: 5px | |
| } | |
| .mT05 { | |
| margin-top: 5px | |
| } | |
| .p05 { | |
| padding: 5px | |
| } | |
| .pB05 { | |
| padding-bottom: 5px | |
| } | |
| .pL05 { | |
| padding-left: 5px | |
| } | |
| .pR05 { | |
| padding-right: 5px | |
| } | |
| .pT05 { | |
| padding-top: 5px | |
| } | |
| .m10 { | |
| margin: 10px | |
| } | |
| .mB10 { | |
| margin-bottom: 10px | |
| } | |
| .mL10 { | |
| margin-left: 10px | |
| } | |
| .mR10 { | |
| margin-right: 10px | |
| } | |
| .mT10 { | |
| margin-top: 10px | |
| } | |
| .p10 { | |
| padding: 10px | |
| } | |
| .pB10 { | |
| padding-bottom: 10px | |
| } | |
| .pL10 { | |
| padding-left: 10px | |
| } | |
| .pR10 { | |
| padding-right: 10px | |
| } | |
| .pT10 { | |
| padding-top: 10px | |
| } | |
| .m15 { | |
| margin: 15px | |
| } | |
| .mB15 { | |
| margin-bottom: 15px | |
| } | |
| .mL15 { | |
| margin-left: 15px | |
| } | |
| .mR15 { | |
| margin-right: 15px | |
| } | |
| .mT15 { | |
| margin-top: 15px | |
| } | |
| .p15 { | |
| padding: 15px | |
| } | |
| .pB15 { | |
| padding-bottom: 15px | |
| } | |
| .pL15 { | |
| padding-left: 15px | |
| } | |
| .pR15 { | |
| padding-right: 15px | |
| } | |
| .pT15 { | |
| padding-top: 15px | |
| } | |
| .m20 { | |
| margin: 20px | |
| } | |
| .mB20 { | |
| margin-bottom: 20px | |
| } | |
| .mL20 { | |
| margin-left: 20px | |
| } | |
| .mR20 { | |
| margin-right: 20px | |
| } | |
| .mT20 { | |
| margin-top: 20px | |
| } | |
| .p20 { | |
| padding: 20px | |
| } | |
| .pB20 { | |
| padding-bottom: 20px | |
| } | |
| .pL20 { | |
| padding-left: 20px | |
| } | |
| .pR20 { | |
| padding-right: 20px | |
| } | |
| .pT20 { | |
| padding-top: 20px | |
| } | |
| .m30 { | |
| margin: 30px | |
| } | |
| .mB30 { | |
| margin-bottom: 30px | |
| } | |
| .mL30 { | |
| margin-left: 30px | |
| } | |
| .mR30 { | |
| margin-right: 30px | |
| } | |
| .mR38 { | |
| margin-right: 38px | |
| } | |
| .mT30 { | |
| margin-top: 30px | |
| } | |
| .p30 { | |
| padding: 30px | |
| } | |
| .pB30 { | |
| padding-bottom: 30px | |
| } | |
| .pL30 { | |
| padding-left: 30px | |
| } | |
| .pR30 { | |
| padding-right: 30px | |
| } | |
| .pT30 { | |
| padding-top: 30px | |
| } | |
| h1 { | |
| font: normal 20px/1.3'Futura Today Light', 'arial'; | |
| padding: 15px 0 5px; | |
| text-transform: uppercase; | |
| color: #3C3C3C; | |
| text-align: left; | |
| } | |
| body { | |
| font: 11px'Helvetica Neue', Helvetica, arial, sans-serif; | |
| cursor: pointer | |
| } | |
| /* OVERRIDES */ | |
| .head-wrap { | |
| background: #fff; | |
| padding: 0; | |
| margin: 0 0 15px 0; | |
| width: 920px; | |
| } | |
| #content { | |
| margin: 5px; | |
| padding: 5px 5px 10px 10px; | |
| text-align: left; | |
| width: 850px; | |
| } | |
| /*CHART */ | |
| path { | |
| stroke: #fa6622; | |
| stroke-width: 2; | |
| fill: none; | |
| } | |
| .axis path { | |
| fill: none; | |
| stroke: #939598; | |
| shape-rendering: crispEdges; | |
| } | |
| rectangle { | |
| visibility: hidden; | |
| } | |
| .axis { | |
| font: 12px'Helvetica Neue', Helvetica, arial, sans-serif; | |
| fill:#47484a | |
| } | |
| .chart { | |
| width: 1000px; | |
| margin-top: 50px; | |
| height: 380px; | |
| margin-left:30px; | |
| margin-right:40px; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| max-height:65px; | |
| width:150px; | |
| text-align: left; | |
| max-width:180px; | |
| padding: 5px 7px 5px 7px; | |
| background: #fff; | |
| -moz-box-shadow: 1px 1px 12px -2px rgb(160, 160, 160); | |
| -webkit-box-shadow: 1px 1px 12px -2px rgb(160, 160, 160); | |
| /* display: block; | |
| */ margin: 30px; | |
| z-index: 999; | |
| border: 1px solid #ccc; | |
| } | |
| .tooltip-left { | |
| border-top: 9px solid transparent; | |
| border-right: 15px solid rgb(183, 183, 183); | |
| border-bottom: 9px solid transparent; | |
| border-left: transparent; | |
| left: -16px; | |
| top: 48.7%; | |
| z-index: 999; | |
| } | |
| .tooltip p { | |
| color: rgb(102,102,102); | |
| font: normal 12px/1.5 arial, sans-serif; | |
| margin: 0 8px; | |
| padding: 0 0 14px; | |
| } | |
| .tooltip h3 { | |
| border-bottom: 1px solid rgb(230,230,230); | |
| color: rgb(51,51,51); | |
| font: normal 13px/1 Futura; | |
| line-height:20px; | |
| font-weight:400; | |
| /*margin: 0 8px 10px; | |
| */padding: 2px 0 10px 0; | |
| text-align: center; | |
| text-transform: uppercase; | |
| width:100%; | |
| } | |
| .overlay { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| .focus circle { | |
| fill: none; | |
| stroke: steelblue; | |
| } | |
| .source { | |
| font: normal 11px/1.8 Arial,Helvetica,sans-serif; | |
| margin: 12px 10px 0; | |
| border-top: 1px solid #CCC; | |
| display: block; | |
| width: 100%; | |
| padding: 7px 0 0; | |
| line-height: 15px; | |
| color: #999; | |
| } | |
| .credit { | |
| font: normal 11px/1.8 Arial,Helvetica,sans-serif; | |
| margin: 7px 10px 0; | |
| margin-bottom: 10px; | |
| color: #999; | |
| } | |
| .domain { | |
| stroke-width: 1px; | |
| } | |
| .grid .tick { | |
| stroke: lightgrey; | |
| opacity: 0.7; | |
| } | |
| .grid path { | |
| stroke-width: 0; | |
| } | |
| .footnote { | |
| font-size: 9px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p> | |
| using code from <a href="https://github.com/maureenlinke/d3-bar-line-chart">https://github.com/maureenlinke/d3-bar-line-chart</a> | |
| </p> | |
| <div id="content"> | |
| <h1>Rate of crashes and death totals</h1> | |
| <p>Over 20,000 people have been killed in general aviation accients since 1983. While the death toll has declined over the years, the rate of these accidents has remained steady. Accidents per 1 million flight hours.</p> | |
| <div class="chart"> | |
| </div> | |
| <div class ="source"><strong>Source</strong>: FAA</div> | |
| <div class ="credit">Maureen Linke, USA TODAY</div> | |
| </div> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var planes = | |
| [{ | |
| "date": 19830101, | |
| "deaths": 1068, | |
| "accidents": 107 | |
| }, { | |
| "date": 19840101, | |
| "deaths": 1042, | |
| "accidents": 104 | |
| }, { | |
| "date": 19850101, | |
| "deaths": 956, | |
| "accidents": 97 | |
| }, { | |
| "date": 19860101, | |
| "deaths": 967, | |
| "accidents": 95 | |
| }, { | |
| "date": 19870101, | |
| "deaths": 837, | |
| "accidents": 92 | |
| }, { | |
| "date": 19880101, | |
| "deaths": 797, | |
| "accidents": 87 | |
| }, { | |
| "date": 19890101, | |
| "deaths": 769, | |
| "accidents": 80 | |
| }, { | |
| "date": 19900101, | |
| "deaths": 770, | |
| "accidents": 79 | |
| }, { | |
| "date": 19910101, | |
| "deaths": 800, | |
| "accidents": 79 | |
| }, { | |
| "date": 19920101, | |
| "deaths": 867, | |
| "accidents": 85 | |
| }, { | |
| "date": 19930101, | |
| "deaths": 744, | |
| "accidents": 91 | |
| }, { | |
| "date": 19940101, | |
| "deaths": 730, | |
| "accidents": 91 | |
| }, { | |
| "date": 19950101, | |
| "deaths": 735, | |
| "accidents": 83 | |
| }, { | |
| "date": 19960101, | |
| "deaths": 636, | |
| "accidents": 77 | |
| }, { | |
| "date": 19970101, | |
| "deaths": 631, | |
| "accidents": 72 | |
| }, { | |
| "date": 19980101, | |
| "deaths": 625, | |
| "accidents": 75 | |
| }, { | |
| "date": 19990101, | |
| "deaths": 619, | |
| "accidents": 65 | |
| }, { | |
| "date": 20000101, | |
| "deaths": 596, | |
| "accidents": 66 | |
| }, { | |
| "date": 20010101, | |
| "deaths": 562, | |
| "accidents": 68 | |
| }, { | |
| "date": 20020101, | |
| "deaths": 581, | |
| "accidents": 67 | |
| }, { | |
| "date": 20030101, | |
| "deaths": 633, | |
| "accidents": 67 | |
| }, { | |
| "date": 20040101, | |
| "deaths": 559, | |
| "accidents": 65 | |
| }, { | |
| "date": 20050101, | |
| "deaths": 563, | |
| "accidents": 72 | |
| }, { | |
| "date": 20060101, | |
| "deaths": 706, | |
| "accidents": 64 | |
| }, { | |
| "date": 20070101, | |
| "deaths": 496, | |
| "accidents": 69 | |
| }, { | |
| "date": 20080101, | |
| "deaths": 494, | |
| "accidents": 69 | |
| }, { | |
| "date": 20090101, | |
| "deaths": 474, | |
| "accidents": 72 | |
| }, { | |
| "date": 20100101, | |
| "deaths": 454, | |
| "accidents": 66 | |
| }, { | |
| "date": 20110101, | |
| "deaths": 444, | |
| "accidents": 65 | |
| }]; | |
| </script> | |
| <script> | |
| var margin = { | |
| top: 30, | |
| right: 40, | |
| bottom: 70, | |
| left: 40 | |
| }, | |
| width = 800 - margin.left - margin.right, | |
| height = 400 - margin.top - margin.bottom; | |
| var data = planes; | |
| // Parse the date / time | |
| var parseDate = d3.time.format("%Y%m%d").parse; | |
| var formatTime = d3.time.format("%Y"); | |
| var x = d3.time.scale() | |
| .range([0, width - 25]); | |
| var bisectDate = d3.bisector(function(d) { | |
| return d.date; | |
| }).left; | |
| var y = d3.scale.linear().range([height, 0]); | |
| var y0 = d3.scale.linear().range([height, 0]); // Change to y0 | |
| var yAxisLeft = d3.svg.axis().scale(y) | |
| .orient("left").ticks(5); | |
| var yAxisRight = d3.svg.axis().scale(y0) | |
| .orient("right").ticks(5); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .tickSize(5) | |
| .ticks(d3.time.years, 2) | |
| .orient("bottom") | |
| .tickFormat(d3.time.format("%Y")); | |
| var line = d3.svg.line() | |
| .x(function(d) { | |
| return x(d.date); | |
| }) | |
| .y(function(d) { | |
| return y0(d.accidents); | |
| }) | |
| .interpolate("cardinal") | |
| .tension(0.9); | |
| var svg = d3.select(".chart").append("svg") | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| // add grid lines | |
| function make_X_axis() { | |
| return d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .ticks(6); | |
| } | |
| function make_Y_axis() { | |
| return d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(10); | |
| } | |
| //load data | |
| d3.csv("crashes.csv", function(error, data) { | |
| data.forEach(function(d) { | |
| d.date = parseDate(d.date); | |
| d.deaths = +d.deaths; | |
| d.accidents = +d.accidents; | |
| }); | |
| x.domain(d3.extent(data, function(d) { | |
| return d.date; | |
| })); | |
| y.domain([0, d3.max(data, function(d) { | |
| return d.deaths; | |
| })]); | |
| y0.domain([0, d3.max(data, function(d) { | |
| return d.accidents; | |
| })]); | |
| ///axis | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .selectAll("text") | |
| .style("text-anchor", "end"); | |
| svg.append("g") //Left | |
| .attr("class", "y axis") | |
| .call(yAxisLeft) | |
| .append("text") | |
| .attr("x", 3) | |
| .attr("y", -25) | |
| .attr("dy", ".70em") | |
| .style("text-anchor", "end") | |
| .text("Deaths"); | |
| svg.append("g") // Add the Y Axis Right | |
| .attr("class", "y axis") // Add the Y Axis Right | |
| .attr("transform", "translate(" + width + " ,0)") // move to the right | |
| .call(yAxisRight) | |
| .append("text") | |
| .attr("x", 40) | |
| .attr("y", -25) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("Accident rate"); | |
| svg.append("g") | |
| .attr("class", "grid") | |
| .call(make_Y_axis() | |
| .tickSize(-width, 0, 0) | |
| .tickFormat("")); | |
| var div = d3.select(".chart").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| ///BARS | |
| svg.selectAll("bar") | |
| .data(data) | |
| .enter().append("rect") | |
| .style("fill", "#1974b2") | |
| .attr("x", function(d) { | |
| return x(d.date) - (width / data.length) / 1000; | |
| }) | |
| .attr("width", width / data.length - 5) | |
| .attr("y", function(d) { | |
| return y(d.deaths); | |
| }) | |
| .attr("height", function(d) { | |
| return height - y(d.deaths); | |
| }); | |
| svg.selectAll("rect") | |
| .attr("width", width / data.length - 4) | |
| .on("mouseover", function(d) { | |
| div.transition() | |
| .duration(50) | |
| .style("opacity", .9); | |
| div.html("<h3>"+ formatTime(d.date) + "</h3>" + "<br/>" +"<p>Deaths: " + "<strong>"+ d.deaths + "</strong>"+"</p>") | |
| .style("left", (d3.event.pageX) + 10+"px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| }) | |
| .on("mouseout", function(d) { | |
| div.transition() | |
| .duration(50) | |
| .style("opacity", 1e-6); | |
| }); | |
| svg.append("path") // Add the line path. | |
| .data(data) | |
| .attr("class", "line") | |
| .attr("d", line(data)); | |
| var focus = svg.append("g") | |
| .attr("class", "focus") | |
| .style("display", "none"); | |
| focus.append("circle") | |
| .attr("r", 4.5); | |
| focus.append("text") | |
| .attr("x", 9) | |
| .attr("dy", ".35em"); | |
| svg.append("rect") | |
| .attr("class", "overlay") | |
| .attr("width", width) | |
| .attr("height", 120) | |
| .on("mouseover", function() { | |
| focus.style("display", null); | |
| }) | |
| .on("mouseout", function(d) { | |
| div.transition() | |
| .duration(50) | |
| .style("opacity", 1e-6); | |
| }) | |
| .on("mousemove", mousemove); | |
| function mousemove() { | |
| var x0 = x.invert(d3.mouse(this)[0]), | |
| i = bisectDate(data, x0, 1), | |
| d0 = data[i - 1], | |
| d1 = data[i], | |
| d = x0 - d0.date > d1.date - x0 ? d1 : d0; | |
| //move focus around | |
| focus.attr("transform", "translate(" + x(d.date) + "," + y(d.accidents) + ")"); | |
| div.transition() | |
| .duration(50) | |
| .style("opacity", .9); | |
| div.html("<h3>"+ formatTime(d.date) + "</h3>" + "<br/>" +"<p>Rate: " + "<strong>"+d.accidents + "</strong>" + " accidents " + "</p>") | |
| .style("left", (d3.event.pageX) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| } | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment