See the Pen Fun With Numbers by jonclawson (@jonclawson) on CodePen.
React Version
See the Pen React with Numbers by jonclawson (@jonclawson) on CodePen.
Angular VX
See the Pen Angular 6 starter by jonclawson (@jonclawson) on CodePen.
I had some free time last Saturday, so I decided to play with d3.format() and created an AngularJS number filter for formatting numbers in common formats you might see on a website or application. This is what I came up with.
Just to be fair, I decided to make a React as well as an Angular 6 version too.
D3.js (Data-Driven Documents) is an open-source JavaScript library for creating dynamic and interactive data visualizations in web browsers. It allows developers to bind data to Document Object Model (DOM) elements and then apply data-driven transformations to create complex and customized visual representations of data.
Key features and concepts of D3.js include:
Data Binding: D3.js enables you to bind data to DOM elements, associating data values with visual elements like SVG shapes, HTML elements, or Canvas graphics.
Data-Driven Transformations: D3.js allows you to apply data-driven transformations to manipulate the visual properties of elements, such as position, size, color, and shape.
SVG and Canvas Support: D3.js works with Scalable Vector Graphics (SVG) and HTML Canvas, giving you flexibility in choosing the appropriate rendering technology for your visualizations.
Selections: D3.js provides a powerful selection mechanism that allows you to select, filter, and manipulate DOM elements based on data conditions.
Data Joins: D3.js supports data joins, where you can efficiently join data with existing DOM elements or create new elements based on data.
Transitions and Animations: D3.js allows you to create smooth transitions and animations to enhance the visual experience of your data visualizations.
Scales and Axes: D3.js provides scale functions to map data values to visual attributes, such as positioning data on axes or determining the size of elements.
Layouts: D3.js includes various layout algorithms for creating common visualizations like bar charts, pie charts, force-directed graphs, and more.
Modularity and Extensibility: D3.js is designed with modularity in mind, allowing you to use specific parts of the library and extend its functionality with custom plugins.
Data-Driven Interaction: D3.js enables you to create interactive visualizations by responding to user interactions and events.