HanuReddy

@HanuReddyGopavarapu·9 public vizzes

Indian air quality

This dashboard visualizes air quality trends across Indian states from 1987 to 2015, showing concentrations of pollutants including SO2, NO2, RSPM, SPM, and PM2.5. A dropdown selector displays time-series line charts for each state, while bar charts compare average pollutant levels across all states. The visualization uses D3.js v6 with SVG rendering, employing `d3.rollups` for aggregating state averages, `d3.scaleBand`, `d3.scaleLinear`, and `d3.line` for data encoding, with color mapping via `d3.scaleOrdinal` and `d3.schemeCategory10`.

Apr 27, 2024

Loading thumbnail…

task9&10-1.2

This area chart displays monthly revenue from sales_data.csv, with a steelblue filled region rising across twelve months from January to December. The visualization uses D3 v7, applying `d3.csv` to load the data, `d3.scaleBand` for the categorical month axis, and `d3.scaleLinear` for the revenue axis. It renders the area with `d3.area()` and draws the resulting path into an SVG, adding labeled X and Y axes via `d3.axisBottom` and `d3.axisLeft`.

Apr 16, 2024

Loading thumbnail…

task9&10

This pie chart displays the proportional distribution of fruit quantities from a CSV file, labeling each slice with its fruit name and including a color-coded legend. Built with D3 v7, it uses the `d3.pie` and `d3.arc` generators to compute and render arcs as SVG paths, with `d3.scaleOrdinal` assigning categorical colors. Data is loaded asynchronously via `d3.csv`, and labels are positioned using `arc.centroid`.

Apr 16, 2024

Loading thumbnail…

Activity6Task-4

A bubble chart displays three quantitative variables from a CSV dataset, mapping x and y coordinates to axes and a third size column to circle radius. The D3.js v7 code creates an SVG container with linear scales for position and size, then renders semi-transparent circles using data-bound enter selections. Axes are added via d3.axisBottom and d3.axisLeft, with labels for the X and Y axes, producing a straightforward scatterplot-style visualization with bubble sizing.

Apr 12, 2024

Loading thumbnail…

task-3

This scatter plot visualizes the relationship between two numeric variables from a CSV file, with data points colored red or blue based on their group designation. The visualization uses D3.js v7 to load and parse the data, then applies linear scales for both axes. The code constructs an SVG graphic with labeled axes generated through `d3.axisBottom` and `d3.axisLeft`, while circles with a radius of 5 pixels are placed using the `d3.scaleLinear` mappings to represent each data point.

Apr 12, 2024

Loading thumbnail…

Activity6Task-3-1

This interactive D3 scatter plot visualizes the Iris dataset, plotting sepal length against petal length for individual flowers. The chart uses different symbol shapes (from `d3.symbol` and `symbolsFill`) to distinguish between the three iris species, with a custom shape legend displaying the species labels. Axes are generated using `d3.axisLeft` and `d3.axisBottom` within a helper module. The data is loaded as CSV and parsed with `d3.csvParse` from the provided GitHub source, with numeric fields converted to numbers before rendering.

Apr 9, 2024

Loading thumbnail…

activity6task-3

This visualization displays the classic Iris dataset as a scatter plot, showing petal_length on the x-axis and petal_width on the y-axis. Each data point is a circle colored according to species—setosa appear skyblue, versicolor lightgreen, and virginica orange. The code uses d3.csv to load the dataset from a GitHub gist, d3.scaleLinear for the axes, and d3.axisLeft and d3.axisBottom to render the axis ticks. All marks are rendered as SVG circles via d3.selectAll('circle').data().join(), with the plot sized to the full browser window.

Apr 9, 2024

Loading thumbnail…

Activity6Task-2

This stacked bar chart visualizes the changing composition of categories A through D across the years 1995-2003. A radio button toggle transitions the rendering between a full stacked bar layout and a narrow, offset view that reveals individual category values. Built with D3 v4, the visualization uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack` to process the CSV data, while SVG `rect` elements are animated via `transition` and `attr` calls. The color scale `d3.scaleOrdinal` distinguishes the four categories.

Apr 9, 2024

Loading thumbnail…

ACTIVITY6TASK-1

This visualization displays a horizontal bar chart ranking the populations of 20 countries for 2010, using green bars labeled along the left axis with a formatted population scale on the bottom. The React application loads data from a CSV file via d3.csv, then uses d3.scaleBand and d3.scaleLinear to position bars and axes, rendered as SVG rectangles. Tooltips, provided through native SVG `<title>` elements, show the exact population in billions using d3.format.

Apr 9, 2024