Mainul Islam

@Mainul-Islam-Nirob·5 public vizzes

Temperature in San Francisco Scatter Plot!

This scatter plot visualizes the relationship between car horsepower and weight using data from the UCI Machine Learning Repository’s Auto MPG dataset. Red circles represent individual cars, with their positions determined by d3.scaleLinear scales mapping horsepower and weight to SVG coordinates. The visualization includes labeled axes, tick marks, and a title, all rendered via D3 v6 functions like axisBottom and axisLeft. Hovering over a circle changes its color to gold, providing interactive feedback.

Sep 23, 2020

Loading thumbnail…

Cars Scatter Plot!!!

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red circles with hover highlighting show individual data points, while axes include tick marks and labels. The visualization uses d3.csv to load data, d3.scaleLinear for scaling, and d3.axisBottom and d3.axisLeft for axes, rendered as SVG elements. Axis gridlines and text styling are applied via CSS.

Sep 23, 2020

Loading thumbnail…

Populations Scatter Plot With D3!!

This scatter plot visualizes the populations of the ten most populous countries, using data from Worldometers' 2020 estimates. The chart maps each country's population along the x-axis, with country names displayed on the y-axis. Built with D3 v6, the visualization uses `scaleLinear` and `scalePoint` to position elements, and `axisBottom` and `axisLeft` to render axes with gridlines. The SVG output features interactive circles that change color on hover, with axes and labels formatted using D3's `format` function.

Sep 23, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5, with a circular head, two eyes, and a mouth formed by an arc path. The eyebrows are animated upward and back down via chained `transition` calls that modify their `transform` attribute over two-second durations. The example demonstrates fundamental DOM manipulation with `select` and `append`, using static measurements for spacing and coordinates to compose the face.

Sep 23, 2020

Loading thumbnail…

Making A Bar Chart!

This bar chart displays the populations of the ten most populous countries, based on 2020 estimates from Worldometers. It uses D3 v6’s scaleLinear and scaleBand to map population values and country names to a horizontal bar layout, rendered as SVG rects that change color on hover. The visualization includes axis labels and a title, with x-axis tick values formatted in billions and gridlines drawn using axisBottom.

Sep 19, 2020