Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
d3plus-react
Advanced tools
React components for d3plus visualizations.
Using npm: npm install d3plus-react
A valid d3plus config
Object needs to be provided to the config
prop of every visualization.
import {Treemap} from "d3plus-react";
const methods = {
groupBy: "id",
data: [
{id: "alpha", value: 29},
{id: "beta", value: 10}
],
size: d => d.value
};
<Treemap config={methods} />
Additionally, a global set of styles can be set using the D3plusContext
Provider. This allows you to set base styles on all of your visualizations in one place, often in an external file. A component's config
set by props will override global defaults key-by-key using a deep cloning function.
import React from "react";
import ReactDOM from "react-dom/client";
import {D3plusContext} from "d3plus-react";
import App from "src/App.jsx";
const globalConfig = {
shapeConfig: {
fill: "red"
}
};
ReactDOM.createRoot(document.getElementById("viz")).render(
<React.StrictMode>
<D3plusContext.Provider value={globalConfig}>
<App />
</D3plusContext.Provider>
</React.StrictMode>
);
In order to detect whether a component should udpate in React, each component does a rudimentary check between the current config
object and the incoming new config
object. This is done via a simple equality check on the stringified versions of each object. This can also be overridded using the forceUpdate
prop:
const shouldUpdate = this.props.forceUpdate ? false : JSON.stringify(oldConfig) === JSON.stringify(newConfig);
This works in most cases, but may not update your visualizations if using an accessor function that references an external variable. For example, if your x
accessor is:
const config = {
...,
x: d => d[xVar]
};
...and xVar
changes, the visualization will not update. The quick "hack" for this is add xVar
to the config object so that it triggers the update via stringify:
const config = {
...,
x: d => d[xVar],
xVar
};
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
A React context instance used to provide global config options via a provider (D3plusContext.Provider).
This is a global function.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
This is a global function, and extends all of the methods and functionality of Viz
.
Creates SVG paths and coordinate points based on an array of data. See this example for help getting started using the geomap generator.
This is a global function.
This is a static property of Viz
.
Param | Type | Default | Description |
---|---|---|---|
[config] | Object | {} | An object containing method/value pairs to be passed to the visualization's .config( ) method. |
[dataFormat] | function | d3plus.dataFold | A custom formatting function to be used when formatting data from an AJAX request. The function will be passed the raw data returned from the request, and is expected to return an array of values used for the data method. |
[linksFormat] | function | d3plus.links(path, formatter) | A custom formatting function to be used when formatting links from an AJAX request. The function will be passed the raw data returned from the request, and is expected to return an array of values used for the links method. |
[nodesFormat] | function | d3plus.nodes(path, formatter) | A custom formatting function to be used when formatting nodes from an AJAX request. The function will be passed the raw data returned from the request, and is expected to return an array of values used for the nodes method. |
[topojsonFormat] | function | d3plus.topojson(path, formatter) | A custom formatting function to be used when formatting topojson from an AJAX request. The function will be passed the raw data returned from the request, and is expected to return an array of values used for the topojson method. |
FAQs
React components for d3plus visualizations.
The npm package d3plus-react receives a total of 365 weekly downloads. As such, d3plus-react popularity was classified as not popular.
We found that d3plus-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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 News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.