Skip to main content
Log in
I

ibrahimpatnamrohit1990@gmail.com

@Rohit1990GH·13 public vizzes

Loading thumbnail…

DV-q2

This example shows a monthly revenue trend as an area chart, with a steelblue filled region spanning twelve months of sales data from a CSV file. The SVG rendering uses d3.area() to generate the path, d3.scaleBand() for the categorical month axis, and d3.scaleLinear() for the revenue values. Axes are drawn with d3.axisBottom() and d3.axisLeft(), while static axis labels for "Month" and "Revenue ($)" clarify the chart’s dimensions.

Apr 25, 2024
Loading thumbnail…

DV-q1

This pie chart visualization displays the proportional distribution of music genres based on their representation in a column titled 'below 5.0' from a CSV file. The chart uses a color-coded segment for each genre, with a corresponding legend to the right. Built with D3.js v7, the visualization loads data via `d3.csv`, generates the pie layout with `d3.pie`, and renders the segments as SVG paths using `d3.arc`. A legend is constructed dynamically, with color swatches produced via `d3.schemeCategory10`. The accompanying SVG is created within a dedicated container using the `d3.select` API.

Apr 25, 2024
Loading thumbnail…

bubblechart task4 rohit

This bubble chart visualizes the relationship between inflation, GDP, and growth rate for 26 countries, with each bubble’s x-position, y-position, and size encoding the three metrics. Bubble color maps to country, and a legend identifies each nation, while tooltips reveal exact values on hover. The visualization is built with D3 v7, using SVG for rendering, linear scales for axes and bubble size, and an ordinal color scale with interpolated Turbo colors. The chart includes animated transitions for tooltip opacity, making it interactive.

Apr 15, 2024
Loading thumbnail…

task4 Bubble chart rohit

This interactive bubble chart displays the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble’s position mapping to the first two variables and its size encoding MPG. The visualization uses d3.v7’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes, while an ordinal color scale differentiates makes. Hovering reveals a tooltip with the car make, and a legend explains bubble sizing. Data is loaded from a CSV, and the chart is rendered as inline SVG with animated transitions in the tooltip’s opacity.

Apr 15, 2024
Loading thumbnail…

task3 rohit

An interactive scatter plot displays the relationship between Temperature and Humidity, with points colored by HVAC Usage. The plot uses a time-series dataset of building sensor readings, plotting each data point as a circle. The visualization is rendered using D3.js, specifically leveraging `scaleLinear` for axis scaling, `scaleOrdinal` with `schemeCategory10` for the color mapping, and custom modules for rendering axes and a color legend. The implementation relies on D3's selection joins and the CSS selector API to efficiently manage the SVG elements.

Apr 15, 2024
Loading thumbnail…

Scatter Plot with Shape Rohit

This scatter plot displays the relationship between sepal length and petal length for Iris flowers, with species encoded by both point shape and a categorical legend. The visualization uses d3.v7's scaleOrdinal with symbolsFill to map species to distinct geometric markers, while scaleLinear handles axis scaling. Data is loaded from a remote CSV using csvParse, and all rendering is performed through join operations on SVG elements, with custom modules for axes and shape legends.

Apr 15, 2024
Loading thumbnail…

Activity 8 Scatter Plot Rohit

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width while also encoding sepal measurements as circle radii. Each point represents a flower specimen, color-coded by species (setosa, versicolor, or virginica) through a switch statement. The visualization uses d3.v6 with the csv parser, scaleLinear, axisLeft, and axisBottom APIs to load data and render SVG circles. The code dynamically sizes the plot to fit the browser window and displays axis labels for petal length and sepal length.

Apr 15, 2024
Loading thumbnail…

task2 question rohit

This example presents a stacked horizontal bar chart of sports, showing the percentage distribution of ratings (below 5.0 through above 8.5) for six sports. The chart uses D3 v7 APIs including `d3.stack()`, `d3.scaleOrdinal()`, `d3.scaleLinear()`, and `d3.scaleBand()`. The SVG rendering includes tooltips on mouseover that display the exact percentage for each segment, with data loaded from a CSV file. The visualization uses a color scale for rating categories and custom fonts from Google Fonts.

Apr 15, 2024
Loading thumbnail…

activity 6 task2

This stacked bar chart shows the distribution of ratings across six sports, with each bar segmented into five rating levels from “below 5.0” to “above 8.5.” The visualization uses D3.js v7 to create a horizontally stacked bar chart, where the x-axis represents the percentage (scaled from 0 to 1) and the y-axis lists the sports. Interactive tooltips display the exact percentage for each segment on mouseover, formatted to two decimal places. The chart uses `d3.scaleOrdinal` for color assignment, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the y-axis, rendering with SVG and styled via CSS.

Apr 15, 2024
Loading thumbnail…

Activity 6

This stacked bar chart shows the percentage of IMDb ratings across five levels for six movie genres, highlighting how genre influences rating distributions. The code uses d3.stack() to create the stacked series, d3.scaleOrdinal() for color encoding, and d3.axisBottom() and d3.axisLeft() for axes. Hover interactions trigger tooltip pop-ups displaying exact percentages via d3.format. The visualization renders in SVG, with data loaded from a CSV file containing genre and rating proportions.

Apr 15, 2024
Loading thumbnail…

Fork of Activity6_population q2

This bar chart displays the top 20 countries by population in 2010, sorted in descending order. It uses D3.js v7, loaded via a CDN in the HTML. The visualization fetches data from a CSV file hosted on GitHub, processes it with `d3.csv`, and sorts it before selecting the top 20 entries. The chart is rendered as an SVG using `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleBand` for the y-axis. Bars are drawn as `rect` elements with a width mapped by `d3.scaleLinear` and are colored `steelblue`.

Apr 15, 2024
Loading thumbnail…

activity 6_Task 1

This horizontal bar chart shows the top 10 countries by population in 2000, sorted in descending order, using SVG rectangles rendered with D3 v7. The visualization loads CSV data from a GitHub gist, applies linear and band scales, and formats the x-axis ticks in millions. It includes axis labels for country and population, with bars colored steelblue and hover tooltips provided by native SVG `<title>` elements.

Apr 15, 2024
Loading thumbnail…

Fork of Fork of Activity6_population_question1

This example displays a horizontal bar chart of the top 10 most populous countries in the year 2000, using fetched CSV data parsed with `d3.csvParse`. The visualization sorts the data by population and renders bars via SVG `rect` elements, with axes from `d3.axisBottom` and `d3.axisLeft`. It loads D3 from UNPKG and uses a local ES6 module, `fetchData`, to retrieve the dataset from a GitHub raw URL.

Apr 15, 2024