{"id":13421937,"url":"https://github.com/codesuki/react-d3-components","last_synced_at":"2025-05-14T21:05:15.555Z","repository":{"id":26926249,"uuid":"30388469","full_name":"codesuki/react-d3-components","owner":"codesuki","description":"D3 Components for React","archived":false,"fork":false,"pushed_at":"2022-01-11T11:39:52.000Z","size":3192,"stargazers_count":1625,"open_issues_count":62,"forks_count":204,"subscribers_count":45,"default_branch":"master","last_synced_at":"2025-04-13T17:46:52.084Z","etag":null,"topics":["area-chart","chart","chart-component","charting-library","charts","d3","graph","javascript","pie-chart","react","waveform"],"latest_commit_sha":null,"homepage":"http://codesuki.github.io/react-d3-components/example.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codesuki.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-06T01:28:27.000Z","updated_at":"2025-04-05T07:57:47.000Z","dependencies_parsed_at":"2022-08-07T12:01:18.982Z","dependency_job_id":null,"html_url":"https://github.com/codesuki/react-d3-components","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesuki%2Freact-d3-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesuki%2Freact-d3-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesuki%2Freact-d3-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesuki%2Freact-d3-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codesuki","download_url":"https://codeload.github.com/codesuki/react-d3-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254209848,"owners_count":22032897,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["area-chart","chart","chart-component","charting-library","charts","d3","graph","javascript","pie-chart","react","waveform"],"created_at":"2024-07-30T23:00:34.186Z","updated_at":"2025-05-14T21:05:15.508Z","avatar_url":"https://github.com/codesuki.png","language":"JavaScript","readme":"# Looking for maintainers. If you are interested in maintaining this library please open an issue.\n\n# react-d3-components\n\n\u003e D3 Components for React\n\nLet React have complete control over the DOM even when using D3. This way we can benefit from Reacts Virtual DOM.\n\n![charts](http://codesuki.github.io/react-d3-components/charts.png)\n\n## Table of Contents\n* [Installation](#installation)\n* [Development](#development)\n* [Description](#description)\n* [Documentation](#documentation)\n* [Features](#features)\n* [Todo](#todo)\n* [Changelog](#changelog)\n* [Examples](#examples)\n  * [Bar Chart](#barchart)\n  * [Brush](#brush)\n  * [Tooltips](#tooltips)\n  * [Axis parameters](#axis-parameters)\n  * [Custom accessors](#custom-accessors)\n  * [Customization](#overriding-default-parameters)\n  * [Stacked Bar Chart](#stackedbarchart)\n  * [Grouped Bar Chart](#groupedbarchart)\n  * [Scatter, Line and Area Charts](#other-charts)\n  * [Pie Chart](#piechart)\n  * [Waveform](#waveform)\n\n## Installation\n```\nnpm install react-d3-components\n```\n\n## Development\nIn order to compile the code, from the repository folder, type in your terminal\n```\nnpm install \u0026 npm run build:js\n```\nThis will install the dependencies required and run the build:js. At the end of the process the compiled .js and min.js will be available in the dist folder.\nExamples are available in the folder example.\nFrom the root folder type\n```\npython -m SimpleHTTPServer 8000\n```\nto start a webserver, and navigate to http://localhost:8000/example in order to visualize the new example page.\nNote that the example page directly points to the dist folder.\n\n\n## Description\nIdeally the library should be usable with minimum configuration. Just put the data in and see the charts.\nI try to provide sensible defaults, but since for most use-cases we need to customize D3's parameters they will be made accessible to the user. Most Charts will turn into their stacked variant when given an array as input.\n\nIf you like the project please consider starring and a pull request. I am open for any additions.\n\n## Documentation\nDocumentation is in the [Wiki](https://github.com/codesuki/react-d3-components/wiki).\nFor quick testing the [examples](#examples) might be enough.\n\n## Features\n* Brushes\n* Tooltips\n* Custom accessors to support any data format\n* Negative axes\n* CSS classes to allow styling\n* Bar Chart\n* Stacked Bar Chart\n* Scatter Plot\n* Line Chart\n* Area Chart\n* Stacked Area Chart\n* Pie Plot\n\n## Todo\n* More Charts\n* Animations\n* Legend\n* Documentation\n* Tests\n\n## Changelog\n* 0.6.6: Fix ticks rendering over bar chart\n* 0.6.5:\n    * Add tickDirection property to Axis\n    * Add hideLabels property to PieChart\n    * Add yOrientation property to AreaChart\n    * Fix Line Chart rendering\n* 0.6.4: Fixed react dependency version (was 0.15.0 instead of 15.0.0)\n* 0.6.3: Changed react dependency version to \u003e=0.14.0 to allow react 0.15.\n* 0.6.2: Fixed build system. Added colorByLabel property to BarChart.\n* 0.6.1: Fixed 'BarChart.getDOMNode(...) is deprecated.'\n* 0.6.0: Added [Waveform Chart](#waveform). Moved to React 0.14.\n* 0.5.2: Fixed default scale for dates\n* 0.5.1: Fixed new props not being used by DefaultScalesMixin\n* 0.5.0:\n    * Improved tooltip. (see example below)\n        * Tooltip now has different modes.\n        * AreaChart tooltip now contains x-value argument.\n    * Support for grouped bar charts. (see example below)\n    * Support to include child elements inside charts.\n    * Several bug fixes including recent pull requests.\n        * React is now a peer dependency\n* 0.4.8: Fixed bug were graphs don't resize correctly.\n* 0.4.7: Moved to React 0.13.1\n* 0.4.6:\n    * Added sort property to PieChart, same usage as d3.Pie.sort().\n    * Added support for strokeWidth, strokeDasharray, strokeLinecap to LineChart, can be string or function.\n    * Small bug fixes.\n* 0.4.5: Fixed tooltip not showing when mouse is over tooltip symbol. Tooltip will soon be revamped to allow custom components.\n* 0.4.4: Fixed tooltip position inside relative layout containers. Moved to webpack.\n* 0.4.3: Fixed tooltip not showing in Safari.\n* 0.4.2: Improved LineChart tooltip to show d3.svg.symbol() on nearest data point. Can be customized with shape and shapeColor props. LineChart toolip callback is callback(label, value) now where the format of value depends on your data format, default is {x: x, y: y}.\n* 0.4.1: Fixed compatibility issues with Safari and possible other browsers not supporting Number.isFinite().\n* 0.4.0: Added X-Axis Brush. Functioning but might change to improve ease of usage etc. Fixed Axis tickFormat not being set correctly.\n* 0.3.6: Fixed not correctly requiring D3.\n* 0.3.5: Fixed npm packaging.\n* 0.3.4: Charts now render correctly when included in another component. Line chart default axes now meet at 0.\n* 0.3.0: Added tooltips and made axis properties accessible.\n* 0.2.2: Fixed accessors not being used everywhere\n* 0.2.1: Excluded external libraries from build and make it usable as a browser include\n* 0.2.0: Custom accessors, stacked charts, default scales\n\n## Examples\nCheck out example/index.html found [here](http://codesuki.github.io/react-d3-components/example.html).\n\n### BarChart\n```javascript\nvar BarChart = ReactD3.BarChart;\n\nvar data = [{\n    label: 'somethingA',\n    values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}]\n}];\n\nReact.render(\n    \u003cBarChart\n        data={data}\n        width={400}\n        height={400}\n        margin={{top: 10, bottom: 50, left: 50, right: 10}}/\u003e,\n    document.getElementById('location')\n);\n```\n\n![barchart](http://codesuki.github.io/react-d3-components/barchart.png)\n\n### Brush\nWith Brushes we can build interactive Graphs. My personal use-case is to select date ranges as shown below and in the example.\nThe Brush feature is still incomplete, for now only offering a x-Axis Brush but y-Axis will follow soon as well as refactoring.\nFor now the Brush is rendered in its own SVG, this allows flexible use but might change in the future, or become optional.\nAlso there is no Brush support for the built-in default Scales.\n```css\n.brush .extent {\n  stroke: #000;\n  fill-opacity: .125;\n  shape-rendering: crispEdges;\n}\n\n.brush .background {\n  fill: #ddd;\n}\n```\n```javascript\n    var LineChart = ReactD3.LineChart;\n    var Brush = ReactD3.Brush;\n\nvar SomeComponent = React.createClass({\n    getInitialState: function() {\n        return {\n            data: {label: '', values: [\n                {x: new Date(2015, 2, 5), y: 1},\n                {x: new Date(2015, 2, 6), y: 2},\n                {x: new Date(2015, 2, 7), y: 0},\n                {x: new Date(2015, 2, 8), y: 3},\n                {x: new Date(2015, 2, 9), y: 2},\n                {x: new Date(2015, 2, 10), y: 3},\n                {x: new Date(2015, 2, 11), y: 4},\n                {x: new Date(2015, 2, 12), y: 4},\n                {x: new Date(2015, 2, 13), y: 1},\n                {x: new Date(2015, 2, 14), y: 5},\n                {x: new Date(2015, 2, 15), y: 0},\n                {x: new Date(2015, 2, 16), y: 1},\n                {x: new Date(2015, 2, 16), y: 1},\n                {x: new Date(2015, 2, 18), y: 4},\n                {x: new Date(2015, 2, 19), y: 4},\n                {x: new Date(2015, 2, 20), y: 5},\n                {x: new Date(2015, 2, 21), y: 5},\n                {x: new Date(2015, 2, 22), y: 5},\n                {x: new Date(2015, 2, 23), y: 1},\n                {x: new Date(2015, 2, 24), y: 0},\n                {x: new Date(2015, 2, 25), y: 1},\n                {x: new Date(2015, 2, 26), y: 1}\n            ]},\n            xScale: d3.time.scale().domain([new Date(2015, 2, 5), new Date(2015, 2, 26)]).range([0, 400 - 70]),\n            xScaleBrush: d3.time.scale().domain([new Date(2015, 2, 5), new Date(2015, 2, 26)]).range([0, 400 - 70])\n        };\n    },\n\n    render: function() {\n        return (\n                \u003cdiv\u003e\n                \u003cLineChart\n                   data={this.state.data}\n                   width={400}\n                   height={400}\n                   margin={{top: 10, bottom: 50, left: 50, right: 20}}\n                   xScale={this.state.xScale}\n                   xAxis={{tickValues: this.state.xScale.ticks(d3.time.day, 2), tickFormat: d3.time.format(\"%m/%d\")}}\n                /\u003e\n                \u003cdiv className=\"brush\" style={{float: 'none'}}\u003e\n                \u003cBrush\n                   width={400}\n                   height={50}\n                   margin={{top: 0, bottom: 30, left: 50, right: 20}}\n                   xScale={this.state.xScaleBrush}\n                   extent={[new Date(2015, 2, 10), new Date(2015, 2, 12)]}\n                   onChange={this._onChange}\n                   xAxis={{tickValues: this.state.xScaleBrush.ticks(d3.time.day, 2), tickFormat: d3.time.format(\"%m/%d\")}}\n                /\u003e\n                \u003c/div\u003e\n                \u003c/div\u003e\n        );\n    },\n\n    _onChange: function(extent) {\n        this.setState({xScale: d3.time.scale().domain([extent[0], extent[1]]).range([0, 400 - 70])});\n    }\n});\n```\n![brush](http://codesuki.github.io/react-d3-components/brush.png)\n\n### Tooltips\nYou can provide a callback to every chart that will return html for the tooltip.\nDepending on the type of chart the callback will receive different parameters that are useful.\n\n* Bar Chart: label is the first parameter. y0, y of the hovered bar and the total bar height in case of a stacked bar chart.\n* Scatter Plot: x, y of the hovered point.\n* Pie Chart: label is the first parameter. y of the hovered wedge.\n* Area Chart: closest y value to the cursor of the area under the mouse and the cumulative y value in case of a stacked area chart. x value is the third parameter. label is the fourth parameter.\n\nExample Scatter Plot:\n```javascript\nvar tooltipScatter = function(x, y) {\n    return \"x: \" + x + \" y: \" + y;\n};\n\nReact.render(\u003cScatterPlot\n                data={data}\n                width={400}\n                height={400}\n                margin={{top: 10, bottom: 50, left: 50, right: 10}}\n                tooltipHtml={tooltipScatter}\n                xAxis={{label: \"x-label\"}}\n                yAxis={{label: \"y-label\"}}/\u003e,\n            document.getElementById('scatterplot')\n);\n```\n\nTooltip positioning is influenced by `tooltipOffset` `tooltipContained` and `tooltipMode`, which has 3 options `mouse`, `fixed`, `element`.\n\n* `mouse` is the default behavior and just follows the mouse\n* `fixed` uses `tooltipOffset` as an offset from the top left corner of the svg\n* `element` puts the tooltip on top of data points for line/area/scatter charts and on top of bars for the barchart\n\n`tooltipOffset` is an object with `top` and `left` keys i.e. `{top: 10, left: 10}`\n\nIf `tooltipContained` is true the tooltip will try to stay inside the svg by using `css-transform`.\n\n![tooltip](http://codesuki.github.io/react-d3-components/tooltip.png)\n\n### Axis parameters\nAll D3 axis parameters can optionally be provided to the chart. For detailed explanation please check the documentation.\n```javascript\n\nReact.render(\u003cLineChart\n                    data={data}\n                    width={400}\n                    height={400}\n                    margin={{top: 10, bottom: 50, left: 50, right: 10}}\n                    tooltipHtml={tooltipLine}\n\n                    xAxis={{innerTickSize: 10, label: \"x-label\"}}\n                    yAxis={{label: \"y-label\"}}/\u003e,\n            document.getElementById('linechart'));\n```\n\nThe following are the default values.\n```javascript\n{\ntickArguments: [10],\ntickValues: null,\ntickFormat: x =\u003e { return x; },\ninnerTickSize: 6,\ntickPadding: 3,\nouterTickSize: 6,\nclassName: \"axis\",\nzero: 0,\nlabel: \"\"\n}\n```\n\n### Custom Accessors\n```javascript\ndata = [{\n    customLabel: 'somethingA',\n    customValues: [[0, 3], [1.3, -4], [3, 7], [-3.5, 8], [4, 7], [4.5, 7],  [5, -7.8]]\n}];\n\nvar labelAccessor = function(stack) { return stack.customLabel; };\nvar valuesAccessor = function(stack) { return stack.customValues; };\nvar xAccessor = function(element) { return element[0]; };\nvar yAccessor = function(element) { return element[1]; };\n\nReact.render(\u003cScatterPlot\n                data={data}\n                width={400}\n                height={400}\n                margin={{top: 10, bottom: 50, left: 50, right: 10}}\n\n                label={labelAccessor}\n                x={xAccessor}\n                y={yAccessor}\n                values={valuesAccessor}/\u003e,\n            document.getElementById('location'));\n```\n\n### Overriding default parameters\nAll Charts provide defaults for scales, colors, etc...\nIf you want to use your own scale just pass it to the charts constructor.\n\nThe scales are normal D3 objects, their documentation can be found [here](https://github.com/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md) and [here](https://github.com/d3/d3-3.x-api-reference/blob/master/Quantitative-Scales.md).\n\nThere are more parameters like barPadding, strokeWidth, fill, opacity, etc. please check the documentation for details.\n\n```javascript\nvar xScale = d3.scale.ordinal(); //... + set it up appropriately\nvar yScale = d3.scale.linear();\nvar colorScale = d3.scale.category20();\n\n\u003cBarChart xScale={xScale}\n      yScale={yScale}\n      colorScale={colorScale}\n      barPadding={0.3}\n      data={data}\n      width={400}\n      height={400}\n      margin={{top: 10, bottom: 50, left: 50, right: 10}}/\u003e\n```\n\n#### LineChart stroke style\nYou can customize the line style of LineCharts with CSS or if you want to have more control over how each line in your dataset gets rendered you can use the stroke property of LineChart as follows. Note that you do not have to set all the properties in the object.\n\n```javascript\n    var dashFunc = function(label) {\n        if (label == \"somethingA\") {\n            return \"4 4 4\";\n        }\n        if (label == \"somethingB\") {\n            return \"3 4 3\";\n        }\n    }\n\n    var widthFunc = function(label) {\n        if (label == \"somethingA\") {\n            return \"4\";\n        }\n        if (label == \"somethingB\") {\n            return \"2\";\n        }\n    }\n\n    var linecapFunc = function(label) {\n        if (label == \"somethingA\") {\n            return \"round\";\n        }\n    }\n\n    React.render(\u003cLineChart\n                    data={data}\n                    width={400}\n                    height={400}\n                    margin={{top: 10, bottom: 50, left: 50, right: 10}}\n                    tooltipHtml={tooltipLine}\n                    xAxis={{innerTickSize: 6, label: \"x-label\"}}\n                    yAxis={{label: \"y-label\"}}\n                    shapeColor={\"red\"}\n                    stroke={{strokeDasharray: dashFunc, strokeWidth: widthFunc, strokeLinecap: linecapFunc}}\n                    /\u003e,\n    document.getElementById('linechart')\n    );\n```\n![strokestyle](http://codesuki.github.io/react-d3-components/strokestyle.png)\n\n### StackedBarChart\n```javascript\nvar BarChart = ReactD3.BarChart;\n\ndata = [\n    {\n    label: 'somethingA',\n    values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}]\n    },\n    {\n    label: 'somethingB',\n    values: [{x: 'SomethingA', y: 6}, {x: 'SomethingB', y: 8}, {x: 'SomethingC', y: 5}]\n    },\n    {\n    label: 'somethingC',\n    values: [{x: 'SomethingA', y: 6}, {x: 'SomethingB', y: 8}, {x: 'SomethingC', y: 5}]\n    }\n];\n\nReact.render(\u003cBarChart\n                data={data}\n                width={400}\n                height={400}\n                margin={{top: 10, bottom: 50, left: 50, right: 10}}/\u003e,\n            document.getElementById('location'));\n```\n\n![stackedbarchart](http://codesuki.github.io/react-d3-components/stackedbarchart.png)\n\n### Grouped Bar Chart\n```javascript\nvar BarChart = ReactD3.BarChart;\n\ndata = [\n    {\n    label: 'somethingA',\n    values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}]\n    },\n    {\n    label: 'somethingB',\n    values: [{x: 'SomethingA', y: 6}, {x: 'SomethingB', y: 8}, {x: 'SomethingC', y: 5}]\n    },\n    {\n    label: 'somethingC',\n    values: [{x: 'SomethingA', y: 6}, {x: 'SomethingB', y: 8}, {x: 'SomethingC', y: 5}]\n    }\n];\n\nReact.render(\u003cBarChart\n                groupedBars\n                data={data}\n                width={400}\n                height={400}\n                margin={{top: 10, bottom: 50, left: 50, right: 10}}/\u003e,\n            document.getElementById('location'));\n```\n\n![groupedbarchart](http://codesuki.github.io/react-d3-components/groupedbarchart.png)\n\n### Other Charts\n```javascript\nvar ScatterPlot = ReactD3.ScatterPlot;\nvar LineChart = ReactD3.LineChart;\nvar AreaChart = ReactD3.AreaChart;\n\ndata = [\n    {\n    label: 'somethingA',\n    values: [{x: 0, y: 2}, {x: 1.3, y: 5}, {x: 3, y: 6}, {x: 3.5, y: 6.5}, {x: 4, y: 6}, {x: 4.5, y: 6}, {x: 5, y: 7}, {x: 5.5, y: 8}]\n    },\n    {\n    label: 'somethingB',\n    values: [{x: 0, y: 3}, {x: 1.3, y: 4}, {x: 3, y: 7}, {x: 3.5, y: 8}, {x: 4, y: 7}, {x: 4.5, y: 7}, {x: 5, y: 7.8}, {x: 5.5, y: 9}]\n    }\n];\n\nReact.render(\u003cScatterPlot\n                data={data}\n                width={400}\n                height={400}\n                margin={{top: 10, bottom: 50, left: 50, right: 10}}/\u003e,\n            document.getElementById('location'));\n\nReact.render(\u003cLineChart\n                data={data}\n                width={400}\n                height={400}\n                margin={{top: 10, bottom: 50, left: 50, right: 10}}/\u003e,\n            document.getElementById('location')\n);\n\nReact.render(\u003cAreaChart\n                data={data}\n                width={400}\n                height={400}\n                yOrientation='right' // if you do not provide right default left orientation for yAxis will be used\n                margin={{top: 10, bottom: 50, left: 50, right: 10}}/\u003e,\n            document.getElementById('location')\n);\n```\n\n![scatterplot](http://codesuki.github.io/react-d3-components/scatterplot.png)\n\n![linechart](http://codesuki.github.io/react-d3-components/linechart.png)\n\n![areachart](http://codesuki.github.io/react-d3-components/areachart.png)\n\n### PieChart\nBy default d3 sorts the PieChart but you can use the sort property to pass a custom comparator or null to disable sorting.\n\n```javascript\nvar PieChart = ReactD3.PieChart;\n\nvar data = {\n        label: 'somethingA',\n        values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}]\n};\n\nvar sort = null; // d3.ascending, d3.descending, func(a,b) { return a - b; }, etc...\n\nReact.render(\u003cPieChart\n                data={data}\n                width={600}\n                height={400}\n                margin={{top: 10, bottom: 10, left: 100, right: 100}}\n                sort={sort}\n                /\u003e,\n            document.getElementById('location')\n);\n```\n\n![piechart](http://codesuki.github.io/react-d3-components/piechart.png)\n\n### Waveform\nThe waveform chart displays a sequence of values as if they were part of an audio waveform.\nThe values are centered on the horizontal axis and reflected along the horizontal origin.\nFor now only values in the range [0,1] are supported.\n\nThe graph can accept a colorScale parameter, that is an array of values in the range [0,width], where width is the width of the graph.\nFollowing an example of gradient from white to black for a waveform of width 200.\n\n```javascript\ncolorScale={ d3.scale.linear()\n                    .domain([0,200])\n                    .range(['#fff','#000'])}\n```\nThe graph is responsive and adopts a viewBox strategy to resize the graph maintaining its proportions.\nWe also adopt subSampling in order to maintain the graph rapresentation of the waveform.\nAs it is now each bar needs to have a minimum width of 1px, as well as 1px space between to adjacent bars.\nIn order to allow this, we subsample the input data in order to have exactly a maximum of width/2 elements.\n\nIt is therefore a good strategy to select the width of the graph to be twice the length of the dataset. The viewBox responsiveness will then resize the graph to the width of the container.\nIf the samples are less than half of the space available we just display them with a width \u003e1px. Space between bars is increased in width as well.\n\n![waveform](http://codesuki.github.io/react-d3-components/waveform.png)\n\n\n\n## Credits\nThis library uses parts of [D3.js](https://github.com/mbostock/d3).\n","funding_links":[],"categories":["UI Components","Uncategorized","JavaScript","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","Charts"],"sub_categories":["Chart","Uncategorized","Data Visualization"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodesuki%2Freact-d3-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodesuki%2Freact-d3-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodesuki%2Freact-d3-components/lists"}