A

amshureddy13@gmail.com

@AmshuReddy13·22 public vizzes

Loading thumbnail…

Fork of a7 q2

A line chart displays the weekly temperature in degrees Celsius for each day from Monday to Sunday, with data points connected by a smooth curve and markers at each value. The visualization uses the ApexCharts library, instantiating an `ApexCharts` object with a `line` chart type, and maps the dataset’s `day` values to the x-axis categories and `temperature` values to the series data. Tooltips are configured to append the °C unit to each value, and the chart is rendered inside a centered container with a maximum width of 600 pixels.

Loading thumbnail…

Fork of a7 q1

This pie chart visualizes the distribution of website share among five platforms—Facebook, Google, Instagram, YouTube, and Yahoo—using a small, 100-pixel-square canvas. It demonstrates the Chart.js library’s pie chart type, configured with custom colors and a top legend, and includes tooltips that display each platform’s raw value. The data is hardcoded into the script, with values ranging from 80 to 700, and the chart is rendered directly to the canvas element via the Chart constructor.

Loading thumbnail…

Fork of q4

This bubble chart shows the relationship between GDP per capita, life expectancy, and population for ten countries from a CSV file. The visualization encodes GDP per capita on the x-axis, life expectancy on the y-axis, and population as the bubble radius. Built with D3 v7, the chart uses `d3.scaleLinear` for both axes and `d3.scaleSqrt` for the bubble sizes, with `d3.axisBottom` and `d3.axisLeft` for ticks. Hovering over a bubble increases its opacity, and each bubble displays its country name as a label.

Loading thumbnail…

Fork of q3

This stacked dot chart visualizes the proportion of IMDb ratings across six movie genres, with each genre's distribution across five rating brackets summing to 100%. The visualization uses D3 v7 to map rating percentages along a linear scale, with each genre row displaying colored dots that represent different rating categories. Hovering over a dot triggers a tooltip showing the exact percentage, while a legend on the right identifies the color-coded rating bands. The chart is implemented as an SVG with data loaded from a CSV file, using D3's scaleBand for genre positioning and scaleLinear for percentage values.

Loading thumbnail…

q3

This visualization shows the percentage distribution of IMDb movie ratings across six genres using a stacked bar chart, revealing how genres like Documentary skew toward higher ratings while Action films cluster at lower scores. Hovering over any bar segment displays the exact percentage for that rating category within its genre. The chart uses D3 v7 with `d3.scaleOrdinal` for color mapping, `d3.axisBottom` and `d3.axisLeft` for axes, and reads data from a CSV file containing genre and rating proportion columns, rendering all elements as SVG with custom tooltip popups.

Loading thumbnail…

Fork of question 2

This stacked bar chart visualizes the distribution of book ratings across six genres, showing the percentage of books falling into five rating categories from "Below 5.0" to "Above 8.5." Each horizontal bar represents a genre, segmented by rating category, and hovering reveals the exact percentage for each segment via a custom tooltip. The data is loaded from a CSV file and processed using d3.stack(), with d3.scaleBand for the genre axis and d3.scaleLinear for the percentage axis. Colors are assigned via d3.scaleOrdinal, and the SVG rendering includes a legend for the rating categories.

Loading thumbnail…

question 2

This stacked bar chart shows how movie ratings are distributed across six genres, with each bar segmented into five rating categories from “Below 5.0” to “Above 8.5.” The visualization uses d3.stack to compute the stacked segments and d3.scaleOrdinal for color encoding. Hovering over a segment reveals the exact percentage of that rating level within the genre. The chart is rendered as SVG with axes for genre and percentage, and it includes a legend for the rating categories.

Loading thumbnail…

Fork of Fork of Fork of t4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, with circle size representing fuel efficiency and color mapping to the car manufacturer. Built with D3.js v7, it uses `d3.scaleLinear` for axes and bubble radius, `d3.scaleOrdinal` for categorical colors via `d3.interpolateTurbo`, and `.on("mouseover")` event handlers for tooltip display. The SVG output includes axis labels, a size legend for MPG values, and animated transitions on hover.

Loading thumbnail…

Fork of Fork of t4

This visualization shows the correlation between average horsepower, torque, and highway MPG for various car makes, using a bubble chart where circle size encodes MPG and color differentiates manufacturers. D3 v7 reads the data from a CSV file and renders the chart as SVG with interactive tooltips on hover. The code uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` for scales, with event handlers for mouseover, mousemove, and mouseleave to show tooltips.

Loading thumbnail…

Fork of t4

This bubble chart shows the correlation between average horsepower (x-axis), torque (y-axis), and highway MPG (bubble size) for various car makes, with each bubble colored by brand. Built with D3 v7, it renders as an SVG with animated tooltips. The visualization uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color mapping, and `d3.interpolateTurbo` to generate the color palette. Data is loaded from a CSV file, and the chart includes a legend for MPG values and a color-coded list of makes.

Loading thumbnail…

t4

This bubble chart explores the correlation between average horsepower, torque, and highway MPG across different car makes. Using the D3.js library (v7), circles are positioned by horsepower and torque on x- and y-axes, with radius and color encoding MPG and make respectively. The visualization includes an interactive tooltip that reveals the make on hover, implemented with mouseover, mousemove, and mouseleave events. A legend communicates both the MPG radius scale and color-coded makes, while data comes from a CSV file.

Loading thumbnail…

Fork of t3.2

This visualization is a scatter plot of the Iris dataset, plotting sepal length against petal length, with each flower species represented by a distinct symbol shape. The chart uses D3 v7’s scaleLinear for axes, scaleOrdinal with symbolsFill to map species to different marker shapes, and a custom shape legend to identify the three species. Data is loaded from a remote CSV file via csvParse, and the plot is rendered as SVG paths using the d3.symbol generator. The axes are drawn with axisLeft and axisBottom.

Loading thumbnail…

t3.2

This example uses a D3.js scatter plot to visualize the Iris dataset, plotting sepal length against petal length while encoding species through distinct point shapes. The visualization includes labeled axes, a custom shape legend, and a responsive SVG canvas that fills the browser window. The code leverages D3’s `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs, along with helper modules for axes and legend rendering, and fetches the CSV data from a remote GitHub repository.

Loading thumbnail…

Fork of t3

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (setosa, versicolor, or virginica). The chart loads CSV data from a GitHub gist and uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes. Circles are drawn with SVG, with fill colors assigned via a switch statement per species. Axis labels display rotated text, and the plot fills the browser window with a responsive width and height.

Loading thumbnail…

t3

This scatter plot visualizes the IRIS dataset, encoding petal length and width along the x- and y-axes while coloring each point by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange. The code loads CSV data from a GitHub gist via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to map values, and renders circles in an SVG. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with rotated, green text labels added manually.

Loading thumbnail…

Fork of t2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, revealing how rating patterns vary by genre. Each bar is segmented by five rating categories, with hover interactions displaying precise percentages via a tooltip. The visualization uses D3.js v7 with SVG rendering, employing `d3.stack()` for data stacking, `d3.scaleOrdinal()` for color mapping, and `d3.scaleBand()` for genre positioning. Data originates from a CSV file containing rating proportions per genre.

Loading thumbnail…

t2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar representing the percentage of ratings in five categories from “below 5.0” to “above 8.5”. The visualization uses d3.stack() to compute the stacked segments and d3.scaleOrdinal with a custom color palette for the categories. Hovering over any segment triggers a mouseover event that displays a tooltip showing the exact percentage for that genre and rating level. The chart renders in SVG, with axes created via d3.axisBottom and d3.axisLeft, and includes a legend for the rating categories.

Loading thumbnail…

Fork of question 2

This interactive bar chart visualizes the population of 20 countries for the year 2010, sourced from a CSV file fetched via `d3.csv`. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numerical x-axis. The SVG rendering includes custom axis components, tooltips via `<title>` elements, and a tick format that converts large numbers to billions using `d3.format`.

Loading thumbnail…

question 2

This visualization displays the populations of countries in 2010 as a horizontal bar chart, ranking the top 20 countries by population size. It loads data from a CSV file using the d3.csv function and renders the chart as SVG elements within a React component. The code employs d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.format to abbreviate tick labels. The chart includes axes, tick marks, and a tooltip showing the population value for each bar.

Loading thumbnail…

Fork of question 1

This horizontal bar chart displays the population of ten countries in the year 2000, sorted from the largest to the smallest population. The visualization uses D3 v5 scales (`scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis) within a React component, with SVG rendering for the bars. Data is loaded asynchronously from a CSV file via D3's `csv` utility, and hovering over a bar reveals its population value in billions using a title tooltip. The chart’s axes are customized with tick lines in blue and formatted labels.

Loading thumbnail…

question 1

A horizontal bar chart displays the population for ten countries from a CSV dataset, sorted by country name. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map categorical labels and numeric values, rendering rectangles as SVG marks with tooltips. Axes are generated with the `AxisBottom` and `AxisLeft` components, while tick labels are formatted using D3’s `format` function to abbreviate values. The chart is rendered entirely as SVG, with a blue tick line and light green bar styling defined in embedded CSS.

Loading thumbnail…

Activity 6

A horizontal bar chart displays the populations of 30 countries for 2020, with bars colored light green and axes styled with blue tick lines. The visualization uses React with SVG rendering, leveraging D3 v5 utilities including `scaleBand`, `scaleLinear`, `max`, and `format` to map country names and population values. Population data is loaded from a CSV file via `d3.csv`, with axis labels and tick formatting applied through helper components.