Introduction

Hi, I am Satish Mishra, a sophomore IT student from India and this summer vacation I've planned to skill up, learn and understand all about data and data visualization. I have a good foundation of python fundamentals and the topic of data visualization always seemed of great interest to me, so I decided to take up the freeCodeCamp course for Data Visualization with D3 for starters. In these blogs I'll sharing what I understood and the notes I made for references during this course.

Section 1: Starting with D3?

Before start with data visualization I feel it is important to know what does data means?

Data means a collection of raw facts and figures

Data is always around us, from the weather report to market prices, but it may be tough to make sense of it all without context or representation. This is where data visualisation comes into play.

The process of translating raw information into a visual representation like graphs, charts, or maps is known as data visualisation. D3.js, a toolkit for producing dynamic and interactive data visualisations in web browsers, is another popular tool for data visualisation.

So what precisely is D3?

D3 is an abbreviation for "Data-Driven Documents," and it is designed to operate with fundamental web technologies such as HTML, CSS, and SVGs (scalable vector graphics). This implies that you can use D3 to build spectacular data visualisations that will work in any modern web browser.

D3 supports a wide range of data types, and its strong techniques allow you to turn raw data into a variety of graphs, charts, and visuals. Data visualisation, in essence, is a method of translating raw data into useful information that can be readily comprehended and acted upon.

Section 2: Understanding SVGs

SVGs are vector images, which are made out of mathematical equations rather than pixels. This allows them to be indefinitely scaled without sacrificing image quality. When other image formats, such as JPEG and PNG, are scaled up or down, their quality suffers, while SVGs retain their clean borders and clear lines.

SVGs are high-quality pictures that can be readily edited in addition to being scalable. They are built with XML code, making them simple to edit with HTML and CSS. Because they preserve their quality at any scale, SVGs are a popular choice for professional applications, including printing.

How to use SVGs in HTML?

There are two main ways to use SVGs in HTML. The first option is to utilise the img> element, just like you would for other image types. To display an SVG picture, for example, use the following code:

<img src="filename.svg" width="200" height="200" />

This method is straightforward but limited in terms of interactivity.

The second method is to use the tag, which was introduced in HTML5. This allows for more complex and interactive SVG images. Here is an example of drawing a circle using the tag:

<svg width="100" height="100">
  <circle cx="50" cy="50" stroke="Green" stroke-width="4"/>
</svg>

The element may be used to draw a variety of forms, including squares, rectangles, and triangles.

SVGs have the advantage of being easily compressible. This implies they require less storage space than other picture formats, which is especially beneficial for online applications where page speed is critical.

SVGs have several advantages over other picture formats, including scalability, excellent quality, and ease of editing. You can build professional-quality data visualisations and visuals that are both scalable and interactive by utilising SVGs in your online applications.