Rahulbelede97@gmail.com

@RahulBelede·7 public vizzes

Area chart_ICE7

This area chart displays car sales by car type across three years (2019–2021), using layered, semi-transparent filled areas to compare sales trends over the categorical x-axis. The visualization loads data from a remote CSV file via `d3.text`, then processes it into arrays. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` with a monotone curve to draw the three colored series, each with adjustable opacity. Axes, labels, and a legend are added via D3’s SVG manipulation, with the chart rendered entirely in SVG.

Mar 28, 2024

Loading thumbnail…

ICE_7_Line Chart

The chart displays car sales by type across three years (2019–2021), using three colored lines to compare yearly trends. It shows the sales values per car type on a band scale, with each line labeled at its endpoint. The visualization is built with D3 v7, using `d3.text` to load comma-separated data from a remote text file, then rendering SVG paths via `d3.line` with a monotone curve. Axes, labels, and a title are added using D3’s `axisBottom` and `axisLeft` methods, while the data source is a GitHub gist.

Mar 28, 2024

Loading thumbnail…

Reusable_Scatter Plot

This example shows how sales in 2019 relate to sales in 2021 for different car types, with each circle’s position encoding the two years’ values. The chart animates every two seconds, cycling the x-axis through 2019, 2020, and 2021 sales while keeping the y-axis fixed on 2019. The reusable scatter plot is built with D3 v6, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, and SVG circles with a radius of 5 pixels. Data is loaded from a CSV via `d3.csv`, and the plot’s dimensions adapt to the window size.

Mar 28, 2024

Loading thumbnail…

ICE 7 Pie Chart

This pie chart displays 2021 car sales by type, with each slice labeled by car category and its percentage of total sales. A legend to the right provides additional identification of the color-coded segments. The visualization is built using D3.js v5, which handles the data loading, pie layout, and arc generation. The code uses `d3.pie()` to compute the angles, `d3.arc()` to draw the slices, and `d3.scaleOrdinal` with `d3.schemeCategory10` for the color palette, with data fetched from a remote text file.

Mar 28, 2024

Loading thumbnail…

ICE 7_Reusable scatter plot

A reusable scatter plot built with D3 v6 visualizes car sales across three years (2019–2021). The SVG chart maps 2021 sales to the x-axis and 2019 sales to the y-axis, with each circle representing a car type. Every two seconds, the x-axis animates to a different year's sales data, cycling through 2019, 2020, and 2021, while the y-axis remains fixed. The visualization uses responsive sizing and smooth transitions, making it a clear example of an animated, reusable D3 chart component.

Mar 28, 2024

Loading thumbnail…

Bar Graph - ICE6

This bar graph visualizes car sales data for ten vehicle types, showing the number of units sold in 2021. The chart uses a vertical bar for each car type, with the height corresponding to its sales figure. The visualization is built with D3 v7, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and SVG rectangles for the bars. Data is loaded from a remote CSV file via `d3.csv` and rendered with axis labels for "Car Types" and "Sales".

Mar 21, 2024

Loading thumbnail…

Scatter Plot - ICE6

This scatter plot shows car sales in 2019 against 2021, with each circle representing a car model type. It reveals a positive trend, as most points cluster above the diagonal, indicating higher sales in 2021. The visualization loads CSV data from a GitHub gist using D3’s `csv` parser, then uses `scaleLinear` and `axisBottom`/`axisLeft` to render the axes. React manages the component state, while D3 selects and updates the SVG circles via `join('circle')`. The chart is drawn with D3 v5 and rendered through React 16.

Mar 21, 2024