GeoJSON
Spring
Hibernate
Liquid
Karma
Deploy
SASS
REST
Upgrade
Boot
Spring
Consume
Visualize
React
Angular

Fun With Numbers

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.

script