Skip to main content
SimilarExport ZIP
100%

ICE-7 (Part-3) Rohith Annadurai

✓ Published3🌍 Public
Rrohithannadurai@my.unt.edu
Last edited Mar 28, 2024
Created on Mar 28, 2024

This example demonstrates a line chart visualizing movie revenue over time, with each movie labeled by name and genre. The chart uses D3.js v7 to load CSV data from a GitHub gist, parse dates, and render an SVG line plot. The x-axis employs a band scale to display categorical movie-genre labels with rotated text for readability, while the y-axis linearly maps revenue values. The visualization includes labeled axes for clarity, and the line path connects revenue values across the dataset, providing a clear view of revenue trends across different movie entries.

AI-generated description

CSCE 5320.002 Scientific Data Visualization (ICE-7)

Part-1 REUSABLE SCATTER PLOT

  • Rohith Annadurai 11664585
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 (Part-2) Rohith Annadurai

This example demonstrates a reusable scatter plot and a pie chart for visualizing movie data, created with D3 v7 and rendered as SVG. The scatter plot maps movie budgets to revenues, with circles colored steelblue and an orange hover effect, while the pie chart displays the distribution of movie genres as percentage-labeled slices with a custom color palette and a separate legend. Both visualizations are driven by a shared CSV dataset loaded from a gist, and the code is structured to allow easy reuse and adaptation for other datasets.

Rrohithannadurai@my.unt.edu
88% match
Loading thumbnail…

Fork of ICE-7 (Part-3) Rohith Annadurai

This D3.js visualization presents two charts analyzing movie data: a line chart tracking revenue across movies by name and genre, and a reusable scatter plot comparing budget against revenue. The line chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the revenue axis, and `d3.line` to render the path, with rotated axis labels. The scatter plot uses `d3.scaleLinear` for both axes and appends circles to an SVG via `d3.select`. Data is loaded asynchronously from a GitHub-hosted CSV file using `d3.csv`, with date parsing via `d3.timeParse`.

Rreddysushma994@gmail.com
88% match
Loading thumbnail…

ICE-7 (Part-4) Rohith Annadurai

This example presents two visualizations: a reusable scatter plot and an area chart, both built with D3.js v7. The scatter plot maps movie budgets against revenues using `d3.scaleLinear` for axes and SVG circles, with hover styling. The area chart displays cancer deaths over years, using `d3.area` to generate a filled path and `d3.axisBottom`/`d3.axisLeft` for scales. Both load data from external CSV files via `d3.csv`, and render interactively with SVG elements, including labeled axes and a steelblue fill for the area chart.

Rrohithannadurai@my.unt.edu
87% match
Loading thumbnail…

Fork of ICE-7 (Part-1) Rohith Annadurai

A reusable scatter plot displays the relationship between movie budget and revenue. The D3.js code loads data from a CSV file, converts the numeric fields, and uses linear scales with padding to map values to SVG circles, which are colored steel blue and turn orange on hover. The plot includes labeled x- and y-axes for budget and revenue, with a fixed chart size and margins, and is built entirely with D3 v7's selection, scale, and axis APIs.

Rrohithannadurai@my.unt.edu
84% match
Loading thumbnail…

ICE-7 Line Chart

This line chart visualizes the number of movie releases per year from 2000 to 2015, using a red path to highlight trends over time. The visualization is built with D3 v5, employing `scaleTime` for the year-based x-axis, `scaleLinear` for the release counts, and `line` to generate the path. Data is loaded asynchronously from a CSV file hosted on GitHub, with axes labeled and styled using `axisBottom` and `axisLeft`. The SVG rendering includes grid lines, axis labels, and a title, all within a React-based template.

AAISWARYAMARAPATLA1999
82% match
Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This example displays a line chart of automobile sales in India from 1999 to 2012, plotting film gross values against film titles. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator to draw the path. Data is loaded from a GitHub-hosted CSV file via `d3.csv`. The chart includes labeled axes, a title, and a styled blue line with gridlines.

RRamakanth771
79% match
Loading thumbnail…

ICE-7-Assignment-7

This interactive scatter plot displays movie budgets versus box office revenue, with each circle colored by genre and featuring hover tooltips showing title, genre, and financial details. Built with D3 v6, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeCategory10 for color encoding, and d3.axisBottom/axisLeft for tick marks. The reusable scatterPlot() function employs data joins and transition-based tooltip opacity changes. The animation aspect comes from interactive mouseover effects that enlarge circles and reveal rich metadata, rendering SVG elements within a bordered container.

KKrishna.
79% match
Loading thumbnail…

ICE 7 - Question 1

This interactive scatter plot visualizes the relationship between movie budgets and box office revenues, with points colored by genre. The visualization is built with D3.js v6 and uses a reusable scatterPlot function with configurable margins, scales, and labels. It employs d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeCategory10 for genre colors, and d3.axisBottom/axisLeft for ticks. Hovering over a circle triggers a tooltip that reveals the movie title, genre, budget, and revenue values.

KKrishna.
79% match