Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@deck.gl/react
Advanced tools
@deck.gl/react is a library that provides React bindings for deck.gl, a powerful WebGL-powered framework for visual exploratory data analysis of large datasets. It allows you to create highly performant and visually appealing data visualizations in a React application.
Rendering Layers
This code demonstrates how to render a ScatterplotLayer using @deck.gl/react. It sets up a DeckGL component with an initial view state and a ScatterplotLayer that visualizes data points on a map.
import React from 'react';
import DeckGL, { ScatterplotLayer } from '@deck.gl/react';
const data = [
{ position: [-122.45, 37.78], size: 100 },
{ position: [-122.46, 37.79], size: 200 }
];
const App = () => (
<DeckGL
initialViewState={{
longitude: -122.45,
latitude: 37.78,
zoom: 12
}}
controller={true}
layers={[
new ScatterplotLayer({
id: 'scatterplot-layer',
data,
getPosition: d => d.position,
getRadius: d => d.size,
getColor: [255, 0, 0]
})
]}
/>
);
export default App;
Interactivity
This code demonstrates how to add interactivity to a ScatterplotLayer using @deck.gl/react. The onClick function is triggered when a data point is clicked, displaying an alert with the position of the clicked point.
import React from 'react';
import DeckGL, { ScatterplotLayer } from '@deck.gl/react';
const data = [
{ position: [-122.45, 37.78], size: 100 },
{ position: [-122.46, 37.79], size: 200 }
];
const App = () => {
const onClick = info => {
if (info.object) {
alert(`Clicked on: ${info.object.position}`);
}
};
return (
<DeckGL
initialViewState={{
longitude: -122.45,
latitude: 37.78,
zoom: 12
}}
controller={true}
layers={[
new ScatterplotLayer({
id: 'scatterplot-layer',
data,
getPosition: d => d.position,
getRadius: d => d.size,
getColor: [255, 0, 0],
pickable: true,
onClick
})
]}
/>
);
};
export default App;
Custom Layers
This code demonstrates how to create a custom layer by extending the CompositeLayer class in @deck.gl/react. The CustomLayer class renders a ScatterplotLayer with custom properties.
import React from 'react';
import DeckGL, { CompositeLayer } from '@deck.gl/react';
class CustomLayer extends CompositeLayer {
renderLayers() {
return [
new ScatterplotLayer(this.getSubLayerProps({
id: 'scatterplot',
data: this.props.data,
getPosition: d => d.position,
getRadius: d => d.size,
getColor: [0, 0, 255]
}))
];
}
}
const data = [
{ position: [-122.45, 37.78], size: 100 },
{ position: [-122.46, 37.79], size: 200 }
];
const App = () => (
<DeckGL
initialViewState={{
longitude: -122.45,
latitude: 37.78,
zoom: 12
}}
controller={true}
layers={[
new CustomLayer({
id: 'custom-layer',
data
})
]}
/>
);
export default App;
react-map-gl is a React wrapper for Mapbox GL JS, providing a set of React components for integrating Mapbox maps into React applications. It offers similar functionalities for rendering and interacting with map layers, but is more focused on Mapbox's ecosystem and less on data visualization compared to @deck.gl/react.
react-leaflet is a React wrapper for Leaflet, a popular open-source JavaScript library for interactive maps. It provides a set of React components for rendering Leaflet maps and layers. While it offers robust mapping capabilities, it is not as optimized for large-scale data visualization as @deck.gl/react.
[6.3.0-alpha.1] - Oct 25 2018
FAQs
React Components for deck.gl
The npm package @deck.gl/react receives a total of 157,740 weekly downloads. As such, @deck.gl/react popularity was classified as popular.
We found that @deck.gl/react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 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 News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.