prudhvi

@Prudhvinathreddy·12 public vizzes

Fork of Making A Bar Chart

This bar chart displays the populations of ten countries, from China and India down to Mexico, using horizontal bars ordered by descending population. The visualization loads data from a CSV file, converts population values to thousands, and renders the chart as SVG elements using D3 v7. It employs `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis placement, and `axisLeft` along with `axisBottom` to generate the labeled axes.

Apr 23, 2023

Loading thumbnail…

Fork of IMDb Movie ratings

This stacked bar chart uses D3.js v7 to show how IMDb ratings vary across movie genres, with each genre’s bar segmented by five rating ranges from below 5.0 to above 8.5. The visualization emphasizes proportional comparisons, as each genre’s segments sum to 100%, and hovering over any segment reveals the exact percentage via a tooltip. The code uses `d3.stack()` to compute the stacked layout, `d3.scaleBand` for the y-axis, and `d3.scaleLinear` for the x-axis, rendering SVG rectangles with a dark theme. Data comes from the included CSV file, showing genres like Documentary, Drama, and Action.

Apr 10, 2023

Loading thumbnail…

Fork of IMDb Movie ratings

Apr 10, 2023

Loading thumbnail…

Fork of Student Scores Bar Chart

This bar chart displays student test scores from a CSV file, ranking each student along the y-axis with a score from 0 to 100 on the x-axis. The purple bars are rendered as SVG rectangles within a fixed 960 by 450 pixel canvas, using D3 v5’s `scaleLinear` and `scaleBand` to map data to coordinates. The chart includes axes generated by `axisLeft` and `axisBottom`, with a hover effect that reduces bar opacity. The student data is loaded asynchronously from `data.csv`.

Apr 10, 2023

Loading thumbnail…

Student Scores Bar Chart

This bar chart displays the scores of twelve students, with each horizontal bar representing an individual’s score from 10 to 99. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and SVG `rect` elements with a hover effect that reduces opacity. Data is loaded from an external CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`.

Apr 10, 2023

Loading thumbnail…

Fork of IMDb Movie ratings example

This stacked bar chart visualizes the distribution of movie ratings across six genres, with each bar segment representing the percentage of films falling into one of five rating bands. Hovering over a segment reveals the exact percentage via a tooltip. The chart uses D3 v7’s `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to build the SVG visualization from CSV data, with custom tooltip handling and axis labels.

Apr 10, 2023

Loading thumbnail…

Fork of Fork of IMDb Movie ratings

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, segmented into five rating brackets from below 5.0 to above 8.5. The visualization uses d3.stack() to layer the rating categories and d3.scaleOrdinal with a custom color scale for the segments. Hovering over any bar segment triggers a tooltip displaying the exact percentage for that genre and rating bracket via d3.select and mouse event handlers. Data comes from a local CSV file, rendered as SVG with axes created using d3.axisBottom and d3.axisLeft.

Apr 10, 2023

Loading thumbnail…

IMDb Movie ratings example

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segment representing a rating range from below 5.0 to above 8.5 as a proportion of all movies in that genre. Built with D3 v7, the chart uses `d3.stack()` to compute the stacked layout and `d3.scaleBand` for the categorical y-axis. Interactive tooltips display exact percentages on hover, implemented through mouse event listeners, while a legend identifies each rating category using a color scale. The data originates from a CSV file containing genre-specific rating proportions.

Apr 10, 2023

Loading thumbnail…

Fork of Multi-Cryptocurrency Line Chart

This line chart displays the closing price history of Bitcoin from 2013 to 2021, using data from a Kaggle cryptocurrency dataset. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with `curveBasis` for the smoothed path, and `d3.axisBottom`/`d3.axisLeft` for grid lines. The chart includes rotated y-axis labels, a bold title, and date formatting via `timeFormat`. Data is loaded as CSV and parsed with `timeParse` before rendering.

Apr 10, 2023

Loading thumbnail…

Fork of Student Scores Bar Chart

This example visualizes student exam scores as a horizontal bar chart, with each bar’s length proportional to the score from a CSV file. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map scores and student names, with axes generated by `axisLeft` and `axisBottom`. Data is loaded via `csv()`, and bars are appended as SVG rectangles, colored purple and dimming on hover through CSS.

Apr 10, 2023

Loading thumbnail…

Fork of Student Scores Bar Chart 2

This bar chart displays student scores from a CSV file, using a horizontal layout with student names on the y-axis and score values from 0 to 100 on the x-axis. The visualization uses d3.csv to load the data, d3.scaleBand for the categorical axis, d3.scaleLinear for the numeric scale, and d3.axisLeft and d3.axisBottom to render the axes. Each rectangle’s width is proportional to the score, with a purple fill and hover effect that reduces opacity. The chart is rendered as SVG within a 960×450 pixel viewport, with margins applied to position the plot area.

Apr 10, 2023

Loading thumbnail…

Fork of [TEST] Pie Chart

This visualization presents a pie chart that breaks down a rating distribution into categories such as "AAA Local," "AA+ Local," and "BBB- Internacional," with data loaded from an external JSON file. The chart uses D3.js version 5, specifically employing the `pie`, `arc`, and `scaleOrdinal` functions from the D3 API to calculate arc segments and assign a custom color palette. A legend, positioned to the right, displays each category label and its corresponding percentage value. The SVG output is rendered on a 960x500 canvas, with each slice's proportion determined by the numeric `value` field in the data.

Mar 5, 2023