D3 Demo

├── .gitignore ├── LICENSE ├── README.md ├── d3 └── index.html ├── data ├── letter.tsv └── shanghai_air.csv ├── package.json └── react ├── App.js ├── Barchart.js ├── bundle.js ├── chartist.min.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Fraser Xu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-data-visualization 2 | A repo to demonstration using react to do data-visualization 3 | -------------------------------------------------------------------------------- /d3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | D3 Demo 6 | 30 | 31 | 32 | 33 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /data/letter.tsv: -------------------------------------------------------------------------------- 1 | letter frequency 2 | A .08167 3 | B .01492 4 | C .02782 5 | D .04253 6 | E .12702 7 | F .02288 8 | G .02015 9 | H .06094 10 | I .06966 11 | J .00153 12 | K .00772 13 | L .04025 14 | M .02406 15 | N .06749 16 | O .07507 17 | P .01929 18 | Q .00095 19 | R .05987 20 | S .06327 21 | T .09056 22 | U .02758 23 | V .00978 24 | W .02360 25 | X .00150 26 | Y .01974 27 | Z .00074 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-data-visualization", 3 | "version": "1.0.0", 4 | "description": "A repo to demonstration using react to do data-visualization", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "browserify react/App.js -t babelify -o react/bundle.js", 8 | "watch": "watchify react/App.js -t babelify -o react/bundle.js -dv" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/fraserxu/react-data-visualization.git" 13 | }, 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/fraserxu/react-data-visualization/issues" 18 | }, 19 | "homepage": "https://github.com/fraserxu/react-data-visualization", 20 | "dependencies": { 21 | "d3": "^3.5.5", 22 | "react": "^0.13.3", 23 | "react-chartist": "^0.6.1" 24 | }, 25 | "devDependencies": { 26 | "babelify": "^6.1.2", 27 | "browserify": "^10.2.3" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /react/App.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React from 'react'; 4 | import ChartistGraph from 'react-chartist'; 5 | 6 | import Barchart from './Barchart'; 7 | 8 | class App extends React.Component { 9 | 10 | displayName: 'App' 11 | 12 | constructor() { 13 | super(); 14 | 15 | this.state = { 16 | data: [] 17 | }; 18 | } 19 | 20 | render() { 21 | let data = { 22 | labels: ['W1', 'W2', 'W3', 'W4', 'W5'], 23 | series: [ 24 | [1, 2, 4, 8, 6] 25 | ] 26 | }; 27 | 28 | let options = { 29 | high: 10, 30 | axisX: { 31 | labelInterpolationFnc: function(value, index) { 32 | return index % 2 === 0 ? value : null; 33 | } 34 | } 35 | }; 36 | 37 | let type = 'Bar' 38 | 39 | return ( 40 |

41 | 42 | 43 |

44 | ) 45 | } 46 | 47 | } 48 | 49 | React.render(, document.body); 50 | -------------------------------------------------------------------------------- /react/Barchart.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React from 'react'; 4 | import d3 from 'd3'; 5 | 6 | class Barchart extends React.Component { 7 | 8 | displayName: 'Barchart' 9 | 10 | constructor(props) { 11 | super(props); 12 | } 13 | 14 | componentDidMount() { 15 | this.renderBarChart(); 16 | } 17 | 18 | renderBarChart() { 19 | let { width, height, fillColor, data } = this.props; 20 | 21 | let values = data.slice(); 22 | 23 | let yScale = d3.scale.linear() 24 | .range([height, 0]); 25 | 26 | yScale.domain([0, Math.max.apply(null, values)]); 27 | 28 | let svg = React.findDOMNode(this); 29 | 30 | let chart = d3.select(svg) 31 | .attr('width', this.props.width) 32 | .attr('height', this.props.height + 1); 33 | 34 | let barWidth = width / values.length; 35 | 36 | let bar = chart.selectAll('g') 37 | .data(values) 38 | .enter().append('g') 39 | .attr('transform', (d, i) => `translate(${i * barWidth}, 0)`); 40 | 41 | bar.append('rect') 42 | .attr('y', (d) => yScale(d)) 43 | .attr('height', (d) => height - yScale(d)) 44 | .attr('width', (d) => barWidth - 1) 45 | .attr('fill', fillColor); 46 | 47 | } 48 | 49 | render() { 50 | return ( 51 | 52 | ) 53 | } 54 | 55 | } 56 | 57 | Barchart.defaultProps = { 58 | width: 800, 59 | height: 200, 60 | xAxis: false, 61 | fillColor: '#d70206', 62 | data: [7,1,5,5,4,3,5,2,3,5,6] 63 | } 64 | 65 | 66 | export default Barchart; 67 | -------------------------------------------------------------------------------- /react/chartist.min.css: -------------------------------------------------------------------------------- 1 | .ct-chart.ct-double-octave:after,.ct-chart.ct-major-eleventh:after,.ct-chart.ct-major-second:after,.ct-chart.ct-major-seventh:after,.ct-chart.ct-major-sixth:after,.ct-chart.ct-major-tenth:after,.ct-chart.ct-major-third:after,.ct-chart.ct-major-twelfth:after,.ct-chart.ct-minor-second:after,.ct-chart.ct-minor-seventh:after,.ct-chart.ct-minor-sixth:after,.ct-chart.ct-minor-third:after,.ct-chart.ct-octave:after,.ct-chart.ct-perfect-fifth:after,.ct-chart.ct-perfect-fourth:after,.ct-chart.ct-square:after{content:"";clear:both}.ct-chart.ct-double-octave:after,.ct-chart.ct-double-octave:before,.ct-chart.ct-golden-section:after,.ct-chart.ct-major-eleventh:after,.ct-chart.ct-major-eleventh:before,.ct-chart.ct-major-second:after,.ct-chart.ct-major-second:before,.ct-chart.ct-major-seventh:after,.ct-chart.ct-major-seventh:before,.ct-chart.ct-major-sixth:after,.ct-chart.ct-major-sixth:before,.ct-chart.ct-major-tenth:after,.ct-chart.ct-major-tenth:before,.ct-chart.ct-major-third:after,.ct-chart.ct-major-third:before,.ct-chart.ct-major-twelfth:after,.ct-chart.ct-major-twelfth:before,.ct-chart.ct-minor-second:after,.ct-chart.ct-minor-second:before,.ct-chart.ct-minor-seventh:after,.ct-chart.ct-minor-seventh:before,.ct-chart.ct-minor-sixth:after,.ct-chart.ct-minor-sixth:before,.ct-chart.ct-minor-third:after,.ct-chart.ct-minor-third:before,.ct-chart.ct-octave:after,.ct-chart.ct-octave:before,.ct-chart.ct-perfect-fifth:after,.ct-chart.ct-perfect-fifth:before,.ct-chart.ct-perfect-fourth:after,.ct-chart.ct-perfect-fourth:before,.ct-chart.ct-square:after,.ct-chart.ct-square:before{content:""}.ct-chart .ct-label{fill:rgba(0,0,0,.4);color:rgba(0,0,0,.4);font-size:.75rem;line-height:1}.ct-chart .ct-chart-bar .ct-label,.ct-chart .ct-chart-line .ct-label{display:block;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.ct-chart .ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart .ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart .ct-label.ct-vertical.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;justify-content:flex-end;text-align:right;text-anchor:end}.ct-chart .ct-label.ct-vertical.ct-end{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart .ct-chart-bar .ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;text-anchor:start}.ct-chart .ct-chart-bar .ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;text-anchor:start}.ct-chart .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;justify-content:flex-end;text-align:right;text-anchor:end}.ct-chart .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:end}.ct-chart .ct-grid{stroke:rgba(0,0,0,.2);stroke-width:1px;stroke-dasharray:2px}.ct-chart .ct-point{stroke-width:10px;stroke-linecap:round}.ct-chart .ct-line{fill:none;stroke-width:4px}.ct-chart .ct-area{stroke:none;fill-opacity:.1}.ct-chart .ct-bar{fill:none;stroke-width:10px}.ct-chart .ct-slice.ct-donut{fill:none;stroke-width:60px}.ct-chart .ct-series.ct-series-a .ct-bar,.ct-chart .ct-series.ct-series-a .ct-line,.ct-chart .ct-series.ct-series-a .ct-point,.ct-chart .ct-series.ct-series-a .ct-slice.ct-donut{stroke:#d70206}.ct-chart .ct-series.ct-series-a .ct-area,.ct-chart .ct-series.ct-series-a .ct-slice:not(.ct-donut){fill:#d70206}.ct-chart .ct-series.ct-series-b .ct-bar,.ct-chart .ct-series.ct-series-b .ct-line,.ct-chart .ct-series.ct-series-b .ct-point,.ct-chart .ct-series.ct-series-b .ct-slice.ct-donut{stroke:#f05b4f}.ct-chart .ct-series.ct-series-b .ct-area,.ct-chart .ct-series.ct-series-b .ct-slice:not(.ct-donut){fill:#f05b4f}.ct-chart .ct-series.ct-series-c .ct-bar,.ct-chart .ct-series.ct-series-c .ct-line,.ct-chart .ct-series.ct-series-c .ct-point,.ct-chart .ct-series.ct-series-c .ct-slice.ct-donut{stroke:#f4c63d}.ct-chart .ct-series.ct-series-c .ct-area,.ct-chart .ct-series.ct-series-c .ct-slice:not(.ct-donut){fill:#f4c63d}.ct-chart .ct-series.ct-series-d .ct-bar,.ct-chart .ct-series.ct-series-d .ct-line,.ct-chart .ct-series.ct-series-d .ct-point,.ct-chart .ct-series.ct-series-d .ct-slice.ct-donut{stroke:#d17905}.ct-chart .ct-series.ct-series-d .ct-area,.ct-chart .ct-series.ct-series-d .ct-slice:not(.ct-donut){fill:#d17905}.ct-chart .ct-series.ct-series-e .ct-bar,.ct-chart .ct-series.ct-series-e .ct-line,.ct-chart .ct-series.ct-series-e .ct-point,.ct-chart .ct-series.ct-series-e .ct-slice.ct-donut{stroke:#453d3f}.ct-chart .ct-series.ct-series-e .ct-area,.ct-chart .ct-series.ct-series-e .ct-slice:not(.ct-donut){fill:#453d3f}.ct-chart .ct-series.ct-series-f .ct-bar,.ct-chart .ct-series.ct-series-f .ct-line,.ct-chart .ct-series.ct-series-f .ct-point,.ct-chart .ct-series.ct-series-f .ct-slice.ct-donut{stroke:#59922b}.ct-chart .ct-series.ct-series-f .ct-area,.ct-chart .ct-series.ct-series-f .ct-slice:not(.ct-donut){fill:#59922b}.ct-chart .ct-series.ct-series-g .ct-bar,.ct-chart .ct-series.ct-series-g .ct-line,.ct-chart .ct-series.ct-series-g .ct-point,.ct-chart .ct-series.ct-series-g .ct-slice.ct-donut{stroke:#0544d3}.ct-chart .ct-series.ct-series-g .ct-area,.ct-chart .ct-series.ct-series-g .ct-slice:not(.ct-donut){fill:#0544d3}.ct-chart .ct-series.ct-series-h .ct-bar,.ct-chart .ct-series.ct-series-h .ct-line,.ct-chart .ct-series.ct-series-h .ct-point,.ct-chart .ct-series.ct-series-h .ct-slice.ct-donut{stroke:#6b0392}.ct-chart .ct-series.ct-series-h .ct-area,.ct-chart .ct-series.ct-series-h .ct-slice:not(.ct-donut){fill:#6b0392}.ct-chart .ct-series.ct-series-i .ct-bar,.ct-chart .ct-series.ct-series-i .ct-line,.ct-chart .ct-series.ct-series-i .ct-point,.ct-chart .ct-series.ct-series-i .ct-slice.ct-donut{stroke:#f05b4f}.ct-chart .ct-series.ct-series-i .ct-area,.ct-chart .ct-series.ct-series-i .ct-slice:not(.ct-donut){fill:#f05b4f}.ct-chart .ct-series.ct-series-j .ct-bar,.ct-chart .ct-series.ct-series-j .ct-line,.ct-chart .ct-series.ct-series-j .ct-point,.ct-chart .ct-series.ct-series-j .ct-slice.ct-donut{stroke:#dda458}.ct-chart .ct-series.ct-series-j .ct-area,.ct-chart .ct-series.ct-series-j .ct-slice:not(.ct-donut){fill:#dda458}.ct-chart .ct-series.ct-series-k .ct-bar,.ct-chart .ct-series.ct-series-k .ct-line,.ct-chart .ct-series.ct-series-k .ct-point,.ct-chart .ct-series.ct-series-k .ct-slice.ct-donut{stroke:#eacf7d}.ct-chart .ct-series.ct-series-k .ct-area,.ct-chart .ct-series.ct-series-k .ct-slice:not(.ct-donut){fill:#eacf7d}.ct-chart .ct-series.ct-series-l .ct-bar,.ct-chart .ct-series.ct-series-l .ct-line,.ct-chart .ct-series.ct-series-l .ct-point,.ct-chart .ct-series.ct-series-l .ct-slice.ct-donut{stroke:#86797d}.ct-chart .ct-series.ct-series-l .ct-area,.ct-chart .ct-series.ct-series-l .ct-slice:not(.ct-donut){fill:#86797d}.ct-chart .ct-series.ct-series-m .ct-bar,.ct-chart .ct-series.ct-series-m .ct-line,.ct-chart .ct-series.ct-series-m .ct-point,.ct-chart .ct-series.ct-series-m .ct-slice.ct-donut{stroke:#b2c326}.ct-chart .ct-series.ct-series-m .ct-area,.ct-chart .ct-series.ct-series-m .ct-slice:not(.ct-donut){fill:#b2c326}.ct-chart .ct-series.ct-series-n .ct-bar,.ct-chart .ct-series.ct-series-n .ct-line,.ct-chart .ct-series.ct-series-n .ct-point,.ct-chart .ct-series.ct-series-n .ct-slice.ct-donut{stroke:#6188e2}.ct-chart .ct-series.ct-series-n .ct-area,.ct-chart .ct-series.ct-series-n .ct-slice:not(.ct-donut){fill:#6188e2}.ct-chart .ct-series.ct-series-o .ct-bar,.ct-chart .ct-series.ct-series-o .ct-line,.ct-chart .ct-series.ct-series-o .ct-point,.ct-chart .ct-series.ct-series-o .ct-slice.ct-donut{stroke:#a748ca}.ct-chart .ct-series.ct-series-o .ct-area,.ct-chart .ct-series.ct-series-o .ct-slice:not(.ct-donut){fill:#a748ca}.ct-chart.ct-square{display:block;position:relative;width:100%}.ct-chart.ct-square:before{display:block;float:left;width:0;height:0;padding-bottom:100%}.ct-chart.ct-square:after{display:table}.ct-chart.ct-square>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-second{display:block;position:relative;width:100%}.ct-chart.ct-minor-second:before{display:block;float:left;width:0;height:0;padding-bottom:93.75%}.ct-chart.ct-minor-second:after{display:table}.ct-chart.ct-minor-second>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-second{display:block;position:relative;width:100%}.ct-chart.ct-major-second:before{display:block;float:left;width:0;height:0;padding-bottom:88.8888888889%}.ct-chart.ct-major-second:after{display:table}.ct-chart.ct-major-second>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-third{display:block;position:relative;width:100%}.ct-chart.ct-minor-third:before{display:block;float:left;width:0;height:0;padding-bottom:83.3333333333%}.ct-chart.ct-minor-third:after{display:table}.ct-chart.ct-minor-third>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-third{display:block;position:relative;width:100%}.ct-chart.ct-major-third:before{display:block;float:left;width:0;height:0;padding-bottom:80%}.ct-chart.ct-major-third:after{display:table}.ct-chart.ct-major-third>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-perfect-fourth{display:block;position:relative;width:100%}.ct-chart.ct-perfect-fourth:before{display:block;float:left;width:0;height:0;padding-bottom:75%}.ct-chart.ct-perfect-fourth:after{display:table}.ct-chart.ct-perfect-fourth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-perfect-fifth{display:block;position:relative;width:100%}.ct-chart.ct-perfect-fifth:before{display:block;float:left;width:0;height:0;padding-bottom:66.6666666667%}.ct-chart.ct-perfect-fifth:after{display:table}.ct-chart.ct-perfect-fifth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-sixth{display:block;position:relative;width:100%}.ct-chart.ct-minor-sixth:before{display:block;float:left;width:0;height:0;padding-bottom:62.5%}.ct-chart.ct-minor-sixth:after{display:table}.ct-chart.ct-minor-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-golden-section{display:block;position:relative;width:100%}.ct-chart.ct-golden-section:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:61.804697157%}.ct-chart.ct-golden-section:after{display:table;clear:both}.ct-chart.ct-golden-section>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-sixth{display:block;position:relative;width:100%}.ct-chart.ct-major-sixth:before{display:block;float:left;width:0;height:0;padding-bottom:60%}.ct-chart.ct-major-sixth:after{display:table}.ct-chart.ct-major-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-seventh{display:block;position:relative;width:100%}.ct-chart.ct-minor-seventh:before{display:block;float:left;width:0;height:0;padding-bottom:56.25%}.ct-chart.ct-minor-seventh:after{display:table}.ct-chart.ct-minor-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-seventh{display:block;position:relative;width:100%}.ct-chart.ct-major-seventh:before{display:block;float:left;width:0;height:0;padding-bottom:53.3333333333%}.ct-chart.ct-major-seventh:after{display:table}.ct-chart.ct-major-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-octave{display:block;position:relative;width:100%}.ct-chart.ct-octave:before{display:block;float:left;width:0;height:0;padding-bottom:50%}.ct-chart.ct-octave:after{display:table}.ct-chart.ct-octave>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-tenth{display:block;position:relative;width:100%}.ct-chart.ct-major-tenth:before{display:block;float:left;width:0;height:0;padding-bottom:40%}.ct-chart.ct-major-tenth:after{display:table}.ct-chart.ct-major-tenth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-eleventh{display:block;position:relative;width:100%}.ct-chart.ct-major-eleventh:before{display:block;float:left;width:0;height:0;padding-bottom:37.5%}.ct-chart.ct-major-eleventh:after{display:table}.ct-chart.ct-major-eleventh>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-twelfth{display:block;position:relative;width:100%}.ct-chart.ct-major-twelfth:before{display:block;float:left;width:0;height:0;padding-bottom:33.3333333333%}.ct-chart.ct-major-twelfth:after{display:table}.ct-chart.ct-major-twelfth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-double-octave{display:block;position:relative;width:100%}.ct-chart.ct-double-octave:before{display:block;float:left;width:0;height:0;padding-bottom:25%}.ct-chart.ct-double-octave:after{display:table}.ct-chart.ct-double-octave>svg{display:block;position:absolute;top:0;left:0} 2 | -------------------------------------------------------------------------------- /react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | --------------------------------------------------------------------------------