react-d3-core
Advanced tools
react d3 core components for reusability.
react-d3-core is includes the core components of the react-d3 projects. The reason we extract the main component here, is because of reusability. For instance, we use grid, axes over and over again in line chart, area chart, bar chart ... etc. If we move these system a little bit forward to a react component we can declare it more easily in the future.
Such as we need xaxis, yaxis, grid in a new chart. We can install react-d3-core and import them.
npm install react-d3-core
"use strict";
var React = require('react');
var ReactDOM = require('react-dom');
var Legend = require('../../lib/index').Legend;
(function() {
var chartSeries = [
{
field: 'Under 5 Years'
},
{
field: '5 to 13 Years'
}
]
ReactDOM.render(
<div>
<svg width= {960} height= {500}>
<rect height= {"100%"} width= {"100%"} fill= {"#CCC"} />
</svg>
<Legend
width= {960}
chartSeries = {chartSeries}
/>
</div>
, document.getElementById('blank-legend')
)
})()
Clone code react-d3-core.js or minify js react-d3-core.min.js and include the script in your HTML.
You'll also need react, react-dom, d3
<!DOCTYPE html>
<html>
<head>
<title>
Line Chart example
</title>
</head>
<body>
<div id="blank-legend"></div>
<script src="https://fb.me/react-0.14.2.js"></script>
<script src="https://fb.me/react-dom-0.14.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="../react-d3-core.min.js"></script>
<script type="text/babel">
var Legend = ReactD3Core.Legend;
var chartSeries = [
{
field: 'Under 5 Years'
},
{
field: '5 to 13 Years'
}
]
ReactDOM.render(
<div>
<svg width= {960} height= {500}>
<rect height= {"100%"} width= {"100%"} fill= {"#CCC"} />
</svg>
<Legend
width= {960}
chartSeries = {chartSeries}
/>
</div>
, document.getElementById('blank-legend')
)
</script>
</body>
</html>
$ npm install
$ node devServer.js
Open localhost:5000/example
Apache 2.0
FAQs
react-d3 chart core component
We found that react-d3-core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security Fundamentals
The Socket Threat Research Team uncovers how threat actors weaponize shell techniques across npm, PyPI, and Go ecosystems to maintain persistence and exfiltrate data.
Security News
At VulnCon 2025, NIST scrapped its NVD consortium plans, admitted it can't keep up with CVEs, and outlined automation efforts amid a mounting backlog.
Product
We redesigned our GitHub PR comments to deliver clear, actionable security insights without adding noise to your workflow.