Security News
Crates.io Implements Trusted Publishing Support
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
By Sarah Gooding - Jul 16, 2025
You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
react-d3-core
Advanced tools
react-d3-core
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.
Install
npm install react-d3-core
LIVE DEMO
Quick example
With webpack
- Legend
"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')
)
})()
In HTML (without build tools)
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
- Legend
<!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>
Supported Components
Container
Axis
Grid
Label
Legend
Develop
$ npm install
$ node devServer.js
Open localhost:5000/example
History
Before v1.1.x ...
- Initial release
- Babel 5
- D3 3.0
2016 / 3 / 3, v1.2.0
- Move to Babel 6.
- D3 4.0.
- improve example folder.
License
Apache 2.0
FAQs
react-d3 chart core component
The npm package react-d3-core receives a total of 237 weekly downloads. As such, react-d3-core popularity was classified as not popular.
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.
Package last updated on 15 Jul 2016
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.
Related posts
Research
/Security News
Tracking Protestware Spread: 28 npm Packages Affected by Payload Targeting Russian-Language Users
Undocumented protestware found in 28 npm packages disrupts UI for Russian-language users visiting Russian and Belarusian domains.
By Olivia Brown - Jul 15, 2025
Research
/Security News
Contagious Interview Campaign Escalates With 67 Malicious npm Packages and New Malware Loader
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.
By Kirill Boychenko - Jul 14, 2025