NishadAhsan

@NishadAhsan·3 public vizzes

Line Chart

This line chart visualizes the number of goals scored each match day across a season, using a simple stroke path to connect discrete data points. The chart reads from a CSV dataset with match day and goal counts, rendering as an SVG with scales for both axes. The code employs D3 v6 functions including `scaleLinear`, `line`, `extent`, `max`, and `axisBottom`/`axisLeft` to construct the plot. The visualization is built within a React-friendly structure, with axes and margins explicitly configured, and data parsed as numbers before rendering.

Sep 9, 2020

Loading thumbnail…

Bar Chart

This bar chart visualizes the confirmed COVID-19 cases in Bangladesh for the first eight days of September 2020, sourced from a local CSV file. The chart uses D3 v6 within a React framework, rendering as an SVG. It employs `scaleLinear` for the y-axis, `scaleBand` for the categorical dates on the x-axis, and `axisLeft` and `axisBottom` to generate the axes. Steel-blue rectangles represent the case counts for each date.

Sep 9, 2020

Loading thumbnail…

Intro to D3.js (making a face)

This example demonstrates the foundational concepts of D3.js by constructing a simple cartoon face from SVG shapes. A single yellow circle forms the head, centered within an SVG canvas. While the code contains commented-out sections for adding eyes and a mouth using D3's arc generator, only the basic circle is rendered. The example uses D3 v6 selection methods like `select` and `append`, and sets SVG attributes such as `r`, `fill`, and `transform` to position and style the element. The full face construction remains inactive, showing only the initial building block.

Sep 8, 2020