Recently, we had the pleasure to participate in a machine learning project that involves libraries like React and D3.js. Among many tasks, I developed few charts that help to process the result of ML models like Naive Bayes in form of a line chart or grouped bar chart.
[…]
D3.js is a data-driven JavaScript library for manipulating DOM elements.
“D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.” - d3js.org
[…]
Let’s take a detour to see what benefits we can get from using SVG.
SVG stands for Scalable Vector Graphics which is technically an XML based markup language.
[…]
Despite its downsides, SVG is a great tool to display icons, logos, illustrations or in this case, charts.
[…]
Texts are SVG elements that can be appended to the SVG or groups. They can be positioned with x and y coordinates while text alignment is done with the text-anchor attribute. To add the label itself, just call text method on the text element.
[…]
In the next code block I show You how to add event listeners to SVG elements.
[…]
All the other css rules cover the font sizes and colors which You can find in the source code.
[…]
