├── .gitignore ├── README.md ├── detail ├── area │ ├── area_garbage.html │ └── area_garbage.js ├── area_stack │ ├── area_stack.html │ └── area_stack.js ├── area_stack_brush │ ├── area_stack.html │ └── area_stack_brush.js ├── area_stack_tooltip │ ├── area_stack.html │ └── area_stack_tooltip.js ├── area_stack_zoom │ ├── area_stack.html │ └── area_stack_zoom.js ├── bar │ ├── bar.html │ └── bar.js ├── bar_brush │ ├── bar.html │ └── bar_brush.js ├── bar_group │ ├── bar_group.html │ └── bar_group.js ├── bar_group_brush │ ├── bar_group_brush.html │ └── bar_group_brush.js ├── bar_group_tooltip │ ├── bar_group.html │ └── bar_group_tooltip.js ├── bar_group_zoom │ ├── bar_group.html │ └── bar_group_zoom.js ├── bar_stack │ ├── bar_stack.html │ └── bar_stack.js ├── bar_stack_brush │ ├── bar_stack.html │ └── bar_stack_brush.js ├── bar_stack_tooltip │ ├── bar_stack.html │ └── bar_stack_tooltip.js ├── bar_stack_zoom │ ├── bar_stack_zoom.html │ └── bar_stack_zoom.js ├── bar_tooltip │ ├── bar.html │ └── bar_tooltip.js ├── bar_zoom │ ├── bar.html │ └── bar_zoom.js ├── chart │ ├── chart.html │ └── chart.js ├── data │ ├── age.csv │ ├── garbage.csv │ ├── letter.tsv │ ├── pie_test.csv │ ├── stack_test.csv │ └── user_sample.json ├── donut │ ├── donut.html │ └── donut.js ├── grid │ ├── grid.html │ └── grid.js ├── legend │ ├── legend.html │ ├── legend.js │ ├── legend_click.html │ └── legend_click.jsx ├── line │ ├── line_garbage.html │ └── line_garbage.js ├── line_brush │ ├── line_garbage.html │ └── line_garbage_brush.js ├── line_multi │ ├── line_multi_garbage.html │ └── line_multi_garbage.js ├── line_multi_brush │ ├── line_multi_garbage.html │ └── line_multi_garbage_brush.js ├── line_multi_tooltip │ ├── line_multi_garbage.html │ └── line_multi_garbage_tooltip.js ├── line_multi_zoom │ ├── line_multi_garbage.html │ └── line_multi_garbage_zoom.js ├── line_tooltip │ ├── line_garbage.html │ └── line_garbage_tooltip.js ├── line_zoom │ ├── line_garbage.html │ └── line_garbage_zoom.js ├── pie │ ├── pie.html │ └── pie.js ├── pie_tooltip │ ├── pie_tooltip.html │ └── pie_tooltip.js ├── scatter │ ├── scatter_garbage.html │ └── scatter_garbage.js ├── scatter_brush │ ├── scatter_garbage.html │ └── scatter_garbage_brush.js ├── scatter_tooltip │ ├── scatter_garbage.html │ └── scatter_garbage_tooltip.js ├── scatter_zoom │ ├── scatter_garbage.html │ └── scatter_garbage_zoom.js ├── xaxis │ ├── xaxis.html │ ├── xaxis_click.html │ ├── xaxis_click.js │ └── xaxis_garbage.js └── yaxis │ ├── yaxis.html │ └── yaxis_garbage.js ├── dist ├── detail │ └── min │ │ ├── area_garbage.min.js │ │ ├── area_stack.min.js │ │ ├── area_stack_brush.min.js │ │ ├── area_stack_tooltip.min.js │ │ ├── area_stack_zoom.min.js │ │ ├── bar.min.js │ │ ├── bar_brush.min.js │ │ ├── bar_group.min.js │ │ ├── bar_group_brush.min.js │ │ ├── bar_group_tooltip.min.js │ │ ├── bar_group_zoom.min.js │ │ ├── bar_stack.min.js │ │ ├── bar_stack_brush.min.js │ │ ├── bar_stack_tooltip.min.js │ │ ├── bar_stack_zoom.min.js │ │ ├── bar_tooltip.min.js │ │ ├── bar_zoom.min.js │ │ ├── chart.min.js │ │ ├── donut.min.js │ │ ├── grid.min.js │ │ ├── legend.min.js │ │ ├── legend_click.min.js │ │ ├── line_garbage.min.js │ │ ├── line_garbage_brush.min.js │ │ ├── line_garbage_tooltip.min.js │ │ ├── line_garbage_zoom.min.js │ │ ├── line_multi_garbage.min.js │ │ ├── line_multi_garbage_brush.min.js │ │ ├── line_multi_garbage_tooltip.min.js │ │ ├── line_multi_garbage_zoom.min.js │ │ ├── main.min.js │ │ ├── pie.min.js │ │ ├── pie_tooltip.min.js │ │ ├── scatter_garbage.min.js │ │ ├── scatter_garbage_brush.min.js │ │ ├── scatter_garbage_tooltip.min.js │ │ ├── scatter_garbage_zoom.min.js │ │ ├── xaxis_click.min.js │ │ ├── xaxis_garbage.min.js │ │ └── yaxis_garbage.min.js ├── map_detail │ └── min │ │ ├── earthquake.min.js │ │ ├── historytwpopulation.min.js │ │ ├── interactive_line.min.js │ │ ├── interactive_marker.min.js │ │ ├── interactive_polygon.min.js │ │ ├── mapbubble.min.js │ │ ├── ortho_line.min.js │ │ ├── ortho_marker.min.js │ │ ├── ortho_polygon.min.js │ │ ├── simple.min.js │ │ ├── twpopulation.min.js │ │ └── unemployment.min.js └── simple │ └── min │ ├── area_garbage.min.js │ ├── area_stack.min.js │ ├── area_stack_brush.min.js │ ├── area_stack_tooltip.min.js │ ├── area_stack_zoom.min.js │ ├── bar.min.js │ ├── bar_brush.min.js │ ├── bar_group.min.js │ ├── bar_group_brush.min.js │ ├── bar_group_tooltip.min.js │ ├── bar_group_zoom.min.js │ ├── bar_stack.min.js │ ├── bar_stack_brush.min.js │ ├── bar_stack_tooltip.min.js │ ├── bar_stack_zoom.min.js │ ├── bar_tooltip.min.js │ ├── bar_zoom.min.js │ ├── donut.min.js │ ├── line_garbage.min.js │ ├── line_garbage_brush.min.js │ ├── line_garbage_tooltip.min.js │ ├── line_garbage_zoom.min.js │ ├── line_multi_garbage.min.js │ ├── line_multi_garbage_brush.min.js │ ├── line_multi_garbage_tooltip.min.js │ ├── line_multi_garbage_zoom.min.js │ ├── line_user.min.js │ ├── pie.min.js │ ├── pie_tooltip.min.js │ ├── scatter_garbage.min.js │ ├── scatter_garbage_brush.min.js │ ├── scatter_garbage_tooltip.min.js │ └── scatter_garbage_zoom.min.js ├── map_detail ├── bubble │ ├── css │ │ └── bubble.css │ ├── data │ │ ├── 110m_countries.geojson │ │ ├── earthquake.json │ │ ├── us.json │ │ └── world-50m.json │ ├── earthquake │ │ ├── earthquake.html │ │ └── earthquake.js │ └── mapbubble │ │ ├── mapbubble.html │ │ └── mapbubble.js ├── choropleth │ ├── css │ │ ├── twpopulation.css │ │ └── unemployment.css │ ├── data │ │ ├── 110m_countries.geojson │ │ ├── population.json │ │ ├── states.json │ │ ├── twTown1982.topo.json │ │ ├── uk.json │ │ ├── unemployment.tsv │ │ ├── us.json │ │ └── world-50m.json │ ├── tw │ │ ├── twpopulation.html │ │ └── twpopulation.js │ └── us │ │ ├── unemployment.html │ │ └── unemployment.js ├── combine │ ├── data │ │ ├── population.json │ │ └── twTown1982.topo.json │ ├── style.css │ ├── twhistorypopulation.html │ └── twhistorypopulation.js ├── interactive │ ├── css │ │ └── polygon.css │ ├── data │ │ ├── 110m_countries.geojson │ │ ├── states.json │ │ ├── uk.json │ │ ├── us.json │ │ └── world-50m.json │ ├── line │ │ ├── line.html │ │ └── line.js │ ├── marker │ │ ├── marker.html │ │ └── marker.js │ ├── multipolygon │ │ ├── multipolygon.html │ │ └── multipolygon.js │ └── simple │ │ ├── simple.html │ │ └── simple.js └── orthographic │ ├── css │ ├── mesh.css │ └── polygon.css │ ├── data │ ├── 110m_countries.geojson │ ├── states.json │ ├── uk.json │ ├── us.json │ └── world-50m.json │ ├── line │ ├── line.html │ └── line.js │ ├── marker │ ├── marker.html │ └── marker.js │ └── multipolygon │ ├── multipolygon.html │ └── multipolygon.js ├── package.json ├── simple ├── area │ ├── area_garbage.html │ └── area_garbage.js ├── area_stack │ ├── area_stack.html │ └── area_stack.js ├── area_stack_brush │ ├── area_stack.html │ └── area_stack_brush.js ├── area_stack_tooltip │ ├── area_stack.html │ └── area_stack_tooltip.js ├── area_stack_zoom │ ├── area_stack.html │ └── area_stack_zoom.js ├── bar │ ├── bar.html │ └── bar.js ├── bar_brush │ ├── bar.html │ └── bar_brush.js ├── bar_group │ ├── bar_group.html │ └── bar_group.js ├── bar_group_brush │ ├── bar_group_brush.html │ └── bar_group_brush.js ├── bar_group_tooltip │ ├── bar_group.html │ └── bar_group_tooltip.js ├── bar_group_zoom │ ├── bar_group.html │ └── bar_group_zoom.js ├── bar_stack │ ├── bar_stack.html │ └── bar_stack.js ├── bar_stack_brush │ ├── bar_stack.html │ └── bar_stack_brush.js ├── bar_stack_tooltip │ ├── bar_stack.html │ └── bar_stack_tooltip.js ├── bar_stack_zoom │ ├── bar_stack_zoom.html │ └── bar_stack_zoom.js ├── bar_tooltip │ ├── bar.html │ └── bar_tooltip.js ├── bar_zoom │ ├── bar.html │ └── bar_zoom.js ├── data │ ├── age.csv │ ├── garbage.csv │ ├── letter.tsv │ ├── pie_test.csv │ ├── stack_test.csv │ └── user_sample.json ├── donut │ ├── donut.html │ └── donut.js ├── line │ ├── line_garbage.html │ └── line_garbage.js ├── line_brush │ ├── line_garbage.html │ └── line_garbage_brush.js ├── line_multi │ ├── line_multi_garbage.html │ └── line_multi_garbage.js ├── line_multi_brush │ ├── line_multi_garbage.html │ └── line_multi_garbage_brush.js ├── line_multi_tooltip │ ├── line_multi_garbage.html │ └── line_multi_garbage_tooltip.js ├── line_multi_zoom │ ├── line_multi_garbage.html │ └── line_multi_garbage_zoom.js ├── line_tooltip │ ├── line_garbage.html │ └── line_garbage_tooltip.js ├── line_user │ ├── line_user.html │ └── line_user.js ├── line_zoom │ ├── line_garbage.html │ └── line_garbage_zoom.js ├── pie │ ├── pie.html │ └── pie.js ├── pie_tooltip │ ├── pie_tooltip.html │ └── pie_tooltip.js ├── scatter │ ├── scatter_garbage.html │ └── scatter_garbage.js ├── scatter_brush │ ├── scatter_garbage.html │ └── scatter_garbage_brush.js ├── scatter_tooltip │ ├── scatter_garbage.html │ └── scatter_garbage_tooltip.js └── scatter_zoom │ ├── scatter_garbage.html │ └── scatter_garbage_zoom.js ├── webpack.config.js ├── webpack.map.config.js └── webpack.simple.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist/detail/origin 3 | dist/simple/origin 4 | dist/map_detail/origin 5 | npm_debug.log 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-d3 examples 2 | 3 | [![Dependency Status](https://gemnasium.com/react-d3/react-d3-example.svg)](https://gemnasium.com/react-d3/react-d3-example) 4 | 5 | Several examples for demontration the power of react-d3. 6 | 7 | See `./simple` for simple usage. 8 | 9 | See `./detail` for detail usage. 10 | 11 | View more info in http://reactd3.org 12 | 13 | ## Development 14 | 15 | for development mode: 16 | 17 | ``` 18 | NODE_ENV=0 webpack 19 | ``` 20 | 21 | for production mode: 22 | 23 | ``` 24 | NODE_ENV=1 webpack 25 | ``` 26 | 27 | - `webpack.map.config.js` map webpack. 28 | 29 | - `webpack.config.js` chart with detail configuration. 30 | 31 | - `webpack.simple.config.js` chart with simple configuration. 32 | -------------------------------------------------------------------------------- /detail/area/area_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | area example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/area/area_garbage.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom') 5 | var Chart = require('react-d3-core').Chart; 6 | var LineChart = require('react-d3-basic').LineChart; 7 | 8 | (function() { 9 | // load your general data 10 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 11 | 12 | // your date format, use for parsing 13 | var parseDate = d3.time.format("%YM%m").parse; 14 | 15 | var width = 700, 16 | height = 300, 17 | margins = {top: 30, right: 70, bottom: 30, left: 50}, 18 | id = "simple-area-chart", 19 | title = "Taiwan refuse disposal - Incineration", 20 | svgClassName = "simple-area-chart", 21 | titleClassName = "test-chart-title-class", 22 | // show xaxis or not 23 | showXAxis = true, 24 | // show yaxis or not 25 | showYAxis = true, 26 | // chart series, 27 | // field: is what field your data want to be selected 28 | // name: the name of the field that display in legend 29 | // color: what color is the line 30 | chartSeries = [ 31 | { 32 | field: 'incineration', 33 | name: 'Incineration', 34 | color: 'blue', 35 | area: true, 36 | style: { 37 | opacity: .2 38 | } 39 | } 40 | ], 41 | // your x accessor 42 | x = function(d) { 43 | return parseDate(d.month); 44 | }, 45 | xOrient = 'bottom', 46 | xTickOrient = 'top', 47 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 48 | xRange = [0, width - margins.left - margins.right], 49 | xScale = 'time', 50 | xAxisClassName = 'x-axis', 51 | xLabel = "Month", 52 | xLabelPosition = "left", 53 | // your y accessor 54 | y = function(d) { 55 | return +d; 56 | }, 57 | yOrient = 'right', 58 | yTickOrient = 'right', 59 | // find max and min 60 | yDomain = d3.extent(chartData, function(d) {return d.incineration;}), 61 | yRange = [height - margins.top - margins.bottom, 0], 62 | yScale = 'linear', 63 | yAxisClassName = 'y-axis', 64 | yLabelPosition = 'left', 65 | yLabel = "Amount"; 66 | 67 | ReactDOM.render( 68 | 74 | 105 | 106 | , document.getElementById('area-garbage') 107 | ) 108 | })() 109 | -------------------------------------------------------------------------------- /detail/area_stack/area_stack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | area stack example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/area_stack/area_stack.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var Chart = require('react-d3-core').Chart; 6 | var AreaStackChart = require('react-d3-basic').AreaStackChart; 7 | 8 | (function() { 9 | var generalChartData = require('dsv?delimiter=,!../data/stack_test.csv') 10 | 11 | var parseDate = d3.time.format("%m/%d/%y").parse; 12 | 13 | var width = 700, 14 | height = 400, 15 | margins = {top: 50, right: 50, bottom: 50, left: 50}, 16 | id = "test-chart", 17 | title = "Stack Area Chart", 18 | svgClassName = "test-chart-class", 19 | titleClassName = "test-chart-title-class", 20 | legendPosition = "right", 21 | showXAxis = true, 22 | showYAxis = true, 23 | chartSeries = [ 24 | { 25 | field: "Group1", 26 | name: "Group 1" 27 | }, 28 | { 29 | field: "Group2", 30 | name: "Group 2" 31 | }, 32 | { 33 | field: "Group3", 34 | name: "Group 3" 35 | } 36 | ], 37 | x = function(d) { 38 | return parseDate(d.date); 39 | }, 40 | xOrient = 'bottom', 41 | xTickOrient = 'bottom', 42 | xDomain = d3.extent(generalChartData, function(d) { return x(d); }), 43 | xRange = [0, width - margins.left - margins.right], 44 | xScale = 'time', 45 | xAxisClassName = 'x-axis', 46 | xLabel = "Date", 47 | y = function(d) { 48 | return +d; 49 | }, 50 | yOrient = 'left', 51 | yTickOrient = 'right', 52 | yDomain = [0, 100], 53 | yRange = [height - margins.top - margins.bottom, 0], 54 | yScale = 'linear', 55 | yAxisClassName = 'y-axis'; 56 | 57 | ReactDOM.render( 58 | 66 | 95 | 96 | , document.getElementById('area-stack') 97 | ) 98 | })() 99 | -------------------------------------------------------------------------------- /detail/area_stack_brush/area_stack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | area stack example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/area_stack_brush/area_stack_brush.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var AreaStackBrush = require('react-d3-brush').AreaStackBrush; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/stack_test.csv') 9 | 10 | var parseDate = d3.time.format("%m/%d/%y").parse; 11 | 12 | var width = 700, 13 | height = 400, 14 | margins = {top: 50, right: 50, bottom: 50, left: 50}, 15 | id = "test-chart", 16 | title = "Stack Area Chart", 17 | svgClassName = "test-chart-class", 18 | titleClassName = "test-chart-title-class", 19 | legendPosition = "right", 20 | showXAxis = true, 21 | showYAxis = true, 22 | chartSeries = [ 23 | { 24 | field: "Group1", 25 | name: "Group 1" 26 | }, 27 | { 28 | field: "Group2", 29 | name: "Group 2" 30 | }, 31 | { 32 | field: "Group3", 33 | name: "Group 3" 34 | } 35 | ], 36 | x = function(d) { 37 | return parseDate(d.date); 38 | }, 39 | xOrient = 'bottom', 40 | xTickOrient = 'bottom', 41 | xDomain = d3.extent(generalChartData, function(d) { return x(d); }), 42 | xRange = [0, width - margins.left - margins.right], 43 | xScale = 'time', 44 | xAxisClassName = 'x-axis', 45 | xLabel = "Date", 46 | y = function(d) { 47 | return +d; 48 | }, 49 | yOrient = 'left', 50 | yTickOrient = 'right', 51 | yDomain = [0, 100], 52 | yRange = [height - margins.top - margins.bottom, 0], 53 | yScale = 'linear', 54 | yAxisClassName = 'y-axis', 55 | // your brush height 56 | brushHeight = 100; 57 | 58 | ReactDOM.render( 59 | 90 | , document.getElementById('area-stack') 91 | ) 92 | })() 93 | -------------------------------------------------------------------------------- /detail/area_stack_tooltip/area_stack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | area stack example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/area_stack_tooltip/area_stack_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var AreaStackTooltip = require('react-d3-tooltip').AreaStackTooltip; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/stack_test.csv') 9 | 10 | var parseDate = d3.time.format("%m/%d/%y").parse; 11 | 12 | var width = 700, 13 | height = 400, 14 | margins = {top: 50, right: 50, bottom: 50, left: 50}, 15 | id = "test-chart", 16 | title = "Stack Area Chart", 17 | svgClassName = "test-chart-class", 18 | titleClassName = "test-chart-title-class", 19 | legendClassName = "test-legend", 20 | legendPosition = "right", 21 | showXAxis = true, 22 | showYAxis = true, 23 | chartSeries = [ 24 | { 25 | field: "Group1", 26 | name: "Group 1" 27 | }, 28 | { 29 | field: "Group2", 30 | name: "Group 2" 31 | }, 32 | { 33 | field: "Group3", 34 | name: "Group 3" 35 | } 36 | ], 37 | x = function(d) { 38 | return parseDate(d.date); 39 | }, 40 | xOrient = 'bottom', 41 | xTickOrient = 'bottom', 42 | xDomain = d3.extent(generalChartData, function(d) { return x(d); }), 43 | xRange = [0, width - margins.left - margins.right], 44 | xScale = 'time', 45 | xAxisClassName = 'x-axis', 46 | xLabel = "Date", 47 | y = function(d) { 48 | return +d; 49 | }, 50 | yOrient = 'left', 51 | yTickOrient = 'right', 52 | yDomain = [0, 100], 53 | yRange = [height - margins.top - margins.bottom, 0], 54 | yScale = 'linear', 55 | yAxisClassName = 'y-axis'; 56 | 57 | ReactDOM.render( 58 | 89 | , document.getElementById('area-stack') 90 | ) 91 | })() 92 | -------------------------------------------------------------------------------- /detail/area_stack_zoom/area_stack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | area stack example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/area_stack_zoom/area_stack_zoom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var AreaStackZoom = require('react-d3-zoom').AreaStackZoom; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/stack_test.csv') 9 | 10 | var parseDate = d3.time.format("%m/%d/%y").parse; 11 | 12 | var width = 700, 13 | height = 400, 14 | margins = {top: 50, right: 50, bottom: 50, left: 50}, 15 | id = "test-chart", 16 | title = "Stack Area Chart", 17 | svgClassName = "test-chart-class", 18 | titleClassName = "test-chart-title-class", 19 | legendClassName = "test-legend", 20 | legendPosition = "right", 21 | showXAxis = true, 22 | showYAxis = true, 23 | chartSeries = [ 24 | { 25 | field: "Group1", 26 | name: "Group 1" 27 | }, 28 | { 29 | field: "Group2", 30 | name: "Group 2" 31 | }, 32 | { 33 | field: "Group3", 34 | name: "Group 3" 35 | } 36 | ], 37 | x = function(d) { 38 | return parseDate(d.date); 39 | }, 40 | xOrient = 'bottom', 41 | xTickOrient = 'bottom', 42 | xDomain = d3.extent(generalChartData, function(d) { return x(d); }), 43 | xRange = [0, width - margins.left - margins.right], 44 | xScale = 'time', 45 | xAxisClassName = 'x-axis', 46 | xLabel = "Date", 47 | y = function(d) { 48 | return +d; 49 | }, 50 | yOrient = 'left', 51 | yTickOrient = 'right', 52 | yDomain = [0, 100], 53 | yRange = [height - margins.top - margins.bottom, 0], 54 | yScale = 'linear', 55 | yAxisClassName = 'y-axis'; 56 | 57 | ReactDOM.render( 58 | 89 | , document.getElementById('area-stack') 90 | ) 91 | })() 92 | -------------------------------------------------------------------------------- /detail/bar/bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/bar/bar.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var Chart = require('react-d3-core').Chart; 6 | var BarChart = require('react-d3-basic').BarChart; 7 | 8 | (function() { 9 | var generalChartData = require('dsv?delimiter=\t!../data/letter.tsv') 10 | 11 | var width = 700, 12 | height = 400, 13 | margins = {top: 50, right: 50, bottom: 50, left: 50}, 14 | id = "test-chart", 15 | title = "Bar Chart", 16 | svgClassName = "test-chart-class", 17 | titleClassName = "test-chart-title-class", 18 | legendClassName = "test-legend", 19 | legendPosition = "right", 20 | showXAxis = true, 21 | showYAxis = true, 22 | chartSeries = [ 23 | { 24 | field: 'frequency', 25 | name: 'Frequency' 26 | } 27 | ], 28 | x = function(d) { 29 | return d.letter; 30 | }, 31 | xOrient = 'bottom', 32 | xTickOrient = 'bottom', 33 | xDomain = generalChartData.map(function(d) { return d.letter; }), 34 | xRangeRoundBands = {interval: [0, width - margins.left - margins.right], padding: .1}, 35 | xScale = 'ordinal', 36 | xAxisClassName = 'x-axis', 37 | xLabel = "Letter", 38 | xLabelPosition = 'bottom', 39 | y = function(d) { 40 | return +d; 41 | }, 42 | yOrient = 'left', 43 | yTickOrient = 'right', 44 | yRange = [height - margins.top - margins.bottom, 0], 45 | yDomain = [0, +d3.max(generalChartData, function(d) { return d.frequency; })], 46 | yScale = 'linear', 47 | yAxisClassName = 'y-axis', 48 | yLabel = "Frequency", 49 | yTicks = [10, "%"], 50 | yLabelPosition = 'left'; 51 | 52 | ReactDOM.render( 53 | 59 | 93 | 94 | , document.getElementById('data_bar') 95 | ) 96 | })() 97 | -------------------------------------------------------------------------------- /detail/bar_brush/bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/bar_brush/bar_brush.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarBrush = require('react-d3-brush').BarBrush; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=\t!../data/letter.tsv') 9 | 10 | var width = 700, 11 | height = 400, 12 | margins = {top: 50, right: 50, bottom: 50, left: 50}, 13 | id = "test-chart", 14 | title = "Bar Chart", 15 | svgClassName = "test-chart-class", 16 | titleClassName = "test-chart-title-class", 17 | legendClassName = "test-legend", 18 | legendPosition = "right", 19 | showXAxis = true, 20 | showYAxis = true, 21 | chartSeries = [ 22 | { 23 | field: 'frequency', 24 | name: 'Frequency' 25 | } 26 | ], 27 | x = function(d) { 28 | return d.letter; 29 | }, 30 | xOrient = 'bottom', 31 | xTickOrient = 'bottom', 32 | xDomain = generalChartData.map(function(d) { return d.letter; }), 33 | xRangeRoundBands = {interval: [0, width - margins.left - margins.right], padding: .1}, 34 | xScale = 'ordinal', 35 | xAxisClassName = 'x-axis', 36 | xLabel = "Letter", 37 | xLabelPosition = 'bottom', 38 | y = function(d) { 39 | return +d; 40 | }, 41 | yOrient = 'left', 42 | yTickOrient = 'right', 43 | yRange = [height - margins.top - margins.bottom, 0], 44 | yDomain = [0, +d3.max(generalChartData, function(d) { return d.frequency; })], 45 | yScale = 'linear', 46 | yAxisClassName = 'y-axis', 47 | yLabel = "Frequency", 48 | yTicks = [10, "%"], 49 | yLabelPosition = 'left', 50 | // your brush height 51 | brushHeight = 100; 52 | 53 | ReactDOM.render( 54 | 89 | , document.getElementById('data_bar') 90 | ) 91 | })() 92 | -------------------------------------------------------------------------------- /detail/bar_group/bar_group.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar group example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/bar_group_brush/bar_group_brush.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Brush Bar Group Example 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /detail/bar_group_tooltip/bar_group.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar group example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/bar_group_tooltip/bar_group_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarGroupTooltip = require('react-d3-tooltip').BarGroupTooltip; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/age.csv') 9 | 10 | var ageNames = d3.keys(generalChartData[0]).filter(function(key) { return key !== "State"; }); 11 | 12 | generalChartData.forEach(function(d) { 13 | d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; }); 14 | }); 15 | 16 | var width = 700, 17 | height = 400, 18 | margins = {top: 50, right: 50, bottom: 50, left: 50}, 19 | id = "test-chart", 20 | title = "Bar Group Chart", 21 | svgClassName = "test-chart-class", 22 | titleClassName = "test-chart-title-class", 23 | legendClassName = "test-legend", 24 | legendPosition = 'right', 25 | labelOffset = 30, 26 | showXAxis = true, 27 | showYAxis = true, 28 | chartSeries = [ 29 | { 30 | field: 'Under 5 Years', 31 | name: 'Under 5 Years' 32 | }, 33 | { 34 | field: '5 to 13 Years', 35 | name: '5 to 13 Years' 36 | }, 37 | { 38 | field: '14 to 17 Years', 39 | name: '14 to 17 Years' 40 | }, 41 | { 42 | field: '18 to 24 Years', 43 | name: '18 to 24 Years' 44 | }, 45 | { 46 | field: '25 to 44 Years', 47 | name: '25 to 44 Years' 48 | }, 49 | { 50 | field: '45 to 64 Years', 51 | name: '45 to 64 Years' 52 | }, 53 | { 54 | field: '65 Years and Over', 55 | name: '65 Years and Over' 56 | }, 57 | 58 | ], 59 | x = function(d) { 60 | return d.State; 61 | }, 62 | xOrient = 'bottom', 63 | xTickOrient = 'bottom', 64 | xDomain = generalChartData.map(function(d) { return d.State; }), 65 | xRangeRoundBands = {interval: [0, width - margins.left - margins.right], padding: .1}, 66 | xScale = 'ordinal', 67 | xAxisClassName = 'x-axis', 68 | xLabel = "Age", 69 | xLabelPosition = 'bottom', 70 | y = function(d) { 71 | return +d; 72 | }, 73 | yOrient = 'left', 74 | yTickOrient = 'right', 75 | yRange = [height - margins.top - margins.bottom, 0], 76 | yDomain = [0, d3.max(generalChartData, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })], 77 | yScale = 'linear', 78 | yAxisClassName = 'y-axis', 79 | yLabel = "Population", 80 | yTickFormat = d3.format(".2s"), 81 | yLabelPosition = 'left', 82 | categoricalColors = d3.scale.category10(); 83 | 84 | 85 | ReactDOM.render( 86 | 122 | , document.getElementById('data_bar_group') 123 | ) 124 | })() 125 | -------------------------------------------------------------------------------- /detail/bar_group_zoom/bar_group.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar group example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/bar_group_zoom/bar_group_zoom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarGroupZoom = require('react-d3-zoom').BarGroupZoom; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/age.csv') 9 | 10 | var ageNames = d3.keys(generalChartData[0]).filter(function(key) { return key !== "State"; }); 11 | 12 | generalChartData.forEach(function(d) { 13 | d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; }); 14 | }); 15 | 16 | var width = 700, 17 | height = 400, 18 | margins = {top: 50, right: 50, bottom: 50, left: 50}, 19 | id = "test-chart", 20 | title = "Bar Group Chart", 21 | svgClassName = "test-chart-class", 22 | titleClassName = "test-chart-title-class", 23 | legendClassName = "test-legend", 24 | legendPosition = 'right', 25 | labelOffset = 30, 26 | showXAxis = true, 27 | showYAxis = true, 28 | chartSeries = [ 29 | { 30 | field: 'Under 5 Years', 31 | name: 'Under 5 Years' 32 | }, 33 | { 34 | field: '5 to 13 Years', 35 | name: '5 to 13 Years' 36 | }, 37 | { 38 | field: '14 to 17 Years', 39 | name: '14 to 17 Years' 40 | }, 41 | { 42 | field: '18 to 24 Years', 43 | name: '18 to 24 Years' 44 | }, 45 | { 46 | field: '25 to 44 Years', 47 | name: '25 to 44 Years' 48 | }, 49 | { 50 | field: '45 to 64 Years', 51 | name: '45 to 64 Years' 52 | }, 53 | { 54 | field: '65 Years and Over', 55 | name: '65 Years and Over' 56 | }, 57 | 58 | ], 59 | x = function(d) { 60 | return d.State; 61 | }, 62 | xOrient = 'bottom', 63 | xTickOrient = 'bottom', 64 | xDomain = generalChartData.map(function(d) { return d.State; }), 65 | xRangeRoundBands = {interval: [0, width - margins.left - margins.right], padding: .1}, 66 | xScale = 'ordinal', 67 | xAxisClassName = 'x-axis', 68 | xLabel = "Age", 69 | xLabelPosition = 'bottom', 70 | y = function(d) { 71 | return +d; 72 | }, 73 | yOrient = 'left', 74 | yTickOrient = 'right', 75 | yRange = [height - margins.top - margins.bottom, 0], 76 | yDomain = [0, d3.max(generalChartData, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })], 77 | yScale = 'linear', 78 | yAxisClassName = 'y-axis', 79 | yLabel = "Population", 80 | yTickFormat = d3.format(".2s"), 81 | yLabelPosition = 'left', 82 | categoricalColors = d3.scale.category10(); 83 | 84 | 85 | ReactDOM.render( 86 | 122 | , document.getElementById('data_bar_group') 123 | ) 124 | })() 125 | -------------------------------------------------------------------------------- /detail/bar_stack/bar_stack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar stack example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/bar_stack_brush/bar_stack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar stack example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/bar_stack_tooltip/bar_stack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar stack example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/bar_stack_zoom/bar_stack_zoom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bar Stack Zoom Example 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /detail/bar_tooltip/bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/bar_tooltip/bar_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarTooltip = require('react-d3-tooltip').BarTooltip; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=\t!../data/letter.tsv') 9 | 10 | var width = 700, 11 | height = 400, 12 | margins = {top: 50, right: 50, bottom: 50, left: 50}, 13 | id = "test-chart", 14 | title = "Bar Chart", 15 | svgClassName = "test-chart-class", 16 | titleClassName = "test-chart-title-class", 17 | legendClassName = "test-legend", 18 | legendPosition = "right", 19 | showXAxis = true, 20 | showYAxis = true, 21 | chartSeries = [ 22 | { 23 | field: 'frequency', 24 | name: 'Frequency' 25 | } 26 | ], 27 | x = function(d) { 28 | return d.letter; 29 | }, 30 | xOrient = 'bottom', 31 | xTickOrient = 'bottom', 32 | xDomain = generalChartData.map(function(d) { return d.letter; }), 33 | xRangeRoundBands = {interval: [0, width - margins.left - margins.right], padding: .1}, 34 | xScale = 'ordinal', 35 | xAxisClassName = 'x-axis', 36 | xLabel = "Letter", 37 | xLabelPosition = 'bottom', 38 | y = function(d) { 39 | return +d; 40 | }, 41 | yOrient = 'left', 42 | yTickOrient = 'right', 43 | yRange = [height - margins.top - margins.bottom, 0], 44 | yDomain = [0, +d3.max(generalChartData, function(d) { return d.frequency; })], 45 | yScale = 'linear', 46 | yAxisClassName = 'y-axis', 47 | yLabel = "Frequency", 48 | yTicks = [10, "%"], 49 | yLabelPosition = 'left'; 50 | 51 | ReactDOM.render( 52 | 86 | , document.getElementById('data_bar') 87 | ) 88 | })() 89 | -------------------------------------------------------------------------------- /detail/bar_zoom/bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/bar_zoom/bar_zoom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarZoom = require('react-d3-zoom').BarZoom; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=\t!../data/letter.tsv') 9 | 10 | var width = 700, 11 | height = 400, 12 | margins = {top: 50, right: 50, bottom: 50, left: 50}, 13 | id = "test-chart", 14 | title = "Bar Chart", 15 | svgClassName = "test-chart-class", 16 | titleClassName = "test-chart-title-class", 17 | legendClassName = "test-legend", 18 | legendPosition = "right", 19 | showXAxis = true, 20 | showYAxis = true, 21 | chartSeries = [ 22 | { 23 | field: 'frequency', 24 | name: 'Frequency' 25 | } 26 | ], 27 | x = function(d) { 28 | return d.letter; 29 | }, 30 | xOrient = 'bottom', 31 | xTickOrient = 'bottom', 32 | xDomain = generalChartData.map(function(d) { return d.letter; }), 33 | xRangeRoundBands = {interval: [0, width - margins.left - margins.right], padding: .1}, 34 | xScale = 'ordinal', 35 | xAxisClassName = 'x-axis', 36 | xLabel = "Letter", 37 | xLabelPosition = 'bottom', 38 | y = function(d) { 39 | return +d; 40 | }, 41 | yOrient = 'left', 42 | yTickOrient = 'right', 43 | yRange = [height - margins.top - margins.bottom, 0], 44 | yDomain = [0, +d3.max(generalChartData, function(d) { return d.frequency; })], 45 | yScale = 'linear', 46 | yAxisClassName = 'y-axis', 47 | yLabel = "Frequency", 48 | yTicks = [10, "%"], 49 | yLabelPosition = 'left'; 50 | 51 | ReactDOM.render( 52 | 86 | , document.getElementById('data_bar') 87 | ) 88 | })() 89 | -------------------------------------------------------------------------------- /detail/chart/chart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Chart Container Example 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /detail/chart/chart.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | var Chart = require('react-d3-core').Chart; 4 | 5 | // Example 6 | (function() { 7 | 8 | var width = 500, 9 | height = 400, 10 | margins = {top: 20, right: 50, bottom: 20, left: 50}, 11 | id = "test-chart", 12 | svgClassName = "test-chart-class", 13 | titleClassName = "test-chart-title-class"; 14 | 15 | // chart title 16 | var title = "test chart lib"; 17 | var style = { 18 | fill: 'red' 19 | }; 20 | 21 | ReactDOM.render( 22 | 30 | 31 | 32 | , document.getElementById('blank-container')) 33 | 34 | })() 35 | -------------------------------------------------------------------------------- /detail/data/age.csv: -------------------------------------------------------------------------------- 1 | State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,65 Years and Over 2 | CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496 3 | TX,2027307,3277946,1420518,2454721,7017731,5656528,2472223 4 | NY,1208495,2141490,1058031,1999120,5355235,5120254,2607672 5 | FL,1140516,1938695,925060,1607297,4782119,4746856,3187797 6 | IL,894368,1558919,725973,1311479,3596343,3239173,1575308 7 | PA,737462,1345341,679201,1203944,3157759,3414001,1910571 8 | -------------------------------------------------------------------------------- /detail/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 | -------------------------------------------------------------------------------- /detail/data/pie_test.csv: -------------------------------------------------------------------------------- 1 | age,population 2 | <5,2704659 3 | 5-13,4499890 4 | 14-17,2159981 5 | 18-24,3853788 6 | 25-44,14106543 7 | 45-64,8819342 8 | ≥65,612463 9 | -------------------------------------------------------------------------------- /detail/data/stack_test.csv: -------------------------------------------------------------------------------- 1 | date,Group1,Group2,Group3 2 | 04/23/12,37,12,46 3 | 04/24/12,32,18,24 4 | 04/25/12,10,29,34 5 | 04/26/12,30,12,14 6 | -------------------------------------------------------------------------------- /detail/data/user_sample.json: -------------------------------------------------------------------------------- 1 | 2 | 3 | [ 4 | {"name":"Darron Weissnat IV","BMI":20.72,"age":39,"birthday":"2005-01-03T00:00:00.000Z","city":"East Russel","married":false,"index":0} 5 | , 6 | {"name":"Pablo Ondricka","BMI":19.32,"age":38,"birthday":"1974-05-13T00:00:00.000Z","city":"Lake Edytheville","married":false,"index":1} 7 | , 8 | {"name":"Mr. Stella Kiehn Jr.","BMI":16.8,"age":34,"birthday":"2003-07-25T00:00:00.000Z","city":"Lake Veronicaburgh","married":false,"index":2} 9 | , 10 | {"name":"Lavon Hilll I","BMI":20.57,"age":12,"birthday":"1994-10-26T00:00:00.000Z","city":"Annatown","married":true,"index":3} 11 | , 12 | {"name":"Clovis Pagac","BMI":24.28,"age":26,"birthday":"1995-11-10T00:00:00.000Z","city":"South Eldredtown","married":false,"index":4} 13 | , 14 | {"name":"Gaylord Paucek","BMI":24.41,"age":30,"birthday":"1975-06-12T00:00:00.000Z","city":"Koeppchester","married":true,"index":5} 15 | , 16 | {"name":"Ashlynn Kuhn MD","BMI":23.77,"age":32,"birthday":"1985-08-09T00:00:00.000Z","city":"West Josiemouth","married":false,"index":6} 17 | , 18 | {"name":"Fern Schmeler IV","BMI":27.33,"age":26,"birthday":"2005-02-10T00:00:00.000Z","city":"West Abigaleside","married":true,"index":7} 19 | , 20 | {"name":"Enid Weber","BMI":18.72,"age":17,"birthday":"1998-11-30T00:00:00.000Z","city":"Zackton","married":true,"index":8} 21 | , 22 | {"name":"Leatha O'Hara","BMI":17.68,"age":42,"birthday":"2010-10-17T00:00:00.000Z","city":"Lake Matilda","married":false,"index":9} 23 | , 24 | {"name":"Korbin Steuber","BMI":16.35,"age":39,"birthday":"1975-06-30T00:00:00.000Z","city":"East Armandofort","married":true,"index":10} 25 | , 26 | {"name":"Brennon Torphy","BMI":27.37,"age":24,"birthday":"2003-10-21T00:00:00.000Z","city":"Croninfort","married":true,"index":11} 27 | , 28 | {"name":"Ms. Genoveva Bradtke","BMI":28.63,"age":19,"birthday":"1983-01-10T00:00:00.000Z","city":"Port Emanuel","married":true,"index":12} 29 | , 30 | {"name":"Gregg Halvorson","BMI":15.45,"age":15,"birthday":"2004-06-15T00:00:00.000Z","city":"Lake Angelinastad","married":false,"index":13} 31 | , 32 | {"name":"Mr. Sabina Schroeder III","BMI":24.27,"age":26,"birthday":"1980-11-22T00:00:00.000Z","city":"Toyview","married":true,"index":14} 33 | , 34 | {"name":"Alanna Mitchell","BMI":29.25,"age":37,"birthday":"1971-08-04T00:00:00.000Z","city":"Lake Monserratmouth","married":false,"index":15} 35 | , 36 | {"name":"Ronny Sanford","BMI":29.16,"age":24,"birthday":"1994-11-24T00:00:00.000Z","city":"New Claudhaven","married":false,"index":16} 37 | , 38 | {"name":"Emmitt Pouros","BMI":27.95,"age":14,"birthday":"1989-04-04T00:00:00.000Z","city":"Moorefurt","married":true,"index":17} 39 | , 40 | {"name":"Earl Purdy","BMI":18.34,"age":38,"birthday":"2013-04-03T00:00:00.000Z","city":"Lake Rowanberg","married":true,"index":18} 41 | , 42 | {"name":"Cordelia Klocko","BMI":25.85,"age":36,"birthday":"2011-01-17T00:00:00.000Z","city":"Lakinchester","married":true,"index":19} 43 | , 44 | {"name":"Guido Conroy","BMI":25.17,"age":39,"birthday":"1977-04-20T00:00:00.000Z","city":"Scarlettland","married":true,"index":20} 45 | , 46 | {"name":"Miss Demond Weissnat V","BMI":21.44,"age":19,"birthday":"2007-06-09T00:00:00.000Z","city":"Savionberg","married":false,"index":21} 47 | , 48 | {"name":"Easton Mante","BMI":20.61,"age":43,"birthday":"2007-01-29T00:00:00.000Z","city":"Kutchberg","married":false,"index":22} 49 | , 50 | {"name":"Dayton Ebert","BMI":29.88,"age":20,"birthday":"1978-04-27T00:00:00.000Z","city":"West Wiley","married":true,"index":23} 51 | ] 52 | -------------------------------------------------------------------------------- /detail/donut/donut.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | donut example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/donut/donut.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var Chart = require('react-d3-core').Chart; 6 | var PieChart = require('react-d3-basic').PieChart; 7 | 8 | (function() { 9 | var generalChartData = require('dsv?delimiter=,!../data/pie_test.csv') 10 | 11 | var width = 700, 12 | height = 400, 13 | radius = Math.min(width, height - 180) / 2, 14 | margins = {top: 50, right: 30, bottom: 20, left: 50}, 15 | id = "test-chart", 16 | title = "Donut Chart", 17 | svgClassName = "test-chart-class", 18 | titleClassName = "test-chart-title-class", 19 | legendClassName = "test-legend", 20 | value = function(d) { 21 | return +d.population; 22 | }, 23 | name = function(d) { 24 | return d.age; 25 | }, 26 | chartSeries = [ 27 | { 28 | "field": "<5", 29 | "name": "less than 5" 30 | }, 31 | { 32 | "field": "5-13", 33 | "name": "5 to 13" 34 | }, 35 | { 36 | "field": "14-17", 37 | "name": "14 to 17" 38 | }, 39 | { 40 | "field": "18-24", 41 | "name": "18 to 24" 42 | }, 43 | { 44 | "field": "25-44", 45 | "name": "25 to 44" 46 | }, 47 | { 48 | "field": "45-64", 49 | "name": "45 to 64" 50 | } 51 | ], 52 | legendPosition = 'left', 53 | outerRadius = radius - 10, 54 | innerRadius = 20; 55 | 56 | 57 | ReactDOM.render( 58 | 64 | 84 | 85 | , document.getElementById('data_donut') 86 | ) 87 | })() 88 | -------------------------------------------------------------------------------- /detail/grid/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Grid Example 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /detail/grid/grid.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | var Grid = require('react-d3-core').Grid; 4 | 5 | (function() { 6 | 7 | var generalChartData = require('json!../data/user_sample.json'); 8 | 9 | var width = 700, 10 | height = 400, 11 | margins = {top: 20, right: 50, bottom: 30, left: 50}, 12 | gridAxisClassName = "test-grid-class", 13 | y = function(d) { 14 | return d.age; 15 | }, 16 | yDomain = d3.extent(generalChartData, y), 17 | yRange = [height - margins.top - margins.bottom, 0], 18 | yScale = 'linear', 19 | x = function(d) { 20 | return d.index; 21 | }, 22 | xDomain = d3.extent(generalChartData, x), 23 | xRange = [0, width - margins.left - margins.right], 24 | xScale = 'linear'; 25 | 26 | 27 | ReactDOM.render( 28 | 29 | 40 | 51 | 52 | , document.getElementById('blank-grid') 53 | ) 54 | })() 55 | -------------------------------------------------------------------------------- /detail/legend/legend.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Legend Example 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /detail/legend/legend.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var Legend = require('react-d3-core').Legend; 6 | 7 | (function() { 8 | var width = 500, 9 | height = 400, 10 | margins = {top: 40, right: 50, bottom: 40, left: 50}, 11 | legendClassName = "test-legend-class", 12 | legendPosition = 'left', 13 | legendOffset = 90, 14 | chartSeries = [ 15 | { 16 | field: 'Under 5 Years', 17 | name: 'Under 5 Years', 18 | color: '#1f77b4' 19 | }, 20 | { 21 | field: '5 to 13 Years', 22 | name: '5 to 13 Years', 23 | color: '#ff7f0e' 24 | }, 25 | { 26 | field: '14 to 17 Years', 27 | name: '14 to 17 Years', 28 | color: '#2ca02c' 29 | }, 30 | { 31 | field: '18 to 24 Years', 32 | name: '18 to 24 Years', 33 | color: '#d62728' 34 | }, 35 | { 36 | field: '25 to 44 Years', 37 | name: '25 to 44 Years', 38 | color: '#9467bd' 39 | }, 40 | { 41 | field: '45 to 64 Years', 42 | name: '45 to 64 Years', 43 | color: '#8c564b' 44 | }, 45 | { 46 | field: '65 Years and Over', 47 | name: '65 Years and Over', 48 | color: '#e377c2' 49 | }, 50 | 51 | ] 52 | 53 | ReactDOM.render( 54 | 63 | , document.getElementById('blank-legend') 64 | ) 65 | })() 66 | -------------------------------------------------------------------------------- /detail/legend/legend_click.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Legend Example 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /detail/legend/legend_click.jsx: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var Legend = require('react-d3-core').Legend; 6 | 7 | (function() { 8 | var width = 500, 9 | height = 300, 10 | margins = {top: 40, right: 50, bottom: 40, left: 50}, 11 | legendClassName = "test-legend-class", 12 | legendPosition = 'left', 13 | legendOffset = 90, 14 | chartSeries = [ 15 | { 16 | field: 'Under 5 Years', 17 | name: 'Under 5 Years', 18 | color: '#1f77b4' 19 | }, 20 | { 21 | field: '5 to 13 Years', 22 | name: '5 to 13 Years', 23 | color: '#ff7f0e' 24 | }, 25 | { 26 | field: '14 to 17 Years', 27 | name: '14 to 17 Years', 28 | color: '#2ca02c' 29 | }, 30 | { 31 | field: '18 to 24 Years', 32 | name: '18 to 24 Years', 33 | color: '#d62728' 34 | }, 35 | { 36 | field: '25 to 44 Years', 37 | name: '25 to 44 Years', 38 | color: '#9467bd' 39 | }, 40 | { 41 | field: '45 to 64 Years', 42 | name: '45 to 64 Years', 43 | color: '#8c564b' 44 | }, 45 | { 46 | field: '65 Years and Over', 47 | name: '65 Years and Over', 48 | color: '#e377c2' 49 | }, 50 | 51 | ], 52 | chartSeries2 = [ 53 | { 54 | field: 'Under 5 Years', 55 | name: 'Under 5 Years', 56 | color: '#1f77b4' 57 | }, 58 | { 59 | field: '5 to 13 Years', 60 | name: '5 to 13 Years', 61 | color: '#ff7f0e' 62 | } 63 | ]; 64 | 65 | var ClickAxis = React.createClass({ 66 | getInitialState: function() { 67 | return { 68 | expend: false 69 | } 70 | }, 71 | _onClick: function() { 72 | this.setState({ 73 | expend: !this.state.expend 74 | }) 75 | }, 76 | render: function() { 77 | var expend = this.state.expend; 78 | var newWidth = expend? (width + 100): width; 79 | var newSeries = expend? chartSeries: chartSeries2; 80 | 81 | return ( 82 |
83 | 92 |
93 | ) 94 | } 95 | }) 96 | 97 | ReactDOM.render( 98 | 99 | , document.getElementById('click-legend') 100 | ) 101 | })() 102 | -------------------------------------------------------------------------------- /detail/line/line_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/line/line_garbage.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var Chart = require('react-d3-core').Chart; 6 | var LineChart = require('react-d3-basic').LineChart; 7 | 8 | (function() { 9 | // load your general data 10 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 11 | // your date format, use for parsing 12 | var parseDate = d3.time.format("%YM%m").parse; 13 | 14 | var width = 700, 15 | height = 300, 16 | margins = {top: 30, right: 70, bottom: 30, left: 50}, 17 | id = "simple-line-chart", 18 | title = "Taiwan refuse disposal", 19 | svgClassName = "simple-line-chart", 20 | titleClassName = "test-chart-title-class", 21 | // show xaxis or not 22 | showXAxis = true, 23 | // show yaxis or not 24 | showYAxis = true, 25 | // chart series, 26 | // field: is what field your data want to be selected 27 | // name: the name of the field that display in legend 28 | // color: what color is the line 29 | chartSeries = [ 30 | { 31 | field: 'total', 32 | name: 'Total', 33 | color: '#ff7f0e' 34 | } 35 | ], 36 | // your x accessor 37 | x = function(d) { 38 | return parseDate(d.month); 39 | }, 40 | xOrient = 'bottom', 41 | xTickOrient = 'top', 42 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 43 | xRange = [0, width - margins.left - margins.right], 44 | xScale = 'time', 45 | xAxisClassName = 'x-axis', 46 | xLabel = "Month", 47 | xLabelPosition = "left", 48 | // your y accessor 49 | y = function(d) { 50 | return +d; 51 | }, 52 | yOrient = 'right', 53 | yTickOrient = 'right', 54 | // find max and min 55 | yDomain = d3.extent(chartData, function(d) {return d.total;}), 56 | yRange = [height - margins.top - margins.bottom, 0], 57 | yScale = 'linear', 58 | yAxisClassName = 'y-axis', 59 | yLabelPosition = 'left', 60 | yLabel = "Amount"; 61 | 62 | ReactDOM.render( 63 | 69 | 100 | 101 | , document.getElementById('line-garbage') 102 | ) 103 | })() 104 | -------------------------------------------------------------------------------- /detail/line_brush/line_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/line_brush/line_garbage_brush.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var LineBrush = require('react-d3-brush').LineBrush; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | // your date format, use for parsing 11 | var parseDate = d3.time.format("%YM%m").parse; 12 | 13 | var width = 700, 14 | height = 300, 15 | margins = {top: 30, right: 70, bottom: 30, left: 50}, 16 | id = "simple-line-chart", 17 | title = "Taiwan refuse disposal", 18 | svgClassName = "simple-line-chart", 19 | titleClassName = "test-chart-title-class", 20 | // show xaxis or not 21 | showXAxis = true, 22 | // show yaxis or not 23 | showYAxis = true, 24 | // chart series, 25 | // field: is what field your data want to be selected 26 | // name: the name of the field that display in legend 27 | // color: what color is the line 28 | chartSeries = [ 29 | { 30 | field: 'total', 31 | name: 'Total', 32 | color: '#ff7f0e' 33 | } 34 | ], 35 | // your x accessor 36 | x = function(d) { 37 | return parseDate(d.month); 38 | }, 39 | xOrient = 'bottom', 40 | xTickOrient = 'bottom', 41 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 42 | xRange = [0, width - margins.left - margins.right], 43 | xScale = 'time', 44 | xAxisClassName = 'x-axis', 45 | xLabel = "Month", 46 | xLabelPosition = "left", 47 | // your y accessor 48 | y = function(d) { 49 | return +d; 50 | }, 51 | yOrient = 'right', 52 | yTickOrient = 'right', 53 | // find max and min 54 | yDomain = d3.extent(chartData, function(d) {return d.total;}), 55 | yRange = [height - margins.top - margins.bottom, 0], 56 | yScale = 'linear', 57 | yAxisClassName = 'y-axis', 58 | yLabelPosition = 'left', 59 | yLabel = "Amount", 60 | // your brush height 61 | brushHeight = 100; 62 | 63 | ReactDOM.render( 64 | 96 | , document.getElementById('line-garbage') 97 | ) 98 | })() 99 | -------------------------------------------------------------------------------- /detail/line_multi/line_multi_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line multiple example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/line_multi/line_multi_garbage.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var Chart = require('react-d3-core').Chart; 6 | var LineChart = require('react-d3-basic').LineChart; 7 | 8 | (function() { 9 | // load your general data 10 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 11 | 12 | // your date format, use for parsing 13 | var parseDate = d3.time.format("%YM%m").parse; 14 | 15 | var width = 700, 16 | height = 300, 17 | margins = {top: 30, right: 70, bottom: 30, left: 50}, 18 | id = "simple-area-chart", 19 | title = "Taiwan refuse disposal - Multi line", 20 | svgClassName = "simple-area-chart", 21 | titleClassName = "test-chart-title-class", 22 | // show xaxis or not 23 | showXAxis = true, 24 | // show yaxis or not 25 | showYAxis = true, 26 | // chart series, 27 | // field: is what field your data want to be selected 28 | // name: the name of the field that display in legend 29 | // color: what color is the line 30 | chartSeries = [ 31 | { 32 | field: 'total', 33 | name: 'Total' 34 | }, 35 | { 36 | field: 'incineration', 37 | name: 'Incineration' 38 | }, 39 | { 40 | field: 'garbageBury', 41 | name: 'Garbage Bury', 42 | area: true 43 | } 44 | ], 45 | // your x accessor 46 | x = function(d) { 47 | return parseDate(d.month); 48 | }, 49 | xOrient = 'bottom', 50 | xTickOrient = 'top', 51 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 52 | xRange = [0, width - margins.left - margins.right], 53 | xScale = 'time', 54 | xAxisClassName = 'x-axis', 55 | xLabel = "Month", 56 | xLabelPosition = "left", 57 | // your y accessor 58 | y = function(d) { 59 | return +d; 60 | }, 61 | yOrient = 'right', 62 | yTickOrient = 'right', 63 | // find max and min 64 | yDomain = [0, d3.max(chartData, function(d) {return d.total;})], 65 | yRange = [height - margins.top - margins.bottom, 0], 66 | yScale = 'linear', 67 | yAxisClassName = 'y-axis', 68 | yLabelPosition = 'left', 69 | yLabel = "Amount", 70 | categoricalColors= d3.scale.category10() 71 | 72 | ReactDOM.render( 73 | 79 | 111 | 112 | , document.getElementById('line-multi-garbage') 113 | ) 114 | })() 115 | -------------------------------------------------------------------------------- /detail/line_multi_brush/line_multi_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line multiple example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/line_multi_brush/line_multi_garbage_brush.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var LineBrush = require('react-d3-brush').LineBrush; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | 11 | // your date format, use for parsing 12 | var parseDate = d3.time.format("%YM%m").parse; 13 | 14 | var width = 700, 15 | height = 300, 16 | margins = {top: 30, right: 70, bottom: 30, left: 50}, 17 | id = "simple-area-chart", 18 | title = "Taiwan refuse disposal - Multi line", 19 | svgClassName = "simple-area-chart", 20 | titleClassName = "test-chart-title-class", 21 | // show xaxis or not 22 | showXAxis = true, 23 | // show yaxis or not 24 | showYAxis = true, 25 | // chart series, 26 | // field: is what field your data want to be selected 27 | // name: the name of the field that display in legend 28 | // color: what color is the line 29 | chartSeries = [ 30 | { 31 | field: 'total', 32 | name: 'Total' 33 | }, 34 | { 35 | field: 'incineration', 36 | name: 'Incineration' 37 | }, 38 | { 39 | field: 'garbageBury', 40 | name: 'Garbage Bury', 41 | area: true 42 | } 43 | ], 44 | // your x accessor 45 | x = function(d) { 46 | return parseDate(d.month); 47 | }, 48 | xOrient = 'bottom', 49 | xTickOrient = 'top', 50 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 51 | xRange = [0, width - margins.left - margins.right], 52 | xScale = 'time', 53 | xAxisClassName = 'x-axis', 54 | xLabel = "Month", 55 | xLabelPosition = "left", 56 | // your y accessor 57 | y = function(d) { 58 | return +d; 59 | }, 60 | yOrient = 'right', 61 | yTickOrient = 'right', 62 | // find max and min 63 | yDomain = [0, d3.max(chartData, function(d) {return d.total;})], 64 | yRange = [height - margins.top - margins.bottom, 0], 65 | yScale = 'linear', 66 | yAxisClassName = 'y-axis', 67 | yLabelPosition = 'left', 68 | yLabel = "Amount", 69 | categoricalColors= d3.scale.category10(), 70 | // your brush height 71 | brushHeight = 100; 72 | 73 | 74 | ReactDOM.render( 75 | 109 | , document.getElementById('line-multi-garbage') 110 | ) 111 | })() 112 | -------------------------------------------------------------------------------- /detail/line_multi_tooltip/line_multi_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line multiple example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/line_multi_tooltip/line_multi_garbage_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var LineTooltip = require('react-d3-tooltip').LineTooltip; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | 11 | // your date format, use for parsing 12 | var parseDate = d3.time.format("%YM%m").parse; 13 | 14 | var width = 700, 15 | height = 300, 16 | margins = {top: 30, right: 70, bottom: 30, left: 50}, 17 | id = "simple-area-chart", 18 | title = "Taiwan refuse disposal - Multi line", 19 | svgClassName = "simple-area-chart", 20 | titleClassName = "test-chart-title-class", 21 | // show xaxis or not 22 | showXAxis = true, 23 | // show yaxis or not 24 | showYAxis = true, 25 | // chart series, 26 | // field: is what field your data want to be selected 27 | // name: the name of the field that display in legend 28 | // color: what color is the line 29 | chartSeries = [ 30 | { 31 | field: 'total', 32 | name: 'Total' 33 | }, 34 | { 35 | field: 'incineration', 36 | name: 'Incineration' 37 | }, 38 | { 39 | field: 'garbageBury', 40 | name: 'Garbage Bury', 41 | area: true 42 | } 43 | ], 44 | // your x accessor 45 | x = function(d) { 46 | return parseDate(d.month); 47 | }, 48 | xOrient = 'bottom', 49 | xTickOrient = 'top', 50 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 51 | xRange = [0, width - margins.left - margins.right], 52 | xScale = 'time', 53 | xAxisClassName = 'x-axis', 54 | xLabel = "Month", 55 | xLabelPosition = "left", 56 | // your y accessor 57 | y = function(d) { 58 | return +d; 59 | }, 60 | yOrient = 'right', 61 | yTickOrient = 'right', 62 | // find max and min 63 | yDomain = [0, d3.max(chartData, function(d) {return d.total;})], 64 | yRange = [height - margins.top - margins.bottom, 0], 65 | yScale = 'linear', 66 | yAxisClassName = 'y-axis', 67 | yLabelPosition = 'left', 68 | yLabel = "Amount", 69 | categoricalColors= d3.scale.category10() 70 | 71 | ReactDOM.render( 72 | 104 | , document.getElementById('line-multi-garbage') 105 | ) 106 | })() 107 | -------------------------------------------------------------------------------- /detail/line_multi_zoom/line_multi_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line multiple example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/line_multi_zoom/line_multi_garbage_zoom.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var LineZoom = require('react-d3-zoom').LineZoom; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | 11 | // your date format, use for parsing 12 | var parseDate = d3.time.format("%YM%m").parse; 13 | 14 | var width = 700, 15 | height = 300, 16 | margins = {top: 30, right: 70, bottom: 30, left: 50}, 17 | id = "simple-area-chart", 18 | title = "Taiwan refuse disposal - Multi line", 19 | svgClassName = "simple-area-chart", 20 | titleClassName = "test-chart-title-class", 21 | // show xaxis or not 22 | showXAxis = true, 23 | // show yaxis or not 24 | showYAxis = true, 25 | // chart series, 26 | // field: is what field your data want to be selected 27 | // name: the name of the field that display in legend 28 | // color: what color is the line 29 | chartSeries = [ 30 | { 31 | field: 'total', 32 | name: 'Total' 33 | }, 34 | { 35 | field: 'incineration', 36 | name: 'Incineration' 37 | }, 38 | { 39 | field: 'garbageBury', 40 | name: 'Garbage Bury', 41 | area: true 42 | } 43 | ], 44 | // your x accessor 45 | x = function(d) { 46 | return parseDate(d.month); 47 | }, 48 | xOrient = 'bottom', 49 | xTickOrient = 'top', 50 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 51 | xRange = [0, width - margins.left - margins.right], 52 | xScale = 'time', 53 | xAxisClassName = 'x-axis', 54 | xLabel = "Month", 55 | xLabelPosition = "left", 56 | // your y accessor 57 | y = function(d) { 58 | return +d; 59 | }, 60 | yOrient = 'right', 61 | yTickOrient = 'right', 62 | // find max and min 63 | yDomain = [0, d3.max(chartData, function(d) {return d.total;})], 64 | yRange = [height - margins.top - margins.bottom, 0], 65 | yScale = 'linear', 66 | yAxisClassName = 'y-axis', 67 | yLabelPosition = 'left', 68 | yLabel = "Amount", 69 | categoricalColors= d3.scale.category10() 70 | 71 | ReactDOM.render( 72 | 104 | , document.getElementById('line-multi-garbage') 105 | ) 106 | })() 107 | -------------------------------------------------------------------------------- /detail/line_tooltip/line_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line tooltip example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/line_tooltip/line_garbage_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var LineTooltip = require('react-d3-tooltip').LineTooltip; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | // your date format, use for parsing 11 | var parseDate = d3.time.format("%YM%m").parse; 12 | 13 | var width = 700, 14 | height = 300, 15 | margins = {top: 30, right: 70, bottom: 30, left: 50}, 16 | id = "simple-line-chart", 17 | title = "Taiwan refuse disposal", 18 | svgClassName = "simple-line-chart", 19 | titleClassName = "test-chart-title-class", 20 | // show xaxis or not 21 | showXAxis = true, 22 | // show yaxis or not 23 | showYAxis = true, 24 | // chart series, 25 | // field: is what field your data want to be selected 26 | // name: the name of the field that display in legend 27 | // color: what color is the line 28 | chartSeries = [ 29 | { 30 | field: 'total', 31 | name: 'Total', 32 | color: '#ff7f0e' 33 | } 34 | ], 35 | // your x accessor 36 | x = function(d) { 37 | return parseDate(d.month); 38 | }, 39 | xOrient = 'bottom', 40 | xTickOrient = 'top', 41 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 42 | xRange = [0, width - margins.left - margins.right], 43 | xScale = 'time', 44 | xAxisClassName = 'x-axis', 45 | xLabel = "Month", 46 | xLabelPosition = "left", 47 | // your y accessor 48 | y = function(d) { 49 | return +d; 50 | }, 51 | yOrient = 'right', 52 | yTickOrient = 'right', 53 | // find max and min 54 | yDomain = d3.extent(chartData, function(d) {return d.total;}), 55 | yRange = [height - margins.top - margins.bottom, 0], 56 | yScale = 'linear', 57 | yAxisClassName = 'y-axis', 58 | yLabelPosition = 'left', 59 | yLabel = "Amount"; 60 | 61 | ReactDOM.render( 62 | 93 | , document.getElementById('line-garbage') 94 | ) 95 | })() 96 | -------------------------------------------------------------------------------- /detail/line_zoom/line_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line tooltip example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/line_zoom/line_garbage_zoom.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var LineZoom = require('react-d3-zoom').LineZoom; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | // your date format, use for parsing 11 | var parseDate = d3.time.format("%YM%m").parse; 12 | 13 | var width = 700, 14 | height = 300, 15 | margins = {top: 30, right: 70, bottom: 30, left: 50}, 16 | id = "simple-line-chart", 17 | title = "Taiwan refuse disposal", 18 | svgClassName = "simple-line-chart", 19 | titleClassName = "test-chart-title-class", 20 | // show xaxis or not 21 | showXAxis = true, 22 | // show yaxis or not 23 | showYAxis = true, 24 | // chart series, 25 | // field: is what field your data want to be selected 26 | // name: the name of the field that display in legend 27 | // color: what color is the line 28 | chartSeries = [ 29 | { 30 | field: 'total', 31 | name: 'Total', 32 | color: '#ff7f0e' 33 | } 34 | ], 35 | // your x accessor 36 | x = function(d) { 37 | return parseDate(d.month); 38 | }, 39 | xOrient = 'bottom', 40 | xTickOrient = 'top', 41 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 42 | xRange = [0, width - margins.left - margins.right], 43 | xScale = 'time', 44 | xAxisClassName = 'x-axis', 45 | xLabel = "Month", 46 | xLabelPosition = "left", 47 | // your y accessor 48 | y = function(d) { 49 | return +d; 50 | }, 51 | yOrient = 'right', 52 | yTickOrient = 'right', 53 | // find max and min 54 | yDomain = d3.extent(chartData, function(d) {return d.total;}), 55 | yRange = [height - margins.top - margins.bottom, 0], 56 | yScale = 'linear', 57 | yAxisClassName = 'y-axis', 58 | yLabelPosition = 'left', 59 | yLabel = "Amount"; 60 | 61 | ReactDOM.render( 62 | 93 | , document.getElementById('line-garbage') 94 | ) 95 | })() 96 | -------------------------------------------------------------------------------- /detail/pie/pie.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | pie example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/pie/pie.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var Chart = require('react-d3-core').Chart; 6 | var PieChart = require('react-d3-basic').PieChart; 7 | 8 | (function() { 9 | var generalChartData = require('dsv?delimiter=,!../data/pie_test.csv') 10 | 11 | var width = 700, 12 | height = 400, 13 | radius = Math.min(width, height - 180) / 2, 14 | margins = {top: 50, right: 30, bottom: 20, left: 50}, 15 | id = "test-chart", 16 | title = "Pie Chart", 17 | svgClassName = "test-chart-class", 18 | titleClassName = "test-chart-title-class", 19 | legendClassName = "test-legend", 20 | value = function(d) { 21 | return +d.population; 22 | }, 23 | name = function(d) { 24 | return d.age; 25 | }, 26 | chartSeries = [ 27 | { 28 | "field": "<5", 29 | "name": "less than 5" 30 | }, 31 | { 32 | "field": "5-13", 33 | "name": "5 to 13" 34 | }, 35 | { 36 | "field": "14-17", 37 | "name": "14 to 17" 38 | }, 39 | { 40 | "field": "18-24", 41 | "name": "18 to 24" 42 | }, 43 | { 44 | "field": "25-44", 45 | "name": "25 to 44" 46 | }, 47 | { 48 | "field": "45-64", 49 | "name": "45 to 64" 50 | } 51 | ], 52 | legendPosition = 'left', 53 | outerRadius = radius - 10, 54 | innerRadius = 0; 55 | 56 | 57 | ReactDOM.render( 58 | 64 | 84 | 85 | , document.getElementById('data_pie') 86 | ) 87 | })() 88 | -------------------------------------------------------------------------------- /detail/pie_tooltip/pie_tooltip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Pie Tooltip example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/pie_tooltip/pie_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var PieTooltip = require('react-d3-tooltip').PieTooltip; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/pie_test.csv') 9 | 10 | var width = 700, 11 | height = 300, 12 | // set your pie chart radius 13 | radius = Math.min(width, height - 120) / 2, 14 | margins = {top: 50, right: 50, bottom: 20, left: 50}, 15 | id = "test-chart", 16 | title = "Pie Chart With Tooltip", 17 | svgClassName = "test-chart-class", 18 | titleClassName = "test-chart-title-class", 19 | legendClassName = "test-legend", 20 | // value accessor 21 | value = function(d) { 22 | return +d.population; 23 | }, 24 | // name accessor 25 | name = function(d) { 26 | return d.age; 27 | }, 28 | // field means what your input field name is, 29 | // name means the name show in the legend in your chart. 30 | chartSeries = [ 31 | { 32 | "field": "<5", 33 | "name": "less than 5" 34 | }, 35 | { 36 | "field": "5-13", 37 | "name": "5 to 13" 38 | }, 39 | { 40 | "field": "14-17", 41 | "name": "14 to 17" 42 | }, 43 | { 44 | "field": "18-24", 45 | "name": "18 to 24" 46 | }, 47 | { 48 | "field": "25-44", 49 | "name": "25 to 44" 50 | }, 51 | { 52 | "field": "45-64", 53 | "name": "45 to 64" 54 | } 55 | ], 56 | legendPosition = 'right', 57 | // your outer radius 58 | outerRadius = radius, 59 | // your inner radius, if greater than 0, it will become a donut chart 60 | innerRadius = 0, 61 | // d3.descending for sort by descending, d3.ascending for sort by ascending. 62 | pieSort = d3.descending; 63 | 64 | 65 | ReactDOM.render( 66 | 86 | , document.getElementById('data_tooltip_pie') 87 | ) 88 | })() 89 | -------------------------------------------------------------------------------- /detail/scatter/scatter_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | scatter example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/scatter/scatter_garbage.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var Chart = require('react-d3-core').Chart; 6 | var ScatterPlot = require('react-d3-basic').ScatterPlot; 7 | 8 | (function() { 9 | // load your general data 10 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 11 | 12 | // your date format, use for parsing 13 | var parseDate = d3.time.format("%YM%m").parse; 14 | 15 | var width = 700, 16 | height = 300, 17 | margins = {top: 30, right: 70, bottom: 30, left: 50}, 18 | id = "simple-area-chart", 19 | title = "Taiwan refuse disposal - Multi line", 20 | svgClassName = "simple-area-chart", 21 | titleClassName = "test-chart-title-class", 22 | // show xaxis or not 23 | showXAxis = true, 24 | // show yaxis or not 25 | showYAxis = true, 26 | // chart series, 27 | // field: is what field your data want to be selected 28 | // name: the name of the field that display in legend 29 | // color: what color is the line 30 | chartSeries = [ 31 | { 32 | field: 'total', 33 | name: 'Total', 34 | symbol: 'diamond', 35 | symbolSize: 6 36 | }, 37 | { 38 | field: 'incineration', 39 | name: 'Incineration', 40 | symbol: 'cross', 41 | symbolSize: 6 42 | }, 43 | { 44 | field: 'garbageBury', 45 | name: 'Garbage Bury', 46 | symbol: 'triangle-down', 47 | symbolSize: 6 48 | } 49 | ], 50 | // your x accessor 51 | x = function(d) { 52 | return parseDate(d.month); 53 | }, 54 | xOrient = 'bottom', 55 | xTickOrient = 'top', 56 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 57 | xRange = [0, width - margins.left - margins.right], 58 | xScale = 'time', 59 | xAxisClassName = 'x-axis', 60 | xLabel = "Month", 61 | xLabelPosition = "left", 62 | // your y accessor 63 | y = function(d) { 64 | return +d; 65 | }, 66 | yOrient = 'right', 67 | yTickOrient = 'right', 68 | // find max and min 69 | yDomain = [0, d3.max(chartData, function(d) {return d.total;})], 70 | yRange = [height - margins.top - margins.bottom, 0], 71 | yScale = 'linear', 72 | yAxisClassName = 'y-axis', 73 | yLabelPosition = 'left', 74 | yLabel = "Amount", 75 | categoricalColors= d3.scale.category10() 76 | 77 | ReactDOM.render( 78 | 84 | 116 | 117 | , document.getElementById('scatter-garbage') 118 | ) 119 | })() 120 | -------------------------------------------------------------------------------- /detail/scatter_brush/scatter_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | scatter tooltip example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/scatter_brush/scatter_garbage_brush.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var ScatterBrush = require('react-d3-brush').ScatterBrush; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | 11 | // your date format, use for parsing 12 | var parseDate = d3.time.format("%YM%m").parse; 13 | 14 | var width = 700, 15 | height = 300, 16 | margins = {top: 30, right: 70, bottom: 30, left: 50}, 17 | id = "simple-area-chart", 18 | title = "Taiwan refuse disposal - Multi line", 19 | svgClassName = "simple-area-chart", 20 | titleClassName = "test-chart-title-class", 21 | // show xaxis or not 22 | showXAxis = true, 23 | // show yaxis or not 24 | showYAxis = true, 25 | // chart series, 26 | // field: is what field your data want to be selected 27 | // name: the name of the field that display in legend 28 | // color: what color is the line 29 | chartSeries = [ 30 | { 31 | field: 'total', 32 | name: 'Total', 33 | symbol: 'diamond', 34 | symbolSize: 6 35 | }, 36 | { 37 | field: 'incineration', 38 | name: 'Incineration', 39 | symbol: 'cross', 40 | symbolSize: 6 41 | }, 42 | { 43 | field: 'garbageBury', 44 | name: 'Garbage Bury', 45 | symbol: 'triangle-down', 46 | symbolSize: 6 47 | } 48 | ], 49 | // your x accessor 50 | x = function(d) { 51 | return parseDate(d.month); 52 | }, 53 | xOrient = 'bottom', 54 | xTickOrient = 'bottom', 55 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 56 | xRange = [0, width - margins.left - margins.right], 57 | xScale = 'time', 58 | xAxisClassName = 'x-axis', 59 | xLabel = "Month", 60 | xLabelPosition = "bottom", 61 | // your y accessor 62 | y = function(d) { 63 | return +d; 64 | }, 65 | yOrient = 'right', 66 | yTickOrient = 'right', 67 | // find max and min 68 | yDomain = [0, d3.max(chartData, function(d) {return d.total;})], 69 | yRange = [height - margins.top - margins.bottom, 0], 70 | yScale = 'linear', 71 | yAxisClassName = 'y-axis', 72 | yLabelPosition = 'left', 73 | yLabel = "Amount", 74 | categoricalColors= d3.scale.category10(), 75 | // your brush height 76 | brushHeight = 100; 77 | 78 | ReactDOM.render( 79 | 112 | , document.getElementById('scatter-garbage') 113 | ) 114 | })() 115 | -------------------------------------------------------------------------------- /detail/scatter_tooltip/scatter_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | scatter tooltip example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/scatter_tooltip/scatter_garbage_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var ScatterTooltip = require('react-d3-tooltip').ScatterTooltip; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | 11 | // your date format, use for parsing 12 | var parseDate = d3.time.format("%YM%m").parse; 13 | 14 | var width = 700, 15 | height = 300, 16 | margins = {top: 30, right: 70, bottom: 30, left: 50}, 17 | id = "simple-area-chart", 18 | title = "Taiwan refuse disposal - Multi line", 19 | svgClassName = "simple-area-chart", 20 | titleClassName = "test-chart-title-class", 21 | // show xaxis or not 22 | showXAxis = true, 23 | // show yaxis or not 24 | showYAxis = true, 25 | // chart series, 26 | // field: is what field your data want to be selected 27 | // name: the name of the field that display in legend 28 | // color: what color is the line 29 | chartSeries = [ 30 | { 31 | field: 'total', 32 | name: 'Total', 33 | symbol: 'diamond', 34 | symbolSize: 6 35 | }, 36 | { 37 | field: 'incineration', 38 | name: 'Incineration', 39 | symbol: 'cross', 40 | symbolSize: 6 41 | }, 42 | { 43 | field: 'garbageBury', 44 | name: 'Garbage Bury', 45 | symbol: 'triangle-down', 46 | symbolSize: 6 47 | } 48 | ], 49 | // your x accessor 50 | x = function(d) { 51 | return parseDate(d.month); 52 | }, 53 | xOrient = 'bottom', 54 | xTickOrient = 'top', 55 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 56 | xRange = [0, width - margins.left - margins.right], 57 | xScale = 'time', 58 | xAxisClassName = 'x-axis', 59 | xLabel = "Month", 60 | xLabelPosition = "left", 61 | // your y accessor 62 | y = function(d) { 63 | return +d; 64 | }, 65 | yOrient = 'right', 66 | yTickOrient = 'right', 67 | // find max and min 68 | yDomain = [0, d3.max(chartData, function(d) {return d.total;})], 69 | yRange = [height - margins.top - margins.bottom, 0], 70 | yScale = 'linear', 71 | yAxisClassName = 'y-axis', 72 | yLabelPosition = 'left', 73 | yLabel = "Amount", 74 | categoricalColors= d3.scale.category10() 75 | 76 | ReactDOM.render( 77 | 109 | , document.getElementById('scatter-garbage') 110 | ) 111 | })() 112 | -------------------------------------------------------------------------------- /detail/scatter_zoom/scatter_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | scatter zoom example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/scatter_zoom/scatter_garbage_zoom.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var ScatterZoom = require('react-d3-zoom').ScatterZoom; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | 11 | // your date format, use for parsing 12 | var parseDate = d3.time.format("%YM%m").parse; 13 | 14 | var width = 700, 15 | height = 300, 16 | margins = {top: 30, right: 70, bottom: 30, left: 50}, 17 | id = "simple-area-chart", 18 | title = "Taiwan refuse disposal - Multi line", 19 | svgClassName = "simple-area-chart", 20 | titleClassName = "test-chart-title-class", 21 | // show xaxis or not 22 | showXAxis = true, 23 | // show yaxis or not 24 | showYAxis = true, 25 | // chart series, 26 | // field: is what field your data want to be selected 27 | // name: the name of the field that display in legend 28 | // color: what color is the line 29 | chartSeries = [ 30 | { 31 | field: 'total', 32 | name: 'Total', 33 | symbol: 'diamond', 34 | symbolSize: 6 35 | }, 36 | { 37 | field: 'incineration', 38 | name: 'Incineration', 39 | symbol: 'cross', 40 | symbolSize: 6 41 | }, 42 | { 43 | field: 'garbageBury', 44 | name: 'Garbage Bury', 45 | symbol: 'triangle-down', 46 | symbolSize: 6 47 | } 48 | ], 49 | // your x accessor 50 | x = function(d) { 51 | return parseDate(d.month); 52 | }, 53 | xOrient = 'bottom', 54 | xTickOrient = 'top', 55 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 56 | xRange = [0, width - margins.left - margins.right], 57 | xScale = 'time', 58 | xAxisClassName = 'x-axis', 59 | xLabel = "Month", 60 | xLabelPosition = "left", 61 | // your y accessor 62 | y = function(d) { 63 | return +d; 64 | }, 65 | yOrient = 'right', 66 | yTickOrient = 'right', 67 | // find max and min 68 | yDomain = [0, d3.max(chartData, function(d) {return d.total;})], 69 | yRange = [height - margins.top - margins.bottom, 0], 70 | yScale = 'linear', 71 | yAxisClassName = 'y-axis', 72 | yLabelPosition = 'left', 73 | yLabel = "Amount", 74 | categoricalColors= d3.scale.category10() 75 | 76 | ReactDOM.render( 77 | 109 | , document.getElementById('scatter-garbage') 110 | ) 111 | })() 112 | -------------------------------------------------------------------------------- /detail/xaxis/xaxis.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | xaxis es5 example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/xaxis/xaxis_click.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | xaxis es5 example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/xaxis/xaxis_click.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var Xaxis = require('react-d3-core').Xaxis; 6 | 7 | (function() { 8 | // load your general data, for building xDomain. 9 | var chartData = require("dsv?delimiter=,!../data/garbage.csv"); 10 | // your date format, use for parsing 11 | var parseDate = d3.time.format("%YM%m").parse; 12 | 13 | // setting you svg width 14 | var width = 400, 15 | // setting your svg height 16 | height = 100, 17 | // setting your margins of your svg 18 | margins = {top: 20, right: 50, bottom: 20, left: 50}, 19 | // your x Axis accessor 20 | x = function(d) { 21 | return parseDate(d.month); 22 | }, 23 | // set your x domain 24 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 25 | // set your x range 26 | xRange = [0, width - margins.left - margins.right], 27 | // your scale type 'linear', 'ordinal', 'time'... etc. 28 | xScale = 'time', 29 | // set your label name 30 | xLabel = "Month"; 31 | 32 | var ClickAxis = React.createClass({ 33 | getInitialState: function() { 34 | return { 35 | expend: false 36 | } 37 | }, 38 | _onClick: function() { 39 | this.setState({ 40 | expend: !this.state.expend 41 | }) 42 | }, 43 | render: function() { 44 | var expend = this.state.expend; 45 | var newWidth = expend? (width + 100): width; 46 | var newRange = expend? ([0, width - margins.left - margins.right + 100]): ([0, width - margins.left - margins.right]); 47 | 48 | return ( 49 | 50 | 60 | 61 | ) 62 | } 63 | }) 64 | 65 | ReactDOM.render( 66 | 67 | , document.getElementById('click-xaxis') 68 | ) 69 | })() 70 | -------------------------------------------------------------------------------- /detail/xaxis/xaxis_garbage.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var Xaxis = require('react-d3-core').Xaxis; 6 | 7 | (function() { 8 | // load your general data, for building xDomain. 9 | var chartData = require("dsv?delimiter=,!../data/garbage.csv"); 10 | // your date format, use for parsing 11 | var parseDate = d3.time.format("%YM%m").parse; 12 | 13 | // setting you svg width 14 | var width = 500, 15 | // setting your svg height 16 | height = 100, 17 | // setting your margins of your svg 18 | margins = {top: 20, right: 50, bottom: 20, left: 50}, 19 | // your x Axis accessor 20 | x = function(d) { 21 | return parseDate(d.month); 22 | }, 23 | // set your x domain 24 | xDomain = d3.extent(chartData, function(d){ return x(d) }), 25 | // set your x range 26 | xRange = [0, width - margins.left - margins.right], 27 | // your scale type 'linear', 'ordinal', 'time'... etc. 28 | xScale = 'time', 29 | // set your label name 30 | xLabel = "Month"; 31 | 32 | ReactDOM.render( 33 | 34 | 44 | 45 | , document.getElementById('garbage-xaxis') 46 | ) 47 | })() 48 | -------------------------------------------------------------------------------- /detail/yaxis/yaxis.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | yaxis es5 example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /detail/yaxis/yaxis_garbage.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var Yaxis = require('react-d3-core').Yaxis; 6 | 7 | (function() { 8 | // load your general data, for building xDomain. 9 | var chartData = require("dsv?delimiter=,!../data/garbage.csv"); 10 | 11 | // setting you svg width 12 | var width = 500, 13 | // setting your svg height 14 | height = 300, 15 | // setting your margins of your svg 16 | margins = {top: 20, right: 50, bottom: 20, left: 50}, 17 | // your y Axis accessor 18 | y = function(d) { 19 | return +d.total; 20 | }, 21 | // set your y domain 22 | yDomain = d3.extent(chartData, function(d){ return y(d); }), 23 | // set your y range 24 | yRange = [(height - margins.top - margins.bottom), 0], 25 | // your scale type 'linear', 'ordinal', 'time'... etc. 26 | yScale = 'linear', 27 | // set your label name 28 | yLabel = "Total", 29 | yLabelPosition = 'right', 30 | yOrient = "right", 31 | yTickOrient = "left"; 32 | 33 | ReactDOM.render( 34 | 35 | 48 | 49 | , document.getElementById('garbage-yaxis') 50 | ) 51 | })() 52 | -------------------------------------------------------------------------------- /map_detail/bubble/css/bubble.css: -------------------------------------------------------------------------------- 1 | .land { 2 | fill: #ddd; 3 | } 4 | 5 | .border { 6 | fill: none; 7 | stroke: #fff; 8 | stroke-linejoin: round; 9 | stroke-linecap: round; 10 | } 11 | 12 | .bubble { 13 | fill: red; 14 | fill-opacity: .3; 15 | stroke: #fff; 16 | stroke-width: .5px; 17 | pointer-events: all; 18 | } 19 | 20 | circle:hover { 21 | fill-opacity: .8 !important; 22 | } 23 | 24 | .legend circle { 25 | fill: none; 26 | stroke: #ccc; 27 | } 28 | 29 | .legend text { 30 | fill: #777; 31 | font: 10px sans-serif; 32 | text-anchor: middle; 33 | } 34 | 35 | .polygon-bubble { 36 | fill: #CCC !important; 37 | } 38 | 39 | .mesh-bubble { 40 | stroke: #EEE !important; 41 | } 42 | -------------------------------------------------------------------------------- /map_detail/bubble/earthquake/earthquake.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | earthquake example 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /map_detail/bubble/earthquake/earthquake.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var topojson = require('topojson'); 6 | var MapBubble = require('react-d3-map-bubble').MapBubble; 7 | 8 | var css= require('../css/bubble.css'); 9 | 10 | 11 | // Example 12 | (function() { 13 | var width = 700, 14 | height = 700; 15 | 16 | var world = require('json!../data/world-50m.json'); 17 | var earthquake = require('json!../data/earthquake.json'); 18 | 19 | // data should be a MultiLineString 20 | var countries = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }); 21 | /// data should be polygon 22 | var land = topojson.feature(world, world.objects.land); 23 | 24 | // class 25 | var meshClass = 'border'; 26 | var polygonClass = 'land'; 27 | 28 | // domain 29 | var domain = { 30 | scale: 'sqrt', 31 | domain: d3.extent(earthquake, function(d) {return +d.deaths}), 32 | range: [0, 50] 33 | }; 34 | 35 | var circles = earthquake 36 | var circleValue = function(d) { return +d.deaths; }; 37 | 38 | var circleX = function(d) {return +d.lng}; 39 | var circleY = function(d) {return +d.lat}; 40 | 41 | var tooltipContent = function(d) { 42 | delete d.cell; 43 | delete d.comments; 44 | return d; 45 | } 46 | 47 | var scale = (width + 1) / 2 / Math.PI; 48 | var translate = [width / 2, height / 2]; 49 | var precision = .1; 50 | var projection = 'mercator'; 51 | 52 | ReactDOM.render( 53 | 72 | , document.getElementById('blank-earthquake') 73 | ) 74 | 75 | })() 76 | -------------------------------------------------------------------------------- /map_detail/bubble/mapbubble/mapbubble.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | mapbubble example 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /map_detail/bubble/mapbubble/mapbubble.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var topojson = require('topojson'); 6 | var MapBubble = require('react-d3-map-bubble').MapBubble; 7 | 8 | var css= require('../css/bubble.css'); 9 | 10 | // Example 11 | // http://bl.ocks.org/mbostock/9943478 12 | (function() { 13 | var width = 960, 14 | height = 700; 15 | 16 | var us = require('json!../data/us.json'); 17 | 18 | // data should be a MultiLineString 19 | var dataStates = topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }); 20 | /// data should be polygon 21 | var dataCounties = topojson.feature(us, us.objects.nation); 22 | 23 | // class 24 | var meshClass = 'border'; 25 | var polygonClass = 'land'; 26 | 27 | // domain 28 | var domain = { 29 | scale: 'sqrt', 30 | domain: [0, 1e6], 31 | range: [0, 15] 32 | }; 33 | 34 | var circles = topojson.feature(us, us.objects.counties).features 35 | .sort(function(a, b) { return b.properties.population - a.properties.population; }) 36 | var circleValue = function(d) { return +d.properties.population; }; 37 | var projection = 'null'; 38 | 39 | var tooltipContent = function(d) {return d.properties;} 40 | 41 | ReactDOM.render( 42 | 59 | , document.getElementById('blank-mapbubble') 60 | ) 61 | 62 | })() 63 | -------------------------------------------------------------------------------- /map_detail/choropleth/css/twpopulation.css: -------------------------------------------------------------------------------- 1 | .q10-11{fill:rgb(165,0,38) !important} 2 | .q9-11{fill:rgb(215,48,39) !important} 3 | .q8-11{fill:rgb(244,109,67) !important} 4 | .q7-11{fill:rgb(253,174,97) !important} 5 | .q6-11{fill:rgb(254,224,139) !important} 6 | .q5-11{fill:rgb(255,255,191) !important} 7 | .q4-11{fill:rgb(217,239,139) !important} 8 | .q3-11{fill:rgb(166,217,106) !important} 9 | .q2-11{fill:rgb(102,189,99) !important} 10 | .q1-11{fill:rgb(26,152,80) !important} 11 | .q0-11{fill:rgb(0,104,55) !important} 12 | 13 | .polygon { 14 | fill-opacity: 0.5 15 | } 16 | 17 | .polygon:hover { 18 | fill-opacity: 0.3; 19 | } 20 | -------------------------------------------------------------------------------- /map_detail/choropleth/css/unemployment.css: -------------------------------------------------------------------------------- 1 | .q0-9 { fill:rgb(247,251,255); } 2 | .q1-9 { fill:rgb(222,235,247); } 3 | .q2-9 { fill:rgb(198,219,239); } 4 | .q3-9 { fill:rgb(158,202,225); } 5 | .q4-9 { fill:rgb(107,174,214); } 6 | .q5-9 { fill:rgb(66,146,198); } 7 | .q6-9 { fill:rgb(33,113,181); } 8 | .q7-9 { fill:rgb(8,81,156); } 9 | .q8-9 { fill:rgb(8,48,107); } 10 | 11 | .polygon:hover { 12 | fill-opacity: 0.5; 13 | } 14 | -------------------------------------------------------------------------------- /map_detail/choropleth/tw/twpopulation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | twpopulation example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /map_detail/choropleth/tw/twpopulation.js: -------------------------------------------------------------------------------- 1 | 2 | "use strict"; 3 | 4 | var React = require('react'); 5 | var ReactDOM = require('react-dom'); 6 | var topojson = require('topojson'); 7 | var MapChoropleth = require('react-d3-map-choropleth').MapChoropleth; 8 | 9 | var css= require('../css/twpopulation.css'); 10 | 11 | // Example 12 | (function() { 13 | var width = 700, 14 | height = 500; 15 | 16 | var topodata = require('json!../data/twTown1982.topo.json'); 17 | var population = require('json!../data/population.json')['102'] 18 | 19 | // data should be a MultiLineString 20 | var dataMeshCounties = topojson.mesh(topodata, topodata.objects["twTown1982.geo"], function(a, b) { return a !== b; }); 21 | /// data should be polygon 22 | var dataCounties = topojson.feature(topodata, topodata.objects["twTown1982.geo"]).features; 23 | 24 | dataCounties.forEach(function(d, i) { 25 | if(d.properties.TOWNID === "1605" || d.properties.TOWNID === "1603" || d.properties.TOWNID=== "1000128") { 26 | dataCounties.splice(i, 1); 27 | } 28 | }) 29 | 30 | var valArr = [] 31 | 32 | for (var key in population) { 33 | for (var reg in population[key]) { 34 | valArr.push({ 35 | "region": key.trim() + '/' + reg.trim(), 36 | "value": +population[key][reg] 37 | }); 38 | } 39 | } 40 | 41 | // domain 42 | var domain = { 43 | scale: 'quantize', 44 | domain: d3.extent(valArr, function(d) {return d.value;}), 45 | range: d3.range(11).map(function(i) { return "q" + i + "-11"; }) 46 | }; 47 | var domainValue = function(d) { return +d.value; }; 48 | var domainKey = function(d) {return d.region}; 49 | var mapKey = function(d) {return d.properties.name.trim()}; 50 | 51 | var scale = 7000; 52 | var center = [122, 23.5]; 53 | var projection = 'mercator'; 54 | 55 | var tooltipContent = function(d) { return d.properties;} 56 | 57 | ReactDOM.render( 58 | 76 | , document.getElementById('blank-twpopulation') 77 | ) 78 | 79 | })() 80 | -------------------------------------------------------------------------------- /map_detail/choropleth/us/unemployment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | choropleth example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /map_detail/choropleth/us/unemployment.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var topojson = require('topojson'); 6 | var MapChoropleth = require('react-d3-map-choropleth').MapChoropleth; 7 | 8 | var css= require('../css/unemployment.css'); 9 | 10 | // Example 11 | // http://bl.ocks.org/mbostock/4060606 12 | (function() { 13 | var width = 700, 14 | height = 500; 15 | 16 | var topodata = require('json!../data/us.json'); 17 | var unemploy = require('dsv?delimiter=\t!../data/unemployment.tsv') 18 | 19 | // data should be a MultiLineString 20 | var dataStates = topojson.mesh(topodata, topodata.objects.states, function(a, b) { return a !== b; }); 21 | /// data should be polygon 22 | var dataCounties = topojson.feature(topodata, topodata.objects.counties).features; 23 | 24 | // domain 25 | var domain = { 26 | scale: 'quantize', 27 | domain: [0, .15], 28 | range: d3.range(9).map(function(i) { return "q" + i + "-9"; }) 29 | }; 30 | var domainValue = function(d) { return +d.rate; }; 31 | var domainKey = function(d) {return +d.id}; 32 | var mapKey = function(d) {return +d.id}; 33 | 34 | var scale = 1000; 35 | var translate = [width / 2, height / 2]; 36 | var projection = 'albersUsa'; 37 | 38 | var tooltipContent = function(d) {return d.properties;} 39 | 40 | ReactDOM.render( 41 | 58 | , document.getElementById('blank-choropleth') 59 | ) 60 | 61 | })() 62 | -------------------------------------------------------------------------------- /map_detail/combine/style.css: -------------------------------------------------------------------------------- 1 | .polygon { 2 | fill-opacity: .5 3 | } 4 | 5 | .polygon_active { 6 | fill-opacity: 1 !important; 7 | fill: red !important; 8 | } 9 | 10 | #map { 11 | float: left; 12 | } 13 | 14 | #chart { 15 | float: left; 16 | } 17 | 18 | .polygon:hover { 19 | fill: blue !important; 20 | fill-opacity: .3 !important; 21 | } 22 | 23 | .axis.x text { 24 | transform: rotate(45deg) !important; 25 | } 26 | -------------------------------------------------------------------------------- /map_detail/combine/twhistorypopulation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | history twpopulation example 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /map_detail/interactive/css/polygon.css: -------------------------------------------------------------------------------- 1 | .polygon { 2 | stroke: red; 3 | stroke-width: 3; 4 | fill: none; 5 | pointer-events: all; 6 | } 7 | 8 | .mesh { 9 | stroke: red !important; 10 | stroke-width: 3 !important; 11 | pointer-events: all; 12 | } 13 | -------------------------------------------------------------------------------- /map_detail/interactive/line/line.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Line Example 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /map_detail/interactive/line/line.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | var topojson = require('topojson'); 4 | 5 | var Map = require('react-d3-map').Map; 6 | var LineGroup = require('react-d3-map').LineGroup; 7 | 8 | var css= require('../css/polygon.css'); 9 | 10 | // Example 11 | (function() { 12 | var width = 700; 13 | var height = 700; 14 | var scale = 1 << 22; 15 | var scaleExtent = [1 << 20, 1 << 24] 16 | var center = [-122.486052, 37.830348]; 17 | var popupContent = function(d) { return d.properties.text; } 18 | var data = { 19 | "type": "Feature", 20 | "properties": { 21 | "text": "this is a LineString" 22 | }, 23 | "geometry": { 24 | "type": "LineString", 25 | "coordinates": [ 26 | [-122.48369693756104, 37.83381888486939], 27 | [-122.48348236083984, 37.83317489144141], 28 | [-122.48339653015138, 37.83270036637107], 29 | [-122.48356819152832, 37.832056363179625], 30 | [-122.48404026031496, 37.83114119107971], 31 | [-122.48404026031496, 37.83049717427869], 32 | [-122.48348236083984, 37.829920943955045], 33 | [-122.48356819152832, 37.82954808664175], 34 | [-122.48507022857666, 37.82944639795659], 35 | [-122.48610019683838, 37.82880236636284], 36 | [-122.48695850372314, 37.82931081282506], 37 | [-122.48700141906738, 37.83080223556934], 38 | [-122.48751640319824, 37.83168351665737], 39 | [-122.48803138732912, 37.832158048267786], 40 | [-122.48888969421387, 37.83297152392784], 41 | [-122.48987674713133, 37.83263257682617], 42 | [-122.49043464660643, 37.832937629287755], 43 | [-122.49125003814696, 37.832429207817725], 44 | [-122.49163627624512, 37.832564787218985], 45 | [-122.49223709106445, 37.83337825839438], 46 | [-122.49378204345702, 37.83368330777276] 47 | ] 48 | } 49 | } 50 | 51 | var onLineMouseOut= function(dom , d, i) { 52 | console.log('out') 53 | } 54 | var onLineMouseOver= function(dom, d, i) { 55 | console.log('over') 56 | } 57 | var onLineClick= function(dom, d, i) { 58 | console.log('click') 59 | } 60 | var onLineCloseClick= function(id) { 61 | console.log('close click') 62 | } 63 | 64 | 65 | ReactDOM.render( 66 | 73 | 83 | 84 | , document.getElementById('blank-line') 85 | ) 86 | 87 | })() 88 | -------------------------------------------------------------------------------- /map_detail/interactive/marker/marker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Point Example 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /map_detail/interactive/marker/marker.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var topojson = require('topojson'); 6 | 7 | var Map = require('react-d3-map').Map; 8 | var MarkerGroup = require('react-d3-map').MarkerGroup; 9 | 10 | // var css= require('../css/polygon.css'); 11 | 12 | // Example 13 | (function() { 14 | var width = 700; 15 | var height = 700; 16 | var scale = 1200 * 5; 17 | var scaleExtent = [1 << 12, 1 << 13] 18 | var center = [-4, 55.4]; 19 | var uk = require('json!../data/uk.json'); 20 | var data = topojson.feature(uk, uk.objects.places); 21 | var popupContent = function(d) { return d.properties.name; } 22 | var onMarkerMouseOut= function(dom , d, i) { 23 | console.log('out') 24 | } 25 | var onMarkerMouseOver= function(dom, d, i) { 26 | console.log('over') 27 | } 28 | var onMarkerClick= function(dom, d, i) { 29 | console.log('click') 30 | } 31 | var onMarkerCloseClick= function(id) { 32 | console.log('close click') 33 | } 34 | 35 | 36 | ReactDOM.render( 37 | 44 | 54 | 55 | , document.getElementById('blank-point') 56 | ) 57 | 58 | })() 59 | -------------------------------------------------------------------------------- /map_detail/interactive/multipolygon/multipolygon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | multipolygon Example 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /map_detail/interactive/multipolygon/multipolygon.js: -------------------------------------------------------------------------------- 1 | 2 | "use strict"; 3 | 4 | var React = require('react'); 5 | var ReactDOM = require('react-dom'); 6 | var topojson = require('topojson'); 7 | 8 | var Map = require('react-d3-map').Map; 9 | var PolygonGroup = require('react-d3-map').PolygonGroup; 10 | 11 | var css= require('../css/polygon.css'); 12 | 13 | // Example 14 | (function() { 15 | var width = 700; 16 | var height = 700; 17 | var scale = 1 << 12; 18 | var scaleExtent = [1 << 10, 1 << 14] 19 | var center = [-100.95, 40.7]; 20 | var data = require('json!../data/states.json'); 21 | 22 | var onPolygonMouseOut= function(dom , d, i) { 23 | console.log('out') 24 | } 25 | var onPolygonMouseOver= function(dom, d, i) { 26 | console.log('over') 27 | } 28 | var onPolygonClick= function(dom, d, i) { 29 | console.log('click') 30 | } 31 | var onPolygonCloseClick= function(id) { 32 | console.log('close click') 33 | console.log(id) 34 | } 35 | var popupContent = function(d) { return 'hi, i am polygon'; } 36 | 37 | var Container = React.createClass({ 38 | render: function() { 39 | return ( 40 | 41 | 51 | 52 | ) 53 | } 54 | }) 55 | 56 | ReactDOM.render( 57 | 66 | 67 | 68 | , document.getElementById('blank-multipolygon') 69 | ) 70 | 71 | })() 72 | -------------------------------------------------------------------------------- /map_detail/interactive/simple/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Point Example 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /map_detail/interactive/simple/simple.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var topojson = require('topojson'); 6 | 7 | var Map = require('react-d3-map').Map; 8 | var MarkerGroup = require('react-d3-map').MarkerGroup; 9 | 10 | // Example 11 | (function() { 12 | var width = 700; 13 | var height = 700; 14 | var scale = 1200 * 5; 15 | var scaleExtent = [1 << 12, 1 << 13] 16 | var center = [122, 23.5]; 17 | var data = { 18 | "type": "Feature", 19 | "properties": { 20 | "text": "this is a Point!!!" 21 | }, 22 | "geometry": { 23 | "type": "Point", 24 | "coordinates": [122, 23.5] 25 | } 26 | } 27 | var popupContent = function(d) { return d.properties.text; } 28 | 29 | 30 | ReactDOM.render( 31 | 38 | 44 | 45 | , document.getElementById('blank-point') 46 | ) 47 | 48 | })() 49 | -------------------------------------------------------------------------------- /map_detail/orthographic/css/mesh.css: -------------------------------------------------------------------------------- 1 | .mesh { 2 | stroke: red !important; 3 | stroke-width: 3 !important; 4 | pointer-events: all; 5 | } 6 | -------------------------------------------------------------------------------- /map_detail/orthographic/css/polygon.css: -------------------------------------------------------------------------------- 1 | .my-polygon { 2 | stroke: red; 3 | stroke-width: 3; 4 | fill: blue !important; 5 | fill-opacity: .3; 6 | pointer-events: all; 7 | } 8 | -------------------------------------------------------------------------------- /map_detail/orthographic/line/line.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Line Example 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /map_detail/orthographic/line/line.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | var topojson = require('topojson'); 4 | 5 | var MapOrthographic = require('react-d3-map-orthographic').MapOrthographic; 6 | 7 | var LineGroup = require('react-d3-map').LineGroup; 8 | 9 | var css= require('../css/mesh.css'); 10 | 11 | // Example 12 | (function() { 13 | var width = 700; 14 | var height = 700; 15 | var scale = 1 << 22; 16 | var scaleExtent = [1 << 20, 1 << 24] 17 | var center = [-122.486052, 37.830348]; 18 | var popupContent = function(d) { return d.properties.text; } 19 | var data = { 20 | "type": "Feature", 21 | "properties": { 22 | "text": "this is a LineString" 23 | }, 24 | "geometry": { 25 | "type": "LineString", 26 | "coordinates": [ 27 | [-122.48369693756104, 37.83381888486939], 28 | [-122.48348236083984, 37.83317489144141], 29 | [-122.48339653015138, 37.83270036637107], 30 | [-122.48356819152832, 37.832056363179625], 31 | [-122.48404026031496, 37.83114119107971], 32 | [-122.48404026031496, 37.83049717427869], 33 | [-122.48348236083984, 37.829920943955045], 34 | [-122.48356819152832, 37.82954808664175], 35 | [-122.48507022857666, 37.82944639795659], 36 | [-122.48610019683838, 37.82880236636284], 37 | [-122.48695850372314, 37.82931081282506], 38 | [-122.48700141906738, 37.83080223556934], 39 | [-122.48751640319824, 37.83168351665737], 40 | [-122.48803138732912, 37.832158048267786], 41 | [-122.48888969421387, 37.83297152392784], 42 | [-122.48987674713133, 37.83263257682617], 43 | [-122.49043464660643, 37.832937629287755], 44 | [-122.49125003814696, 37.832429207817725], 45 | [-122.49163627624512, 37.832564787218985], 46 | [-122.49223709106445, 37.83337825839438], 47 | [-122.49378204345702, 37.83368330777276] 48 | ] 49 | } 50 | } 51 | 52 | var onLineMouseOut= function(dom , d, i) { 53 | console.log('out') 54 | } 55 | var onLineMouseOver= function(dom, d, i) { 56 | console.log('over') 57 | } 58 | var onLineClick= function(dom, d, i) { 59 | console.log('click') 60 | } 61 | var onLineCloseClick= function(id) { 62 | console.log('close click') 63 | } 64 | 65 | 66 | ReactDOM.render( 67 | 74 | 84 | 85 | , document.getElementById('blank-line') 86 | ) 87 | 88 | })() 89 | -------------------------------------------------------------------------------- /map_detail/orthographic/marker/marker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Point Example 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /map_detail/orthographic/marker/marker.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var topojson = require('topojson'); 6 | 7 | var MapOrthographic = require('react-d3-map-orthographic').MapOrthographic; 8 | var MarkerGroup = require('react-d3-map').MarkerGroup; 9 | 10 | var css= require('../css/polygon.css'); 11 | 12 | // Example 13 | (function() { 14 | var width = 700; 15 | var height = 700; 16 | var scale = 1200 * 5; 17 | var scaleExtent = [1 << 12, 1 << 13] 18 | var center = [-5, 55.4]; 19 | var uk = require('json!../data/uk.json'); 20 | var data = topojson.feature(uk, uk.objects.places); 21 | var popupContent = function(d) { return d.properties.name; } 22 | var onMarkerMouseOut= function(dom , d, i) { 23 | console.log('out') 24 | } 25 | var onMarkerMouseOver= function(dom, d, i) { 26 | console.log('over') 27 | } 28 | var onMarkerClick= function(dom, d, i) { 29 | console.log('click') 30 | } 31 | var onMarkerCloseClick= function(id) { 32 | console.log('close click') 33 | } 34 | 35 | 36 | ReactDOM.render( 37 | 44 | 54 | 55 | , document.getElementById('blank-point') 56 | ) 57 | 58 | })() 59 | -------------------------------------------------------------------------------- /map_detail/orthographic/multipolygon/multipolygon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | multipolygon Example 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /map_detail/orthographic/multipolygon/multipolygon.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var topojson = require('topojson'); 6 | 7 | var MapOrthographic = require('react-d3-map-orthographic').MapOrthographic; 8 | var PolygonGroup = require('react-d3-map').PolygonGroup; 9 | 10 | var css= require('../css/polygon.css'); 11 | 12 | // Example 13 | (function() { 14 | var width = 700; 15 | var height = 700; 16 | var scale = 1 << 12; 17 | var scaleExtent = [1 << 10, 1 << 14] 18 | var center = [-100.95, 40.7]; 19 | var data = require('json!../data/states.json'); 20 | 21 | var onPolygonMouseOut= function(dom , d, i) { 22 | console.log('out') 23 | } 24 | var onPolygonMouseOver= function(dom, d, i) { 25 | console.log('over') 26 | } 27 | var onPolygonClick= function(dom, d, i) { 28 | console.log('click') 29 | } 30 | var onPolygonCloseClick= function(id) { 31 | console.log('close click') 32 | console.log(id) 33 | } 34 | var popupContent = function(d) { return 'hi, i am polygon'; } 35 | 36 | var Container = React.createClass({ 37 | render: function() { 38 | return ( 39 | 40 | 50 | 51 | ) 52 | } 53 | }) 54 | 55 | ReactDOM.render( 56 | 65 | 66 | 67 | , document.getElementById('blank-multipolygon') 68 | ) 69 | 70 | })() 71 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "NODE_ENV=1 webpack" 9 | }, 10 | "author": "chilijung (http://lijung.com/)", 11 | "license": "MIT", 12 | "dependencies": { 13 | "d3": "^3.5.6", 14 | "react-d3-basic": "^1.4.1", 15 | "react-d3-brush": "^1.1.0", 16 | "react-d3-core": "^1.0.8", 17 | "react-d3-map": "^0.6.2", 18 | "react-d3-map-bubble": "^0.6.0", 19 | "react-d3-map-choropleth": "^0.5.1", 20 | "react-d3-map-core": "^0.13.3", 21 | "react-d3-map-orthographic": "^0.1.0", 22 | "react-d3-tooltip": "^1.2.0", 23 | "react-d3-zoom": "^1.1.2", 24 | "react-dom": "^0.14.3", 25 | "topojson": "^1.6.19" 26 | }, 27 | "peerDependencies": { 28 | "react": "^0.14.2" 29 | }, 30 | "devDependencies": { 31 | "babel-loader": "^5.3.2", 32 | "css-loader": "^0.19.0", 33 | "dsv-loader": "^1.0.0", 34 | "json-loader": "^0.5.3", 35 | "jsx-loader": "^0.13.2", 36 | "react": "^0.14.3", 37 | "react-hot-loader": "^1.3.0", 38 | "style-loader": "^0.12.4", 39 | "webpack": "^1.12.2", 40 | "webpack-dev-server": "^1.11.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /simple/area/area_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | area example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/area/area_garbage.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var d3 = require('d3'); 4 | var React = require('react'); 5 | var ReactDOM = require('react-dom'); 6 | var AreaChart = require('react-d3-basic').AreaChart; 7 | 8 | (function() { 9 | // load your general data 10 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 11 | 12 | // your date format, use for parsing 13 | var parseDate = d3.time.format("%YM%m").parse; 14 | 15 | var width = 700, 16 | height = 300, 17 | chartSeries = [ 18 | { 19 | field: 'incineration', 20 | name: 'Incineration', 21 | color: 'blue', 22 | style: { 23 | opacity: .2 24 | } 25 | } 26 | ], 27 | // your x accessor 28 | x = function(d) { 29 | return parseDate(d.month); 30 | }, 31 | xScale = 'time', 32 | yTickOrient = 'right'; 33 | 34 | ReactDOM.render( 35 | 44 | , document.getElementById('area-garbage') 45 | ) 46 | })() 47 | -------------------------------------------------------------------------------- /simple/area_stack/area_stack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | area stack example 4 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /simple/area_stack/area_stack.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var AreaStackChart = require('react-d3-basic').AreaStackChart; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/stack_test.csv') 9 | 10 | var parseDate = d3.time.format("%m/%d/%y").parse; 11 | 12 | var width = 700, 13 | height = 400, 14 | title = "Stack Area Chart", 15 | chartSeries = [ 16 | { 17 | field: "Group1", 18 | name: "Group 1" 19 | }, 20 | { 21 | field: "Group2", 22 | name: "Group 2" 23 | }, 24 | { 25 | field: "Group3", 26 | name: "Group 3" 27 | } 28 | ], 29 | x = function(d) { 30 | return parseDate(d.date); 31 | }, 32 | xScale = 'time'; 33 | 34 | ReactDOM.render( 35 | 43 | , document.getElementById('area-stack') 44 | ) 45 | })() 46 | -------------------------------------------------------------------------------- /simple/area_stack_brush/area_stack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | area stack example 4 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /simple/area_stack_brush/area_stack_brush.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var AreaStackBrush = require('react-d3-brush').AreaStackBrush; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/stack_test.csv') 9 | 10 | var parseDate = d3.time.format("%m/%d/%y").parse; 11 | 12 | var width = 700, 13 | height = 400, 14 | title = "Stack Area Chart", 15 | chartSeries = [ 16 | { 17 | field: "Group1", 18 | name: "Group 1" 19 | }, 20 | { 21 | field: "Group2", 22 | name: "Group 2" 23 | }, 24 | { 25 | field: "Group3", 26 | name: "Group 3" 27 | } 28 | ], 29 | x = function(d) { 30 | return parseDate(d.date); 31 | }, 32 | xScale = 'time', 33 | brushHeight = 100; 34 | 35 | ReactDOM.render( 36 | 46 | , document.getElementById('area-stack') 47 | ) 48 | })() 49 | -------------------------------------------------------------------------------- /simple/area_stack_tooltip/area_stack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | area stack example 4 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /simple/area_stack_tooltip/area_stack_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var AreaStackTooltip = require('react-d3-tooltip').AreaStackTooltip; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/stack_test.csv') 9 | 10 | var parseDate = d3.time.format("%m/%d/%y").parse; 11 | 12 | var width = 700, 13 | height = 400, 14 | title = 'Stack Area Chart', 15 | chartSeries = [ 16 | { 17 | field: "Group1", 18 | name: "Group 1" 19 | }, 20 | { 21 | field: "Group2", 22 | name: "Group 2" 23 | }, 24 | { 25 | field: "Group3", 26 | name: "Group 3" 27 | } 28 | ], 29 | x = function(d) { 30 | return parseDate(d.date); 31 | }, 32 | xScale = 'time'; 33 | 34 | ReactDOM.render( 35 | 44 | , document.getElementById('area-stack') 45 | ) 46 | })() 47 | -------------------------------------------------------------------------------- /simple/area_stack_zoom/area_stack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | area stack example 4 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /simple/area_stack_zoom/area_stack_zoom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var AreaStackZoom = require('react-d3-zoom').AreaStackZoom; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/stack_test.csv') 9 | 10 | var parseDate = d3.time.format("%m/%d/%y").parse; 11 | 12 | var width = 700, 13 | height = 400, 14 | title = "Stack Area Chart", 15 | chartSeries = [ 16 | { 17 | field: "Group1", 18 | name: "Group 1" 19 | }, 20 | { 21 | field: "Group2", 22 | name: "Group 2" 23 | }, 24 | { 25 | field: "Group3", 26 | name: "Group 3" 27 | } 28 | ], 29 | x = function(d) { 30 | return parseDate(d.date); 31 | }, 32 | xScale = 'time'; 33 | 34 | ReactDOM.render( 35 | 44 | , document.getElementById('area-stack') 45 | ) 46 | })() 47 | -------------------------------------------------------------------------------- /simple/bar/bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/bar/bar.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarChart = require('react-d3-basic').BarChart; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=\t!../data/letter.tsv') 9 | 10 | var width = 700, 11 | height = 400, 12 | title = "Bar Chart", 13 | chartSeries = [ 14 | { 15 | field: 'frequency', 16 | name: 'Frequency' 17 | } 18 | ], 19 | x = function(d) { 20 | return d.letter; 21 | }, 22 | xScale = 'ordinal', 23 | xLabel = "Letter", 24 | yLabel = "Frequency", 25 | yTicks = [10, "%"]; 26 | 27 | ReactDOM.render( 28 | 40 | , document.getElementById('data_bar') 41 | ) 42 | })() 43 | -------------------------------------------------------------------------------- /simple/bar_brush/bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/bar_brush/bar_brush.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarBrush = require('react-d3-brush').BarBrush; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=\t!../data/letter.tsv') 9 | 10 | var width = 700, 11 | height = 400, 12 | title = "Bar Chart", 13 | chartSeries = [ 14 | { 15 | field: 'frequency', 16 | name: 'Frequency' 17 | } 18 | ], 19 | x = function(d) { 20 | return d.letter; 21 | }, 22 | xScale = 'ordinal', 23 | yTicks = [10, "%"], 24 | // your brush height 25 | brushHeight = 100; 26 | 27 | ReactDOM.render( 28 | 38 | , document.getElementById('data_bar') 39 | ) 40 | })() 41 | -------------------------------------------------------------------------------- /simple/bar_group/bar_group.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar group example 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /simple/bar_group/bar_group.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarGroupChart = require('react-d3-basic').BarGroupChart; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/age.csv') 9 | 10 | var width = 700, 11 | height = 400, 12 | chartSeries = [ 13 | { 14 | field: 'Under 5 Years', 15 | name: 'Under 5 Years' 16 | }, 17 | { 18 | field: '5 to 13 Years', 19 | name: '5 to 13 Years' 20 | }, 21 | { 22 | field: '14 to 17 Years', 23 | name: '14 to 17 Years' 24 | }, 25 | { 26 | field: '18 to 24 Years', 27 | name: '18 to 24 Years' 28 | }, 29 | { 30 | field: '25 to 44 Years', 31 | name: '25 to 44 Years' 32 | }, 33 | { 34 | field: '45 to 64 Years', 35 | name: '45 to 64 Years' 36 | }, 37 | { 38 | field: '65 Years and Over', 39 | name: '65 Years and Over' 40 | }, 41 | 42 | ], 43 | x = function(d) { 44 | return d.State; 45 | }, 46 | xScale = 'ordinal', 47 | xLabel = "Age", 48 | yLabel = "Population", 49 | yLabelPosition = "right", 50 | yTickFormat = d3.format(".2s"); 51 | 52 | ReactDOM.render( 53 | 65 | , document.getElementById('data_bar_group') 66 | ) 67 | })() 68 | -------------------------------------------------------------------------------- /simple/bar_group_brush/bar_group_brush.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Brush Bar Group Example 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /simple/bar_group_brush/bar_group_brush.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarGroupBrush = require('react-d3-brush').BarGroupBrush; 6 | 7 | (function() { 8 | // loading data 9 | var generalChartData = require('dsv?delimiter=,!../data/age.csv') 10 | 11 | var width = 500, 12 | height = 300, 13 | title = "Bar Group Chart With Brush", 14 | // what fields you want to build in the chart 15 | // field is for the field in your csv field 16 | // name is for the name you want to show in your legend. 17 | chartSeries = [ 18 | { 19 | field: 'Under 5 Years', 20 | name: 'Under 5 Years' 21 | }, 22 | { 23 | field: '5 to 13 Years', 24 | name: '5 to 13 Years' 25 | }, 26 | { 27 | field: '14 to 17 Years', 28 | name: '14 to 17 Years' 29 | }, 30 | { 31 | field: '18 to 24 Years', 32 | name: '18 to 24 Years' 33 | }, 34 | { 35 | field: '25 to 44 Years', 36 | name: '25 to 44 Years' 37 | }, 38 | { 39 | field: '45 to 64 Years', 40 | name: '45 to 64 Years' 41 | }, 42 | { 43 | field: '65 Years and Over', 44 | name: '65 Years and Over' 45 | }, 46 | 47 | ], 48 | // x axis accessor 49 | x = function(d) { 50 | return d.State; 51 | }, 52 | xScale = 'ordinal', 53 | // y tick format 54 | yTickFormat = d3.format(".2s"), 55 | // your brush height 56 | brushHeight = 100; 57 | 58 | ReactDOM.render( 59 | 70 | , document.getElementById('data_brush_bar_group') 71 | ) 72 | })() 73 | -------------------------------------------------------------------------------- /simple/bar_group_tooltip/bar_group.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar group example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/bar_group_tooltip/bar_group_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarGroupTooltip = require('react-d3-tooltip').BarGroupTooltip; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/age.csv') 9 | 10 | var width = 700, 11 | height = 400, 12 | title = "Bar Group Chart with Tooltip", 13 | chartSeries = [ 14 | { 15 | field: 'Under 5 Years', 16 | name: 'Under 5 Years' 17 | }, 18 | { 19 | field: '5 to 13 Years', 20 | name: '5 to 13 Years' 21 | }, 22 | { 23 | field: '14 to 17 Years', 24 | name: '14 to 17 Years' 25 | }, 26 | { 27 | field: '18 to 24 Years', 28 | name: '18 to 24 Years' 29 | }, 30 | { 31 | field: '25 to 44 Years', 32 | name: '25 to 44 Years' 33 | }, 34 | { 35 | field: '45 to 64 Years', 36 | name: '45 to 64 Years' 37 | }, 38 | { 39 | field: '65 Years and Over', 40 | name: '65 Years and Over' 41 | }, 42 | 43 | ], 44 | x = function(d) { 45 | return d.State; 46 | }, 47 | xScale = 'ordinal', 48 | xLabel = "Age", 49 | yLabel = "Population", 50 | yTickFormat = d3.format(".2s"); 51 | 52 | ReactDOM.render( 53 | 65 | , document.getElementById('data_bar_group') 66 | ) 67 | })() 68 | -------------------------------------------------------------------------------- /simple/bar_group_zoom/bar_group.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar group example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/bar_group_zoom/bar_group_zoom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarGroupZoom = require('react-d3-zoom').BarGroupZoom; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/age.csv') 9 | 10 | var width = 700, 11 | height = 400, 12 | title = "Bar Group Chart", 13 | chartSeries = [ 14 | { 15 | field: 'Under 5 Years', 16 | name: 'Under 5 Years' 17 | }, 18 | { 19 | field: '5 to 13 Years', 20 | name: '5 to 13 Years' 21 | }, 22 | { 23 | field: '14 to 17 Years', 24 | name: '14 to 17 Years' 25 | }, 26 | { 27 | field: '18 to 24 Years', 28 | name: '18 to 24 Years' 29 | }, 30 | { 31 | field: '25 to 44 Years', 32 | name: '25 to 44 Years' 33 | }, 34 | { 35 | field: '45 to 64 Years', 36 | name: '45 to 64 Years' 37 | }, 38 | { 39 | field: '65 Years and Over', 40 | name: '65 Years and Over' 41 | }, 42 | 43 | ], 44 | x = function(d) { 45 | return d.State; 46 | }, 47 | xScale = 'ordinal', 48 | xLabel = "Age", 49 | yLabel = "Population", 50 | yTickFormat = d3.format(".2s"); 51 | 52 | ReactDOM.render( 53 | 65 | , document.getElementById('data_bar_group') 66 | ) 67 | })() 68 | -------------------------------------------------------------------------------- /simple/bar_stack/bar_stack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar stack example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/bar_stack/bar_stack.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarStackChart = require('react-d3-basic').BarStackChart; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/age.csv') 9 | 10 | var width = 700, 11 | height = 400, 12 | chartSeries = [ 13 | { 14 | field: 'Under 5 Years', 15 | name: 'Under 5 Years' 16 | }, 17 | { 18 | field: '5 to 13 Years', 19 | name: '5 to 13 Years' 20 | }, 21 | { 22 | field: '14 to 17 Years', 23 | name: '14 to 17 Years' 24 | }, 25 | { 26 | field: '18 to 24 Years', 27 | name: '18 to 24 Years' 28 | }, 29 | { 30 | field: '25 to 44 Years', 31 | name: '25 to 44 Years' 32 | }, 33 | { 34 | field: '45 to 64 Years', 35 | name: '45 to 64 Years' 36 | }, 37 | { 38 | field: '65 Years and Over', 39 | name: '65 Years and Over' 40 | }, 41 | 42 | ], 43 | x = function(d) { 44 | return d.State; 45 | }, 46 | xScale = 'ordinal', 47 | yTickFormat = d3.format(".2s"); 48 | 49 | ReactDOM.render( 50 | 59 | , document.getElementById('data_bar_stack') 60 | ) 61 | })() 62 | -------------------------------------------------------------------------------- /simple/bar_stack_brush/bar_stack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar stack example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/bar_stack_brush/bar_stack_brush.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarStackBrush = require('react-d3-brush').BarStackBrush; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/age.csv') 9 | 10 | var width = 700, 11 | height = 400, 12 | chartSeries = [ 13 | { 14 | field: 'Under 5 Years', 15 | name: 'Under 5 Years' 16 | }, 17 | { 18 | field: '5 to 13 Years', 19 | name: '5 to 13 Years' 20 | }, 21 | { 22 | field: '14 to 17 Years', 23 | name: '14 to 17 Years' 24 | }, 25 | { 26 | field: '18 to 24 Years', 27 | name: '18 to 24 Years' 28 | }, 29 | { 30 | field: '25 to 44 Years', 31 | name: '25 to 44 Years' 32 | }, 33 | { 34 | field: '45 to 64 Years', 35 | name: '45 to 64 Years' 36 | }, 37 | { 38 | field: '65 Years and Over', 39 | name: '65 Years and Over' 40 | }, 41 | 42 | ], 43 | x = function(d) { 44 | return d.State; 45 | }, 46 | xScale = 'ordinal', 47 | yTickFormat = d3.format(".2s"), 48 | brushHeight = 100; 49 | 50 | ReactDOM.render( 51 | 61 | , document.getElementById('data_bar_stack') 62 | ) 63 | })() 64 | -------------------------------------------------------------------------------- /simple/bar_stack_tooltip/bar_stack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar stack example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/bar_stack_tooltip/bar_stack_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarStackTooltip = require('react-d3-tooltip').BarStackTooltip; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/age.csv') 9 | 10 | var width = 700, 11 | height = 400, 12 | margins = {top: 50, right: 50, bottom: 50, left: 50}, 13 | title = "Bar Stack Chart", 14 | chartSeries = [ 15 | { 16 | field: 'Under 5 Years', 17 | name: 'Under 5 Years' 18 | }, 19 | { 20 | field: '5 to 13 Years', 21 | name: '5 to 13 Years' 22 | }, 23 | { 24 | field: '14 to 17 Years', 25 | name: '14 to 17 Years' 26 | }, 27 | { 28 | field: '18 to 24 Years', 29 | name: '18 to 24 Years' 30 | }, 31 | { 32 | field: '25 to 44 Years', 33 | name: '25 to 44 Years' 34 | }, 35 | { 36 | field: '45 to 64 Years', 37 | name: '45 to 64 Years' 38 | }, 39 | { 40 | field: '65 Years and Over', 41 | name: '65 Years and Over' 42 | }, 43 | 44 | ], 45 | x = function(d) { 46 | return d.State; 47 | }, 48 | xScale = 'ordinal', 49 | yTickFormat = d3.format(".2s"); 50 | 51 | ReactDOM.render( 52 | 62 | , document.getElementById('data_bar_stack') 63 | ) 64 | })() 65 | -------------------------------------------------------------------------------- /simple/bar_stack_zoom/bar_stack_zoom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bar Stack Zoom Example 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /simple/bar_stack_zoom/bar_stack_zoom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarStackZoom = require('react-d3-zoom').BarStackZoom; 6 | 7 | (function() { 8 | // loading data 9 | var generalChartData = require('dsv?delimiter=,!../data/age.csv') 10 | 11 | var width = 500, 12 | height = 400, 13 | title = "Bar Stack Chart With Zoom", 14 | // what fields you want to build in the chart 15 | // field is for the field in your csv field 16 | // name is for the name you want to show in your legend. 17 | chartSeries = [ 18 | { 19 | field: 'Under 5 Years', 20 | name: 'Under 5 Years' 21 | }, 22 | { 23 | field: '5 to 13 Years', 24 | name: '5 to 13 Years' 25 | }, 26 | { 27 | field: '14 to 17 Years', 28 | name: '14 to 17 Years' 29 | }, 30 | { 31 | field: '18 to 24 Years', 32 | name: '18 to 24 Years' 33 | }, 34 | { 35 | field: '25 to 44 Years', 36 | name: '25 to 44 Years' 37 | }, 38 | { 39 | field: '45 to 64 Years', 40 | name: '45 to 64 Years' 41 | }, 42 | { 43 | field: '65 Years and Over', 44 | name: '65 Years and Over' 45 | }, 46 | 47 | ], 48 | // x axis accessor 49 | x = function(d) { 50 | return d.State; 51 | }, 52 | xScale = 'ordinal', 53 | // y tick format 54 | yTickFormat = d3.format(".2s"); 55 | 56 | ReactDOM.render( 57 | 67 | , document.getElementById('data_zoom_bar_stack') 68 | ) 69 | })() 70 | -------------------------------------------------------------------------------- /simple/bar_tooltip/bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/bar_tooltip/bar_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarTooltip = require('react-d3-tooltip').BarTooltip; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=\t!../data/letter.tsv') 9 | 10 | var width = 700, 11 | height = 400, 12 | title = "Bar Chart with tooltip", 13 | chartSeries = [ 14 | { 15 | field: 'frequency', 16 | name: 'Frequency' 17 | } 18 | ], 19 | x = function(d) { 20 | return d.letter; 21 | }, 22 | xScale = 'ordinal', 23 | yTicks = [10, "%"]; 24 | 25 | ReactDOM.render( 26 | 36 | , document.getElementById('data_bar') 37 | ) 38 | })() 39 | -------------------------------------------------------------------------------- /simple/bar_zoom/bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | bar example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/bar_zoom/bar_zoom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var BarZoom = require('react-d3-zoom').BarZoom; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=\t!../data/letter.tsv') 9 | 10 | var width = 700, 11 | height = 400, 12 | title = "Bar Chart with zoom", 13 | chartSeries = [ 14 | { 15 | field: 'frequency', 16 | name: 'Frequency' 17 | } 18 | ], 19 | x = function(d) { 20 | return d.letter; 21 | }, 22 | xScale = 'ordinal', 23 | yTicks = [10, "%"]; 24 | 25 | ReactDOM.render( 26 | 36 | , document.getElementById('data_bar') 37 | ) 38 | })() 39 | -------------------------------------------------------------------------------- /simple/data/age.csv: -------------------------------------------------------------------------------- 1 | State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,65 Years and Over 2 | CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496 3 | TX,2027307,3277946,1420518,2454721,7017731,5656528,2472223 4 | NY,1208495,2141490,1058031,1999120,5355235,5120254,2607672 5 | FL,1140516,1938695,925060,1607297,4782119,4746856,3187797 6 | IL,894368,1558919,725973,1311479,3596343,3239173,1575308 7 | PA,737462,1345341,679201,1203944,3157759,3414001,1910571 8 | -------------------------------------------------------------------------------- /simple/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 | -------------------------------------------------------------------------------- /simple/data/pie_test.csv: -------------------------------------------------------------------------------- 1 | age,population 2 | <5,2704659 3 | 5-13,4499890 4 | 14-17,2159981 5 | 18-24,3853788 6 | 25-44,14106543 7 | 45-64,8819342 8 | ≥65,612463 9 | -------------------------------------------------------------------------------- /simple/data/stack_test.csv: -------------------------------------------------------------------------------- 1 | date,Group1,Group2,Group3 2 | 04/23/12,37,12,46 3 | 04/24/12,32,18,24 4 | 04/25/12,10,29,34 5 | 04/26/12,30,12,14 6 | -------------------------------------------------------------------------------- /simple/data/user_sample.json: -------------------------------------------------------------------------------- 1 | 2 | 3 | [ 4 | {"name":"Darron Weissnat IV","BMI":20.72,"age":39,"birthday":"2005-01-03T00:00:00.000Z","city":"East Russel","married":false,"index":0} 5 | , 6 | {"name":"Pablo Ondricka","BMI":19.32,"age":38,"birthday":"1974-05-13T00:00:00.000Z","city":"Lake Edytheville","married":false,"index":1} 7 | , 8 | {"name":"Mr. Stella Kiehn Jr.","BMI":16.8,"age":34,"birthday":"2003-07-25T00:00:00.000Z","city":"Lake Veronicaburgh","married":false,"index":2} 9 | , 10 | {"name":"Lavon Hilll I","BMI":20.57,"age":12,"birthday":"1994-10-26T00:00:00.000Z","city":"Annatown","married":true,"index":3} 11 | , 12 | {"name":"Clovis Pagac","BMI":24.28,"age":26,"birthday":"1995-11-10T00:00:00.000Z","city":"South Eldredtown","married":false,"index":4} 13 | , 14 | {"name":"Gaylord Paucek","BMI":24.41,"age":30,"birthday":"1975-06-12T00:00:00.000Z","city":"Koeppchester","married":true,"index":5} 15 | , 16 | {"name":"Ashlynn Kuhn MD","BMI":23.77,"age":32,"birthday":"1985-08-09T00:00:00.000Z","city":"West Josiemouth","married":false,"index":6} 17 | , 18 | {"name":"Fern Schmeler IV","BMI":27.33,"age":26,"birthday":"2005-02-10T00:00:00.000Z","city":"West Abigaleside","married":true,"index":7} 19 | , 20 | {"name":"Enid Weber","BMI":18.72,"age":17,"birthday":"1998-11-30T00:00:00.000Z","city":"Zackton","married":true,"index":8} 21 | , 22 | {"name":"Leatha O'Hara","BMI":17.68,"age":42,"birthday":"2010-10-17T00:00:00.000Z","city":"Lake Matilda","married":false,"index":9} 23 | , 24 | {"name":"Korbin Steuber","BMI":16.35,"age":39,"birthday":"1975-06-30T00:00:00.000Z","city":"East Armandofort","married":true,"index":10} 25 | , 26 | {"name":"Brennon Torphy","BMI":27.37,"age":24,"birthday":"2003-10-21T00:00:00.000Z","city":"Croninfort","married":true,"index":11} 27 | , 28 | {"name":"Ms. Genoveva Bradtke","BMI":28.63,"age":19,"birthday":"1983-01-10T00:00:00.000Z","city":"Port Emanuel","married":true,"index":12} 29 | , 30 | {"name":"Gregg Halvorson","BMI":15.45,"age":15,"birthday":"2004-06-15T00:00:00.000Z","city":"Lake Angelinastad","married":false,"index":13} 31 | , 32 | {"name":"Mr. Sabina Schroeder III","BMI":24.27,"age":26,"birthday":"1980-11-22T00:00:00.000Z","city":"Toyview","married":true,"index":14} 33 | , 34 | {"name":"Alanna Mitchell","BMI":29.25,"age":37,"birthday":"1971-08-04T00:00:00.000Z","city":"Lake Monserratmouth","married":false,"index":15} 35 | , 36 | {"name":"Ronny Sanford","BMI":29.16,"age":24,"birthday":"1994-11-24T00:00:00.000Z","city":"New Claudhaven","married":false,"index":16} 37 | , 38 | {"name":"Emmitt Pouros","BMI":27.95,"age":14,"birthday":"1989-04-04T00:00:00.000Z","city":"Moorefurt","married":true,"index":17} 39 | , 40 | {"name":"Earl Purdy","BMI":18.34,"age":38,"birthday":"2013-04-03T00:00:00.000Z","city":"Lake Rowanberg","married":true,"index":18} 41 | , 42 | {"name":"Cordelia Klocko","BMI":25.85,"age":36,"birthday":"2011-01-17T00:00:00.000Z","city":"Lakinchester","married":true,"index":19} 43 | , 44 | {"name":"Guido Conroy","BMI":25.17,"age":39,"birthday":"1977-04-20T00:00:00.000Z","city":"Scarlettland","married":true,"index":20} 45 | , 46 | {"name":"Miss Demond Weissnat V","BMI":21.44,"age":19,"birthday":"2007-06-09T00:00:00.000Z","city":"Savionberg","married":false,"index":21} 47 | , 48 | {"name":"Easton Mante","BMI":20.61,"age":43,"birthday":"2007-01-29T00:00:00.000Z","city":"Kutchberg","married":false,"index":22} 49 | , 50 | {"name":"Dayton Ebert","BMI":29.88,"age":20,"birthday":"1978-04-27T00:00:00.000Z","city":"West Wiley","married":true,"index":23} 51 | ] 52 | -------------------------------------------------------------------------------- /simple/donut/donut.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | donut example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/donut/donut.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var PieChart = require('react-d3-basic').PieChart; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/pie_test.csv') 9 | 10 | var width = 700, 11 | height = 400, 12 | value = function(d) { 13 | return +d.population; 14 | }, 15 | name = function(d) { 16 | return d.age; 17 | }, 18 | chartSeries = [ 19 | { 20 | "field": "<5", 21 | "name": "less than 5" 22 | }, 23 | { 24 | "field": "5-13", 25 | "name": "5 to 13" 26 | }, 27 | { 28 | "field": "14-17", 29 | "name": "14 to 17" 30 | }, 31 | { 32 | "field": "18-24", 33 | "name": "18 to 24" 34 | }, 35 | { 36 | "field": "25-44", 37 | "name": "25 to 44" 38 | }, 39 | { 40 | "field": "45-64", 41 | "name": "45 to 64" 42 | } 43 | ], 44 | innerRadius = 10; 45 | 46 | ReactDOM.render( 47 | 56 | , document.getElementById('data_donut') 57 | ) 58 | })() 59 | -------------------------------------------------------------------------------- /simple/line/line_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line example 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /simple/line/line_garbage.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var LineChart = require('react-d3-basic').LineChart; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | // your date format, use for parsing 11 | var parseDate = d3.time.format("%YM%m").parse; 12 | 13 | var width = 500, 14 | height = 300, 15 | margins = {left: 100, right: 100, top: 50, bottom: 50}, 16 | // chart series, 17 | // field: is what field your data want to be selected 18 | // name: the name of the field that display in legend 19 | // color: what color is the line 20 | chartSeries = [ 21 | { 22 | field: 'total', 23 | name: 'Total', 24 | color: '#ff7f0e' 25 | } 26 | ], 27 | // your x accessor 28 | x = function(d) { 29 | return parseDate(d.month); 30 | }, 31 | xScale = 'time'; 32 | 33 | 34 | ReactDOM.render( 35 | 44 | , document.getElementById('line-garbage') 45 | ) 46 | })() 47 | -------------------------------------------------------------------------------- /simple/line_brush/line_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line example 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /simple/line_brush/line_garbage_brush.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var LineBrush = require('react-d3-brush').LineBrush; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | // your date format, use for parsing 11 | var parseDate = d3.time.format("%YM%m").parse; 12 | 13 | var width = 700, 14 | height = 300, 15 | margins = {left: 100, right: 100, top: 50, bottom: 50}, 16 | // chart series, 17 | // field: is what field your data want to be selected 18 | // name: the name of the field that display in legend 19 | // color: what color is the line 20 | chartSeries = [ 21 | { 22 | field: 'total', 23 | name: 'Total', 24 | color: '#ff7f0e' 25 | } 26 | ], 27 | // your x accessor 28 | x = function(d) { 29 | return parseDate(d.month); 30 | }, 31 | xScale = 'time', 32 | // your brush height 33 | brushHeight = 100; 34 | 35 | ReactDOM.render( 36 | 46 | , document.getElementById('line-garbage') 47 | ) 48 | })() 49 | -------------------------------------------------------------------------------- /simple/line_multi/line_multi_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line multiple example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/line_multi/line_multi_garbage.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var d3 = require('d3'); 4 | var React = require('react'); 5 | var ReactDOM = require('react-dom'); 6 | var LineChart = require('react-d3-basic').LineChart; 7 | 8 | (function() { 9 | // load your general data 10 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 11 | 12 | // your date format, use for parsing 13 | var parseDate = d3.time.format("%YM%m").parse; 14 | 15 | var width = 700, 16 | height = 300, 17 | margins = {left: 100, right: 100, top: 50, bottom: 50}, 18 | // chart series, 19 | // field: is what field your data want to be selected 20 | // name: the name of the field that display in legend 21 | // color: what color is the line 22 | chartSeries = [ 23 | { 24 | field: 'total', 25 | name: 'Total' 26 | }, 27 | { 28 | field: 'incineration', 29 | name: 'Incineration' 30 | }, 31 | { 32 | field: 'garbageBury', 33 | name: 'Garbage Bury', 34 | area: true 35 | } 36 | ], 37 | // your x accessor 38 | x = function(d) { 39 | return parseDate(d.month); 40 | }, 41 | xScale = 'time'; 42 | 43 | ReactDOM.render( 44 | 54 | , document.getElementById('line-multi-garbage') 55 | ) 56 | })() 57 | -------------------------------------------------------------------------------- /simple/line_multi_brush/line_multi_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line multiple example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/line_multi_brush/line_multi_garbage_brush.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var LineBrush = require('react-d3-brush').LineBrush; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | 11 | // your date format, use for parsing 12 | var parseDate = d3.time.format("%YM%m").parse; 13 | 14 | var width = 700, 15 | height = 300, 16 | margins = {left: 100, right: 100, top: 50, bottom: 50}, 17 | title = "Taiwan refuse disposal - Multi line", 18 | // chart series, 19 | // field: is what field your data want to be selected 20 | // name: the name of the field that display in legend 21 | // color: what color is the line 22 | chartSeries = [ 23 | { 24 | field: 'total', 25 | name: 'Total' 26 | }, 27 | { 28 | field: 'incineration', 29 | name: 'Incineration' 30 | }, 31 | { 32 | field: 'garbageBury', 33 | name: 'Garbage Bury', 34 | area: true 35 | } 36 | ], 37 | // your x accessor 38 | x = function(d) { 39 | return parseDate(d.month); 40 | }, 41 | xScale = 'time', 42 | // your brush height 43 | brushHeight = 100; 44 | 45 | 46 | ReactDOM.render( 47 | 59 | , document.getElementById('line-multi-garbage') 60 | ) 61 | })() 62 | -------------------------------------------------------------------------------- /simple/line_multi_tooltip/line_multi_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line multiple example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/line_multi_tooltip/line_multi_garbage_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var LineTooltip = require('react-d3-tooltip').LineTooltip; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | 11 | // your date format, use for parsing 12 | var parseDate = d3.time.format("%YM%m").parse; 13 | 14 | var width = 700, 15 | height = 300, 16 | margins = {left: 100, right: 100, top: 50, bottom: 50}, 17 | title = "Taiwan refuse disposal - Multi line", 18 | // chart series, 19 | // field: is what field your data want to be selected 20 | // name: the name of the field that display in legend 21 | // color: what color is the line 22 | chartSeries = [ 23 | { 24 | field: 'total', 25 | name: 'Total' 26 | }, 27 | { 28 | field: 'incineration', 29 | name: 'Incineration' 30 | }, 31 | { 32 | field: 'garbageBury', 33 | name: 'Garbage Bury', 34 | area: true 35 | } 36 | ], 37 | // your x accessor 38 | x = function(d) { 39 | return parseDate(d.month); 40 | }, 41 | xScale = 'time'; 42 | 43 | ReactDOM.render( 44 | 54 | , document.getElementById('line-multi-garbage') 55 | ) 56 | })() 57 | -------------------------------------------------------------------------------- /simple/line_multi_zoom/line_multi_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line multiple example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/line_multi_zoom/line_multi_garbage_zoom.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var LineZoom = require('react-d3-zoom').LineZoom; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | 11 | // your date format, use for parsing 12 | var parseDate = d3.time.format("%YM%m").parse; 13 | 14 | var width = 700, 15 | height = 300, 16 | margins = {left: 100, right: 100, top: 50, bottom: 50}, 17 | title = "Taiwan refuse disposal - Multi line", 18 | // chart series, 19 | // field: is what field your data want to be selected 20 | // name: the name of the field that display in legend 21 | // color: what color is the line 22 | chartSeries = [ 23 | { 24 | field: 'total', 25 | name: 'Total' 26 | }, 27 | { 28 | field: 'incineration', 29 | name: 'Incineration' 30 | }, 31 | { 32 | field: 'garbageBury', 33 | name: 'Garbage Bury', 34 | area: true 35 | } 36 | ], 37 | // your x accessor 38 | x = function(d) { 39 | return parseDate(d.month); 40 | }, 41 | xScale = 'time'; 42 | 43 | ReactDOM.render( 44 | 54 | , document.getElementById('line-multi-garbage') 55 | ) 56 | })() 57 | -------------------------------------------------------------------------------- /simple/line_tooltip/line_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line tooltip example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/line_tooltip/line_garbage_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var LineTooltip = require('react-d3-tooltip').LineTooltip; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | // your date format, use for parsing 11 | var parseDate = d3.time.format("%YM%m").parse; 12 | 13 | var width = 700, 14 | height = 300, 15 | margins = {left: 100, right: 100, top: 50, bottom: 50}, 16 | title = "Taiwan refuse disposal", 17 | // chart series, 18 | // field: is what field your data want to be selected 19 | // name: the name of the field that display in legend 20 | // color: what color is the line 21 | chartSeries = [ 22 | { 23 | field: 'total', 24 | name: 'Total', 25 | color: '#ff7f0e' 26 | } 27 | ], 28 | // your x accessor 29 | x = function(d) { 30 | return parseDate(d.month); 31 | }, 32 | xScale = 'time'; 33 | 34 | ReactDOM.render( 35 | 45 | , document.getElementById('line-garbage') 46 | ) 47 | })() 48 | -------------------------------------------------------------------------------- /simple/line_user/line_user.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line example 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /simple/line_user/line_user.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var LineChart = require('react-d3-basic').LineChart; 6 | 7 | (function() { 8 | 9 | var chartData = require('json!../data/user_sample.json'); 10 | 11 | var chartSeries = [ 12 | { 13 | field: 'age', 14 | name: 'Age', 15 | color: '#ff7f0e', 16 | style: { 17 | "stroke-width": 2, 18 | "stroke-opacity": .2, 19 | "fill-opacity": .2 20 | } 21 | } 22 | ], 23 | x = function(d) { 24 | return d.index; 25 | } 26 | 27 | ReactDOM.render( 28 | 35 | , document.getElementById('line-user') 36 | ) 37 | })() 38 | -------------------------------------------------------------------------------- /simple/line_zoom/line_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | line tooltip example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/line_zoom/line_garbage_zoom.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var LineZoom = require('react-d3-zoom').LineZoom; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | // your date format, use for parsing 11 | var parseDate = d3.time.format("%YM%m").parse; 12 | 13 | var width = 700, 14 | height = 300, 15 | margins = {left: 100, right: 100, top: 50, bottom: 50}, 16 | title = "Taiwan refuse disposal", 17 | // chart series, 18 | // field: is what field your data want to be selected 19 | // name: the name of the field that display in legend 20 | // color: what color is the line 21 | chartSeries = [ 22 | { 23 | field: 'total', 24 | name: 'Total', 25 | color: '#ff7f0e' 26 | } 27 | ], 28 | // your x accessor 29 | x = function(d) { 30 | return parseDate(d.month); 31 | }, 32 | xScale = 'time'; 33 | 34 | ReactDOM.render( 35 | 45 | , document.getElementById('line-garbage') 46 | ) 47 | })() 48 | -------------------------------------------------------------------------------- /simple/pie/pie.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | pie example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/pie/pie.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var PieChart = require('react-d3-basic').PieChart; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/pie_test.csv') 9 | 10 | var width = 700, 11 | height = 400, 12 | value = function(d) { 13 | return +d.population; 14 | }, 15 | name = function(d) { 16 | return d.age; 17 | }, 18 | chartSeries = [ 19 | { 20 | "field": "<5", 21 | "name": "less than 5" 22 | }, 23 | { 24 | "field": "5-13", 25 | "name": "5 to 13" 26 | }, 27 | { 28 | "field": "14-17", 29 | "name": "14 to 17" 30 | }, 31 | { 32 | "field": "18-24", 33 | "name": "18 to 24" 34 | }, 35 | { 36 | "field": "25-44", 37 | "name": "25 to 44" 38 | }, 39 | { 40 | "field": "45-64", 41 | "name": "45 to 64" 42 | } 43 | ]; 44 | 45 | ReactDOM.render( 46 | 54 | , document.getElementById('data_pie') 55 | ) 56 | })() 57 | -------------------------------------------------------------------------------- /simple/pie_tooltip/pie_tooltip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Pie Tooltip example 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /simple/pie_tooltip/pie_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var PieTooltip = require('react-d3-tooltip').PieTooltip; 6 | 7 | (function() { 8 | var generalChartData = require('dsv?delimiter=,!../data/pie_test.csv') 9 | 10 | var width = 500, 11 | height = 300, 12 | title = "Pie Chart With Tooltip", 13 | // value accessor 14 | value = function(d) { 15 | return +d.population; 16 | }, 17 | // name accessor 18 | name = function(d) { 19 | return d.age; 20 | }, 21 | // field means what your input field name is, 22 | // name means the name show in the legend in your chart. 23 | chartSeries = [ 24 | { 25 | "field": "<5", 26 | "name": "less than 5" 27 | }, 28 | { 29 | "field": "5-13", 30 | "name": "5 to 13" 31 | }, 32 | { 33 | "field": "14-17", 34 | "name": "14 to 17" 35 | }, 36 | { 37 | "field": "18-24", 38 | "name": "18 to 24" 39 | }, 40 | { 41 | "field": "25-44", 42 | "name": "25 to 44" 43 | }, 44 | { 45 | "field": "45-64", 46 | "name": "45 to 64" 47 | } 48 | ]; 49 | 50 | 51 | ReactDOM.render( 52 | 61 | , document.getElementById('data_tooltip_pie') 62 | ) 63 | })() 64 | -------------------------------------------------------------------------------- /simple/scatter/scatter_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | scatter example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/scatter/scatter_garbage.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var ScatterPlot = require('react-d3-basic').ScatterPlot; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | 11 | // your date format, use for parsing 12 | var parseDate = d3.time.format("%YM%m").parse; 13 | 14 | var width = 700, 15 | height = 300, 16 | margins = {left: 100, right: 100, top: 50, bottom: 50}, 17 | // chart series, 18 | // field: is what field your data want to be selected 19 | // name: the name of the field that display in legend 20 | // color: what color is the line 21 | chartSeries = [ 22 | { 23 | field: 'total', 24 | name: 'Total', 25 | symbol: 'diamond', 26 | symbolSize: 6 27 | }, 28 | { 29 | field: 'incineration', 30 | name: 'Incineration', 31 | symbol: 'cross', 32 | symbolSize: 6 33 | }, 34 | { 35 | field: 'garbageBury', 36 | name: 'Garbage Bury', 37 | symbol: 'triangle-down', 38 | symbolSize: 6 39 | } 40 | ], 41 | // your x accessor 42 | x = function(d) { 43 | return parseDate(d.month); 44 | }, 45 | xScale = 'time'; 46 | 47 | ReactDOM.render( 48 | 57 | , document.getElementById('scatter-garbage') 58 | ) 59 | })() 60 | -------------------------------------------------------------------------------- /simple/scatter_brush/scatter_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | scatter tooltip example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/scatter_brush/scatter_garbage_brush.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var ScatterBrush = require('react-d3-brush').ScatterBrush; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | 11 | // your date format, use for parsing 12 | var parseDate = d3.time.format("%YM%m").parse; 13 | 14 | var width = 700, 15 | height = 300, 16 | margins = {top: 50, right: 100, bottom: 50, left: 100}, 17 | title = "Taiwan refuse disposal - Multi line", 18 | // chart series, 19 | // field: is what field your data want to be selected 20 | // name: the name of the field that display in legend 21 | // color: what color is the line 22 | chartSeries = [ 23 | { 24 | field: 'total', 25 | name: 'Total', 26 | symbol: 'diamond', 27 | symbolSize: 6 28 | }, 29 | { 30 | field: 'incineration', 31 | name: 'Incineration', 32 | symbol: 'cross', 33 | symbolSize: 6 34 | }, 35 | { 36 | field: 'garbageBury', 37 | name: 'Garbage Bury', 38 | symbol: 'triangle-down', 39 | symbolSize: 6 40 | } 41 | ], 42 | // your x accessor 43 | x = function(d) { 44 | return parseDate(d.month); 45 | }, 46 | xScale = 'time', 47 | // your brush height 48 | brushHeight = 100; 49 | 50 | ReactDOM.render( 51 | 62 | , document.getElementById('scatter-garbage') 63 | ) 64 | })() 65 | -------------------------------------------------------------------------------- /simple/scatter_tooltip/scatter_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | scatter tooltip example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/scatter_tooltip/scatter_garbage_tooltip.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var ScatterTooltip = require('react-d3-tooltip').ScatterTooltip; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | 11 | // your date format, use for parsing 12 | var parseDate = d3.time.format("%YM%m").parse; 13 | 14 | var width = 700, 15 | height = 300, 16 | margins = {top: 50, right: 100, bottom: 50, left: 100}, 17 | title = "Taiwan refuse disposal - Multi line", 18 | // chart series, 19 | // field: is what field your data want to be selected 20 | // name: the name of the field that display in legend 21 | // color: what color is the line 22 | chartSeries = [ 23 | { 24 | field: 'total', 25 | name: 'Total', 26 | symbol: 'diamond', 27 | symbolSize: 6 28 | }, 29 | { 30 | field: 'incineration', 31 | name: 'Incineration', 32 | symbol: 'cross', 33 | symbolSize: 6 34 | }, 35 | { 36 | field: 'garbageBury', 37 | name: 'Garbage Bury', 38 | symbol: 'triangle-down', 39 | symbolSize: 6 40 | } 41 | ], 42 | // your x accessor 43 | x = function(d) { 44 | return parseDate(d.month); 45 | }, 46 | xScale = 'time'; 47 | 48 | ReactDOM.render( 49 | 59 | , document.getElementById('scatter-garbage') 60 | ) 61 | })() 62 | -------------------------------------------------------------------------------- /simple/scatter_zoom/scatter_garbage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | scatter zoom example 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /simple/scatter_zoom/scatter_garbage_zoom.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var ScatterZoom = require('react-d3-zoom').ScatterZoom; 6 | 7 | (function() { 8 | // load your general data 9 | var chartData = require('dsv?delimiter=,!../data/garbage.csv'); 10 | 11 | // your date format, use for parsing 12 | var parseDate = d3.time.format("%YM%m").parse; 13 | 14 | var width = 700, 15 | height = 300, 16 | margins = {top: 50, right: 100, bottom: 50, left: 100}, 17 | title = "Taiwan refuse disposal - Multi line", 18 | // chart series, 19 | // field: is what field your data want to be selected 20 | // name: the name of the field that display in legend 21 | // color: what color is the line 22 | chartSeries = [ 23 | { 24 | field: 'total', 25 | name: 'Total', 26 | symbol: 'diamond', 27 | symbolSize: 6 28 | }, 29 | { 30 | field: 'incineration', 31 | name: 'Incineration', 32 | symbol: 'cross', 33 | symbolSize: 6 34 | }, 35 | { 36 | field: 'garbageBury', 37 | name: 'Garbage Bury', 38 | symbol: 'triangle-down', 39 | symbolSize: 6 40 | } 41 | ], 42 | // your x accessor 43 | x = function(d) { 44 | return parseDate(d.month); 45 | }, 46 | xScale = 'time'; 47 | 48 | ReactDOM.render( 49 | 59 | , document.getElementById('scatter-garbage') 60 | ) 61 | })() 62 | -------------------------------------------------------------------------------- /webpack.map.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'), 4 | webpack = require('webpack'), 5 | nodeModulesPath = path.join(__dirname, 'node_modules'); 6 | 7 | var js_root_detail = './map_detail/'; 8 | var js_detail_dist = path.join(__dirname, './dist/map_detail/origin'); 9 | var js_detail_dist_min = path.join(__dirname, './dist/map_detail/min'); 10 | 11 | // 0 stands for development, 1 stands for production 12 | // for development mode: NODE_ENV=0 webpack 13 | // for production mode: NODE_ENV=1 webpack 14 | var ENV = !!(+process.env.NODE_ENV || 0); 15 | 16 | module.exports = [{ 17 | name: 'details', 18 | entry: { 19 | earthquake: js_root_detail + 'bubble/earthquake/earthquake.js', 20 | mapbubble: js_root_detail + 'bubble/mapbubble/mapbubble.js', 21 | twpopulation: js_root_detail + 'choropleth/tw/twpopulation.js', 22 | unemployment: js_root_detail + 'choropleth/us/unemployment.js', 23 | historytwpopulation: js_root_detail + 'combine/twhistorypopulation.js', 24 | interactive_line: js_root_detail + 'interactive/line/line.js', 25 | interactive_marker: js_root_detail + 'interactive/marker/marker.js', 26 | interactive_polygon: js_root_detail + 'interactive/multipolygon/multipolygon.js', 27 | simple: js_root_detail + 'interactive/simple/simple.js', 28 | ortho_line: js_root_detail + 'orthographic/line/line.js', 29 | ortho_marker: js_root_detail + 'orthographic/marker/marker.js', 30 | ortho_polygon: js_root_detail + 'orthographic/multipolygon/multipolygon.js' 31 | }, 32 | 33 | output: { 34 | path: ENV ? js_detail_dist_min : js_detail_dist, 35 | filename: ENV ? '[name].min.js': '[name].js' 36 | }, 37 | 38 | module: { 39 | loaders: [ 40 | { 41 | test: [/\.jsx$/, /\.js$/], 42 | include: /detail/, 43 | loaders: ["jsx-loader"], 44 | }, 45 | { 46 | test: /\.css$/, 47 | loader: 'style-loader!css-loader' 48 | } 49 | ], 50 | }, 51 | 52 | resolve: { 53 | extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx'] 54 | }, 55 | 56 | plugins: ENV ? [ 57 | new webpack.optimize.UglifyJsPlugin({ 58 | sourceMap: false, 59 | mangle: false 60 | }), 61 | new webpack.ProvidePlugin({ 62 | 'd3': 'd3' 63 | }) 64 | ]: [ 65 | new webpack.ProvidePlugin({ 66 | 'd3': 'd3' 67 | }) 68 | ] 69 | }]; 70 | --------------------------------------------------------------------------------