Gathering detailed insights and metrics for react-d3-brush
Gathering detailed insights and metrics for react-d3-brush
Installations
npm install react-d3-brushReleases
Unable to fetch releases
Developer
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
Typescript Support
No
Node Version
4.1.1
NPM Version
2.14.4
Statistics
12 Stars
58 Commits
12 Forks
8 Watching
1 Branches
5 Contributors
Updated on 26 Jul 2024
Languages
JavaScript (84.25%)
HTML (14.3%)
Handlebars (1.45%)
Total Downloads
Cumulative downloads
Total Downloads
19,453
Last day
0%
1
Compared to previous day
Last week
57.1%
11
Compared to previous week
Last month
8.3%
26
Compared to previous month
Last year
-23.8%
560
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
4
Peer Dependencies
1
Versions
react-d3-brush
react-d3 brush implementation.
Quick example
With Webpack build tool
- Line Chart
1"use strict"; 2 3var React = require('react'); 4var ReactDOM = require('react-dom'); 5var LineBrush = require('react-d3-brush').LineBrush; 6 7(function() { 8 9 var generalChartData = require('json!./data/user.json'); 10 11 var chartSeries = [ 12 { 13 field: 'age', 14 name: 'Age', 15 color: '#ff7f0e' 16 } 17 ], 18 x = function(d) { 19 return d.index; 20 }; 21 22 ReactDOM.render( 23 <LineBrush 24 width= {600} 25 height= {400} 26 brushHeight= {100} 27 data= {generalChartData} 28 chartSeries= {chartSeries} 29 x= {x} 30 xLabel= {"test"} 31 /> 32 , document.getElementById('data_brush_line') 33 ) 34})() 35
In HTML (without build tools)
Clone code react-d3-brush.js or minify js react-d3-brush.min.js and include the script in your HTML.
You'll also need react, react-dom, d3
- Line Chart
1<!DOCTYPE html> 2<html> 3 <head> 4 <title> 5 Line Chart example 6 </title> 7 </head> 8 <body> 9 <div id="data_line"></div> 10 <script src="https://fb.me/react-0.14.2.js"></script> 11 <script src="https://fb.me/react-dom-0.14.2.js"></script> 12 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 13 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> 14 <script src="../react-d3-brush.min.js"></script> 15 <script type="text/babel"> 16 var LineBrush = ReactD3Brush.LineBrush; 17 var data = [ 18 { 19 "age": 39, 20 "index": 0 21 }, 22 { 23 "age": 38, 24 "index": 1 25 }, 26 { 27 "age": 34, 28 "index": 2 29 }, 30 { 31 "age": 12, 32 "index": 3 33 } 34 ]; 35 36 var chartSeries = [ 37 { 38 field: 'age', 39 name: 'Age', 40 color: '#ff7f0e', 41 style: { 42 "stroke-width": 2, 43 "stroke-opacity": .2, 44 "fill-opacity": .2 45 } 46 } 47 ], 48 x = function(d) { 49 return d.index; 50 } 51 52 ReactDOM.render( 53 <LineBrush width= {600} height= {500} brushHeight={100} data= {data} chartSeries= {chartSeries} x= {x} /> 54 , document.getElementById('data_line') 55 ) 56 </script> 57 </body> 58</html>
Install
npm install --save react-d3-brush
Support Brush Component
- Line Chart: export as
LineBrush - Area Stack Chart: export as
AreaStackBrush - Scatter Plot: export as
ScatterBrush - Bar Chart: export as
BarBrush - Bar Stack: export as
BarStackBrush - Bar Group: export as
BarGroupBrush
License
Apache 2.0
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Score
2.6
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More