Package description
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.
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');
});Chart.js is a simple yet flexible JavaScript charting library. It provides a variety of chart types and is easy to use, but it is less customizable and has fewer features for complex visualizations compared to D3.
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts is more focused on charting and less on arbitrary graphics or complex data-driven transformations than D3.
C3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. It simplifies the process of creating charts by providing a layer of abstraction over D3, but it is less flexible for creating highly customized visualizations.
Vega is a visualization grammar, a declarative language for creating, saving, and sharing interactive visualization designs. It can be seen as a higher-level visualization tool that abstracts away much of the complexity of D3, but with less direct control over the final output.
Readme
D3 is a small, free JavaScript library for manipulating HTML documents based on data. D3 can help you quickly visualize your data as HTML or SVG, handle interactivity, and incorporate smooth transitions and staged animations into your pages. You can use D3 as a visualization framework (like Protovis), or you can use it to build dynamic pages (like jQuery).
D3 should work on any browser, with minimal requirements such as JavaScript and the W3C DOM API. By default D3 requires the Selectors API Level 1, but you can preload Sizzle for compatibility with older browsers. Some of the included D3 examples use additional browser features, such as SVG and CSS3 Transitions. These features are not required to use D3, but are useful for visualization! D3 is not a compatibility layer. The examples should work on Firefox, Chrome (Chromium), Safari (WebKit), Opera and IE9.
Note: Chrome has strict permissions for reading files out of the local file system. Some examples use AJAX which works differently via HTTP instead of local files. For the best experience, load the D3 examples from your own machine via HTTP. Any static file web server will work; for example you can run Python's built-in server:
python -m SimpleHTTPServer 8888
Once this is running, go to: http://localhost:8888/examples/
This repository should work out of the box if you just want to create new visualizations using D3. On the other hand, if you want to extend D3 with new features, fix bugs, or run tests, you'll need to install a few more things.
D3's test framework uses Vows, which depends on Node.js and NPM. If you are developing on Mac OS X, an easy way to install Node and NPM is using Homebrew:
brew install node
brew install npm
Next, from the root directory of this repository, install D3's dependencies:
npm install
You can see the list of dependencies in package.json. The packages will be installed in the node_modules directory.
FAQs
Data-Driven Documents
The npm package d3 receives a total of 2,983,721 weekly downloads. As such, d3 popularity was classified as popular.
We found that d3 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 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
In an unprecedented surge, May 2024 saw the publication of over 5,000 CVEs, marking a historic milestone in cybersecurity with an average of 164 CVEs per day, nearly double the 2023 daily average.
Security News
The White House is addressing fragmented cybersecurity regulations as CISOs report spending up to 50% of their time on compliance, aiming to harmonize requirements and improve cybersecurity outcomes.
Security News
Research
The Socket Research Team has identified a malicious Python package that is typosquatting the popular crytic-compile utility, frequently used in popular toolkits and development environments for smart contracts and crypto applications.