Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Ddeepthinaidu2001@gmail.com
Last edited Oct 5, 2025
Created on Oct 5, 2025
Forked from HTML Starter

This visualization summarizes South Indian movie data, displaying total count, average IMDB rating, and average box office earnings in a text summary, alongside a full data table and a bar chart of box office collections. The bar chart uses d3.scaleBand and d3.scaleLinear to map movie titles and revenue, with axes generated via d3.axisBottom and d3.axisLeft. The code loads a CSV dataset with d3.csv, cleans the data, and renders the SVG chart with blue rectangles, rotated x-axis labels, and custom title text.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays movie details for three films—Baahubali 2, The Godfather, and Jersey—in static SVG cards, each showing a title, a placeholder image, and a release date. It demonstrates how to load and summarize a CSV dataset using D3.js v7, fetching a remote file with `d3.csv` and computing basic statistics about the data’s rows, columns, and memory footprint, which are then printed in a `<pre>` block. The visualization pairs hand-coded SVG markup with a dynamic data-metadata readout, all styled with CSS on a purple background.

NNanditha Reddy
80% match
Loading thumbnail…

Fork of HTML Starter

This example combines a bar chart and a line chart in a single SVG view to compare the total runs and batting average of the top 15 Indian cricketers from a CSV dataset. The bars, rendered with `d3.scaleBand` and `d3.scaleLinear`, show runs on the left axis, while a crimson line, plotted with `d3.line`, overlays average values on a right axis. D3 v7 axes, gridlines, and hover tooltips supplement the visualization, which loads data asynchronously via `d3.csv`.

Ssharathchandrareddymuthyam
79% match
Loading thumbnail…

Fork of HTML Starter

This visualization shows total runs scored by individual Indian cricket players as a bar chart, with player names on the x-axis and run totals on the y-axis. The code loads data from a CSV file using d3.csv, then encodes the values through bar height and position using d3.scaleBand and d3.scaleLinear. Rectangles are drawn into an SVG container with a blue fill, and axes are rendered with d3.axisBottom and d3.axisLeft, with rotated player labels for readability.

Aankitgoudpoodhari07@gmail.com
78% match
Loading thumbnail…

Fork of HTML Starter

This scatter plot compares batting average against strike rate for a dataset of Indian cricketers parsed from a CSV file. Each circle represents a player, positioned by their average on the x-axis and strike rate on the y-axis, with hover tooltips revealing individual stats. The visualization uses D3 v7 to load the data via `d3.csv`, scale values with `d3.scaleLinear`, and render the axes and SVG circles. It also includes labeled axes and a chart title to structure the comparison.

Ssharathchandrareddymuthyam
78% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates loading and parsing a cleaned Disney characters CSV dataset with D3.js v7, displaying summary statistics such as total rows, distinct movies, average popularity score, and debut year range in interactive cards. It also renders a preview table showing the first eight rows of the data, including a color swatch rendered inline for the `color_hex` column. The visualization uses `d3.csvParse` with custom row accessors to coerce numeric fields, along with `d3.mean`, `d3.extent`, and data-join methods like `selectAll().data().enter().append()` to build the SVG and HTML elements.

Cchandanamahesh0215@gmail.com
77% match
Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

The visualization displays a horizontal bar chart comparing movie budgets, sorted by film title, with custom axes and a gradient fill ranging from green to orange. It uses d3.csv to load budget data, d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.axisLeft and d3.axisBottom with custom tick formatting to abbreviate values (e.g., "45M"). A rotated y-axis label and a blue title are added via SVG text elements. The code customizes axis appearance by removing domain and tick lines, and applies gradients through SVG defs.

Ggaddamthanmayeereddy759@gmail.com
77% match
Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This D3.js v7 bar chart visualizes movie collection totals from a CSV file, with movie names on the y-axis and collection amounts on the x-axis. The SVG rendering uses `scaleLinear` for the quantitative axis and `scaleBand` for the categorical axis, drawing purple rectangles for each movie. Labels for both axes are added via SVG text elements, with the y-axis label rotated 90 degrees. The chart reads data from `data.csv` using the `csv` function and applies a margin-based layout within the 960x500 SVG canvas.

PPriyanka11128
77% match
Loading thumbnail…

Fork of HTML Starter

A bar chart from the D3.js visualization library shows the top 20 Indian cricketers ranked by their total runs scored, using data loaded from a CSV file. The visualization employs a categorical x-axis for player names and a linear y-axis for run counts, with data sorted in descending order and styled as steelblue bars. Built with d3.scaleBand, d3.scaleLinear, d3.axisBottom, and d3.axisLeft, the chart includes rotated player-name labels for readability and hover effects that change bar colors to darkorange.

Ssharathchandrareddymuthyam
77% match