rahulsiddartha14@gmail.com

@RahulSiddarth12·5 public vizzes

Fork of Q2 Area chart

This area chart visualizes the cost of cars over time, using a dataset of car listings. The chart is rendered with SVG and features a smooth, filled area plot with a line stroke, along with axis labels. Hovering over a data point triggers a tooltip displaying the year and cost, using D3 transitions for opacity. The implementation loads CSV data with the `d3.csv` API, maps the data with `d3.scaleLinear`, and draws the area using `d3.area`.

Apr 22, 2024

Loading thumbnail…

cars

This area chart visualizes car model names alongside their associated production years, using a blue filled line to emphasize yearly values across the dataset. The example relies on Chart.js 3.9.1 to render the chart on a canvas element, mapping each car type to its year value through array map functions. The dataset includes entries from 1990 to 2020, with one invalid year ignored by the library. A semi-transparent background fill and border styling highlight the line’s trajectory, while y-axis ticks begin at zero for scale reference.

Apr 22, 2024

Loading thumbnail…

question 1

This pie chart visualizes the distribution of a cars dataset, with each slice representing a category and its corresponding value from a CSV file hosted on GitHub. The chart is rendered on an HTML canvas element using Chart.js, which fetches the remote CSV data, parses it into labels and numeric values, and draws the pie with a title. The visualization is styled with custom CSS to center and size the chart container.

Apr 22, 2024

Loading thumbnail…

ass 9

An animated scatter plot of the Iris dataset cycles through four measurement pairs on the x-axis while keeping petal width on the y-axis, coloring points by species. Using D3's `csv` loader and `scaleLinear`, the visualization animates with `setInterval`, re-binding scales to chosen columns and redrawing axes via `axisBottom` and `axisLeft`. SVG circles are joined to data, with legend and labels added manually. The animation switches x-axis attributes among petal width, sepal width, petal length, and sepal length, updating the chart each second.

Apr 21, 2024

Loading thumbnail…

tutorial 1

This bar chart displays the population of countries in 2020, with countries listed along the vertical axis and population values extending horizontally. The visualization uses React to manage components and D3 v5 for scales and formatting, specifically `scaleBand` for the categorical country axis and `scaleLinear` for the population axis. SVG rectangles represent individual data bars, while custom `AxisBottom` and `AxisLeft` components built from D3 ticks render the axes. The chart includes a formatted axis label and tooltips via SVG `<title>` elements, with population values formatted using D3’s `format` function.

Apr 11, 2024