Socket
Socket
Sign inDemoInstall

d3

Package Overview
Dependencies
37
Maintainers
2
Versions
273
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

d3

Data-Driven Documents


Version published
Maintainers
2
Weekly downloads
2,613,733
decreased by-8.28%

Weekly downloads

Package description

What is d3?

D3.js (or just D3 for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It helps in manipulating documents based on data and uses HTML, SVG, and CSS to bring data to life. D3's emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework.

What are d3's main functionalities?

Data Binding

D3 allows you to bind data to the DOM (Document Object Model), and then apply data-driven transformations to the document. In this code sample, we select paragraph elements and bind them to an array of numbers, setting their text content to the bound data.

const data = [1, 2, 3, 4];
const p = d3.select('body').selectAll('p').data(data).text(d => d);

Creating and Manipulating SVG

D3 can create and manipulate SVG elements for complex visualizations. This code sample creates an SVG element and appends a blue circle to it.

const svg = d3.select('body').append('svg').attr('width', 100).attr('height', 100);
svg.append('circle').attr('cx', 50).attr('cy', 50).attr('r', 40).style('fill', 'blue');

Dynamic Properties and Transitions

D3 makes it easy to apply dynamic styles and transitions to elements. Here, all circles in the document are transitioned to a red fill color over 750 milliseconds.

d3.selectAll('circle').transition().duration(750).style('fill', 'red');

Data-Driven Document Transformations

D3 can load external data sources like CSV files and use them to drive document transformations. In this example, data from a CSV file is used to create and append paragraph elements to the body of the document.

d3.csv('data.csv').then(data => {
  d3.select('body').selectAll('p').data(data).enter().append('p').text(d => d.value);
});

Interactivity and Event Handling

D3 provides powerful event handling for interactive visualizations. This code sample adds a click event listener to all paragraph elements, changing their background color to yellow when clicked.

d3.select('body').selectAll('p').on('click', function(event, d) {
  d3.select(this).style('background-color', 'yellow');
});

Other packages similar to d3

Readme

Source

D3: Data-Driven Documents

D3 (or D3.js) is a free, open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics. For more than a decade D3 has powered groundbreaking and award-winning visualizations, become a foundational building block of higher-level chart libraries, and fostered a vibrant community of data practitioners around the world.

Resources

Keywords

FAQs

Last updated on 12 Mar 2024

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with โšก๏ธ by Socket Inc