P

peramranji

@peramranji·50 public vizzes

Loading thumbnail…

Activity 7 Q2

This area chart shows the number of car listings per year in a USA cars dataset, revealing trends in vehicle availability over time. The visualization uses a monotone curve to connect yearly counts, with a steelblue fill beneath the line. The code imports `csv`, `scaleLinear`, `area`, `curveMonotoneX`, and `group` from D3 v6 to load the data, aggregate counts by year, and render the chart as an SVG. Axes and labels are created via `axisBottom` and `axisLeft`, with the dataset sourced from a raw GitHub URL.

Loading thumbnail…

Activity 7

A pie chart visualizes the distribution of housing data by ocean proximity, with each slice colored and labeled to show the count of homes in each category. The chart includes a title and a legend displaying category names with their corresponding counts. Built with D3.js (v6), the visualization loads CSV data from a GitHub repository, uses `d3.pie` and `d3.arc` to generate the pie slices, and applies `d3.scaleOrdinal` with `schemeCategory10` for colors. The SVG rendering includes slice labels positioned via `arc.centroid` and interactive hover-free styling.

Loading thumbnail…

Activity 7.1 Tutorial

This animated scatter plot, driven by D3 v6, cycles through six World Happiness Report indicators from a 2019 CSV dataset. It visualizes the relationship between each indicator and the Happiness Score, updating the x-axis and labels every five seconds. The reusable `scatterPlot` function leverages D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to render SVG circles and axes, with the data sourced from a GitHub-hosted CSV.

Loading thumbnail…

Activity 7 Q1

This donut chart shows the distribution of housing data by ocean proximity using a dataset from a GitHub repository. The visualization displays categorical slices of a pie, each colored by its category, with direct labels on the segments and a legend showing category names and counts. The example is built with D3 version 6, utilizing `group`, `pie`, `arc`, and `scaleOrdinal` to process CSV data and generate the chart, which is rendered as SVG. The title "Housing Distribution by Ocean Proximity" is displayed above the chart.

Loading thumbnail…

Reusable Scatter plot Activity 8

This chart displays the proportional distribution of car conditions using a pie chart. The visualization uses a categorical color scale for each condition and includes labels on the slices, a chart title, and a legend with counts. It is built with d3’s `select`, `arc`, `pie`, `scaleOrdinal`, and `schemeCategory10` APIs, rendering as an SVG. Data is loaded from a remote CSV file via `csv()`. The pie slices are drawn with `arcGen` and `pieGen`, with each slice labeled and colored accordingly.

Loading thumbnail…

Tutorial Task 4

This visualization displays the correlation between average horsepower, torque, and highway MPG across various car makes. Each bubble’s position maps horsepower on the x-axis and torque on the y-axis, while its size and color encode fuel efficiency via a linear scale and a sequential viridis color scale. The code uses d3.csv to load data, d3.scaleLinear for axes and radii, and d3.scaleSequential for coloring. Interactive tooltips appear on mouseover, and a gradient legend clarifies the MPG color mapping.

Loading thumbnail…

Task 6.2

This example shows a stacked horizontal bar chart comparing five sports across five attributes—Popularity, Physical Intensity, Strategy, Teamwork, and Entertainment Value—using data from a CSV file. The visualization uses D3 v7 with SVG rendering, employing `d3.stack()` to create stacked segments, `d3.scaleOrdinal()` for color mapping, and `d3.scaleBand()` for the categorical y-axis. Hovering over any segment triggers a tooltip displaying the exact percentage for that attribute, while the chart includes a legend and axis labels for clarity.

Loading thumbnail…

tutorial task 2

This visualization shows the distribution of IMDb movie ratings across six genres, with stacked horizontal bars displaying the percentage of movies in five rating categories from below 5.0 to above 8.5. The code uses D3 v7’s `d3.stack()` to compute the stacked data, `d3.scaleOrdinal` for color mapping, and `d3.scaleBand`/`d3.scaleLinear` for axes. An interactive tooltip appears on mouseover, showing the exact percentage for each genre-rating segment. Data comes from the local `data.csv` file, and the SVG is rendered with custom styling from `styles.css`.

Loading thumbnail…

Tutorial task 3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three flower species color-coded as setosa, versicolor, and virginica. Using D3.js v6, the visualization maps each data point to a circle with coordinates scaled by d3.scaleLinear and d3.extent domains. The SVG rendering includes custom axis labels from d3.axisLeft and d3.axisBottom, while circles are drawn with d3.selectAll and the join pattern. Data loads asynchronously from a GitHub-hosted CSV file via d3.csv.

Loading thumbnail…

Fork of Task 6.2

A stacked bar chart displays the percentage distribution of fruit ratings across five categories, from "Below 1.0" to "Above 4.0," for nine fruit types. The visualization uses d3.stack() to compute stacked series, with d3.scaleOrdinal and a custom color palette mapping each rating category. Rendering as SVG, the chart includes axes via d3.axisBottom and d3.axisLeft, and an interactive tooltip that appears on mouseover via d3.select and event listeners. Data is loaded from a CSV file and formatted using d3.format.

Loading thumbnail…

Activity 6 _Task 1 _ Q.1.2

This horizontal bar chart shows the population of 20 countries in 2010, ordered along a categorical y-axis and scaled linearly on the x-axis. Each light blue bar represents a country’s population, with tick labels formatted in billions (e.g., “1.2B”) using `d3.format`. The visualization uses D3 v7 to create SVG elements, with the `scaleBand` for country categories and `scaleLinear` for population values. Data is loaded asynchronously from a CSV file via `d3.csv`, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with custom labels for population and countries.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This animated scatterplot cycles through four Iris flower measurements, showing petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length fixed on the y-axis. The D3.js code uses the `scatterPlot` reusable function to scale and render axes, while circles are colored by species—setosa in skyblue, versicolor in lightgreen, and virginica in orange. A rotating interval updates the x-axis mapping, and the SVG rendering includes a title, legend, and axis labels styled inline.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble's position maps horsepower on the x-axis and torque on the y-axis, while its size and color encode highway MPG and make, respectively. Built with D3 v7, the visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` to map data attributes. It reads from a CSV file and includes an animated tooltip on hover, plus a legend for size and color scales.

Loading thumbnail…

Activity6_Task3

This visualization is a scatter plot of the Iris dataset, displaying sepal length on the x-axis and petal length on the y-axis. Points are colored by species (floralis, tropica, and sylvan), with a legend implied by the color scale. The plot uses the D3.js library (v7) and renders as an SVG. It loads data from a local CSV file, applies linear scales to both axes, and uses an ordinal color scale with the `schemeCategory10` palette to differentiate the three species.

Loading thumbnail…

Activity 6 t2

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, with each bar segment representing the percentage of titles falling into rating brackets from below 5.0 to above 8.5. The visualization uses d3.stack() to compute the stacked series, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the percentage x-axis. A tooltip, built with HTML div elements and styled via CSS, appears on mouseover to display the exact percentage for any segment. The chart is rendered as SVG using D3 v7, with data loaded from a CSV file.

Loading thumbnail…

Activity 6_Task 1

This chart is a horizontal bar chart showing the populations of ten countries in the year 2000, with the x-axis labeled "POPULATION-2000" using a custom tick format that converts large numbers to a scaled abbreviation (e.g., 'B' for billion). The y-axis lists country names, and hovering over a bar displays its exact population via a tooltip. Built with React and D3 v5, it uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis, rendering the bars as SVG rectangles. The data is loaded asynchronously from a remote CSV file using D3’s `csv` function.

Loading thumbnail…

Activity 6_Task 1

This example shows a horizontal bar chart of population counts for up to 30 countries using data pulled from a CSV file. The visualization uses D3 v7 scales to map countries to vertical bands and population values to horizontal bar widths, with the bars rendered using SVG `<rect>` elements. The code builds the chart by appending axes and marks to a React-managed SVG, leveraging helper components for the bottom and left axes. The underlying data is fetched via D3’s `csv` function and preprocessed to convert population figures.

Loading thumbnail…

Activity6_Task2

This stacked horizontal bar chart visualizes the distribution of age groups across different continents, with each bar representing a continent and segments colored by age bracket. The visualization uses a D3.js v7 SVG rendering with `d3.stack()` to compute the stacked segments, `d3.scaleOrdinal()` for color mapping, and `d3.scaleBand()`/`d3.scaleLinear()` for axes. Tooltips, implemented via mouseover events, display the exact percentage for each segment, with x-axis labels indicating percentage values. Data is loaded from a CSV file containing pre-calculated proportions per continent.

Loading thumbnail…

Fork of Hello VizHub

This fork of “Hello VizHub” displays a scatter plot of a two-feature dataset loaded from a CSV file, with points colored by category. It uses D3.js v6 functions like `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles, with green axis labels and a red, underlined title. The visualization resizes to the full browser window and plots each row’s feature_1 against feature_2.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes vehicle performance by plotting horsepower on the x-axis, torque on the y-axis, and encoding highway MPG through bubble size. Each bubble represents a car make, colored via a d3.scaleOrdinal with d3.schemeTableau10. The visualization uses d3.csv to load local data, d3.axisBottom and d3.axisLeft for axes, and interactive tooltips triggered by mouseover events to display detailed vehicle specifications. Hovering highlights bubbles with increased stroke width through CSS transitions.

Loading thumbnail…

Activity6_Task4

This interactive bubble chart visualizes the relationship between horsepower, torque, and highway MPG for 31 car makes. Each circle is positioned by horsepower on the x-axis and torque on the y-axis, while its radius encodes highway MPG and its color represents the manufacturer. The chart uses d3.csv to load data and d3.scaleLinear for positioning and sizing. Hovering over a bubble triggers a tooltip displaying the make's exact specifications. A legend identifies each make, and axes are labeled with descriptive titles. The implementation uses d3.axisBottom, d3.axisLeft, and d3.schemeTableau10, rendering SVG circles with animated transitions via CSS.

Loading thumbnail…

Fork of activity 6_Task 1 Q2

This chart displays the populations of 20 countries in 2010 using a horizontal bar chart. The bars are ordered from largest to smallest population, with countries on the y-axis and population values on the x-axis. The visualization is built with D3 v5, using `d3.scaleLinear` and `d3.scaleBand` for axis scaling, while `d3.axisBottom` and `d3.axisLeft` create the axes. Data is loaded asynchronously from a CSV file with `d3.csv` and rendered as SVG rectangles.

Loading thumbnail…

activity 6_Task 1 Q2

This example shows a horizontal bar chart of the top 20 countries by population in 2010, sorted in descending order. Each bar’s length encodes population using a d3.scaleLinear, while country names are positioned on a d3.scaleBand axis. The visualization uses D3 v5 to append SVG rectangles, with d3.axisBottom and d3.axisLeft for labeled axes. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and the styling uses purple bars with green axis labels in a white, card-like container.

Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). Built with d3.csv, d3.scaleLinear, d3.axisLeft, and d3.axisBottom, the SVG rendering uses circles positioned via data joins. Although the code defines sepal dimensions as rx and ry attributes, it ultimately applies a fixed radius of 5 pixels, so sepal values do not affect the visual output.

Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored by species (setosa, versicolor, or virginica). The visualization uses D3 v6 with SVG rendering, employing scaleLinear, axisLeft, and axisBottom to construct the axes. Data is loaded via d3.csv from a remote GitHub URL, and circles are drawn using the select, data, and join pattern. The plot also records sepal measurements in each data point, though these are not visually encoded.

Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). Built with d3.csv, d3.scaleLinear, d3.axisLeft, and d3.axisBottom, the SVG rendering uses circles positioned via data joins. Although the code defines sepal dimensions as rx and ry attributes, it ultimately applies a fixed radius of 5 pixels, so sepal values do not affect the visual output.

Loading thumbnail…

Fork of Activity6_Task3

A scatter plot maps sepal length against petal length for iris flowers, using distinct symbols to encode species and a custom legend for identification. Built with D3 v7, the visualization fetches CSV data from a GitHub repository, parses it, and renders marks via the `symbol` generator with `symbolsFill` shapes. Axes are managed through reusable modules, and an ordinal color scale from `schemeCategory10` colors each species, with legends positioned statically.

Loading thumbnail…

Fork of Activity6_Task3

A scatter plot maps sepal length against petal length for iris flowers, using distinct symbols to encode species and a custom legend for identification. Built with D3 v7, the visualization fetches CSV data from a GitHub repository, parses it, and renders marks via the `symbol` generator with `symbolsFill` shapes. Axes are managed through reusable modules, and an ordinal color scale from `schemeCategory10` colors each species, with legends positioned statically.

Loading thumbnail…

Fork of Activty_6 T1

This bar chart displays the population of 20 countries in 2010, with countries listed along the vertical axis and horizontal bars representing population values. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning, while CSV data is loaded via `d3.csv` from a remote GitHub repository. The SVG rendering includes custom axis components and rectangles for marks, with tooltips formatted using D3’s `format` function to abbreviate large numbers.

Loading thumbnail…

Fork of Fork of Activty_6 T1

This bar chart visualizes the top 20 countries by population in 2010, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, rendering SVG rectangles with tooltips. The code imports data via `d3.csv` and applies custom tick formatting to abbreviate large numbers.

Loading thumbnail…

Fork of Activty_6 T1

This bar chart displays the population of 20 countries in 2010, with countries listed along the vertical axis and horizontal bars representing population values. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning, while CSV data is loaded via `d3.csv` from a remote GitHub repository. The SVG rendering includes custom axis components and rectangles for marks, with tooltips formatted using D3’s `format` function to abbreviate large numbers.

Loading thumbnail…

Activty_6_t1

A horizontal bar chart displays the 2010 population of 20 countries, sorted by name, with a green bar for each nation. Using React, the visualization builds a D3 v5 SVG with scales from `d3.scaleBand` and `d3.scaleLinear`. Population values are formatted with `d3.format` (converting gigabytes to billions). The code imports data via `d3.csv`, renders axes via custom React components, and includes a tooltip showing the formatted value on each bar.

Loading thumbnail…

Fork of Tutorial 1

This is a horizontal bar chart showing the populations of the top 10 countries in the year 2000. Built with D3 v7, the visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. The bars are rendered as SVGs using `d3.axisBottom`, `d3.axisLeft`, and `d3.selectAll` to draw rectangles. Data is loaded asynchronously via `d3.csv` from a remote GitHub repository.

Loading thumbnail…

Tutorial 1

A horizontal bar chart displays the top ten countries by population in the year 2000, sourced from a local CSV file. Bars are rendered as SVG rectangles using D3 v7’s scaleBand for the categorical country axis and a linear scale for population values. The chart includes formatted axis ticks via d3.axisBottom with a .2s format, a left axis, and a centered axis label. Data is loaded asynchronously with d3.csv and processed in a useData function.

Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This example displays Fisher’s iris dataset as a scatter plot of sepal versus petal length, encoding species with different filled shapes. It builds on D3 v7 APIs—d3.scaleOrdinal, d3.symbolsFill, d3.symbol, and axis functions—to generate custom SVG paths for each mark and a dedicated shape legend. A reusable axes module applies left and bottom scales with labeled axes. Data is loaded as CSV from a GitHub repository and parsed with d3.csvParse before being converted to numeric values.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while using circle color to distinguish the three flower species. It is rendered as an SVG using D3 version 6, with the `d3.csv` driver to load remote data and `scaleLinear`, `axisLeft`, and `axisBottom` to create the axes. Each circle’s radius is fixed, and the chart includes color-coded markers for species, making class separation immediately visible.

Loading thumbnail…

Fork of 6.2

This is a stacked horizontal bar chart showing the percentage distribution of movie ratings across five genres (Adventure, Fantasy, Sci-Fi, Thriller) and five rating categories (Action, Comedy, Drama, Horror, Romance), based on IMDb data. The chart uses D3.js v7 with the `d3.csv` loader to read `data.csv`, `d3.stack()` to create the stacked bars, and `d3.scaleOrdinal` for color mapping. Hovering over a segment triggers a tooltip displaying the precise percentage, while a legend on the right identifies each rating category.

Loading thumbnail…

6.2

This chart shows the distribution of IMDb movie ratings across six genres, using a stacked horizontal bar chart where each bar segment represents the percentage of movies in a rating range, such as below 5.0 or above 8.5. The data is loaded from a CSV file and rendered as SVG dynamically using D3 v7. The visualization employs `d3.stack`, `d3.scaleOrdinal` for color mapping, and `d3.scaleBand` for the y-axis. Interactive tooltips, built with `d3.select` and positioned via `event.pageX`, reveal exact percentages on mouseover.

Loading thumbnail…

Fork of Activity 7

A horizontal bar chart ranks 30 countries by total population in 2020, using green bars on a white background with blue axis ticks. The chart uses React with D3 v5’s `scaleBand` and `scaleLinear` to map data from a CSV hosted on GitHub, rendered as SVG `<rect>` elements. D3’s `format` function converts population values to abbreviated labels, and native SVG `<title>` elements provide hover tooltips.

Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 displays a horizontal bar chart of the top 30 countries by 2020 population, using a diverging green color for the bars. It fetches data from a CSV file via `d3.csv`, then renders with React and SVG, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. `d3.format` provides tick labels, while custom React components define the axes and bar marks with `<title>` tooltips. The visualization highlights a clean, minimal style with Poppins font and styled grid lines.

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, with each bubble’s size encoding fuel efficiency and its color representing the manufacturer. Built with D3 v7, it uses `d3.csv` to load the dataset, `d3.scaleLinear` for axes and bubble sizing, and `d3.scaleOrdinal` for color mapping. Circles are rendered as SVG elements with tooltips on mouseover, while legends for both bubble size and make colors are included. Hover interactions are managed via event listeners, and the chart animates tooltip transitions.

Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This example visualizes the Iris flower dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis. Each point’s shape encodes the species using `d3.symbol` with a `scaleOrdinal` that draws from `symbolsFill`, and a custom legend displays the shape-to-species mapping. The code manages axes and labels through a dedicated `axes` module using `axisLeft` and `axisBottom`, while the plot renders data fetched as a CSV and parsed with `csvParse` before scaling values with `scaleLinear`.

Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This example displays Fisher’s iris dataset as a scatter plot of sepal versus petal length, encoding species with different filled shapes. It builds on D3 v7 APIs—d3.scaleOrdinal, d3.symbolsFill, d3.symbol, and axis functions—to generate custom SVG paths for each mark and a dedicated shape legend. A reusable axes module applies left and bottom scales with labeled axes. Data is loaded as CSV from a GitHub repository and parsed with d3.csvParse before being converted to numeric values.

Loading thumbnail…

Fork of Activity 7

This bar chart displays the 2020 population of 30 countries, sourced from a CSV file fetched via `d3.csv`. The visualization uses D3 scales (`scaleBand`, `scaleLinear`) and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) to render the SVG. Horizontal bars are drawn as `<rect>` elements, with tooltip text showing formatted values using D3’s `format` function. The chart includes styled gridlines, axis labels, and a "POPULATION-2020" title, all rendered through React’s declarative component structure.

Loading thumbnail…

Fork of IMDb Movie ratings

A forked stacked bar chart compares IMDb rating distributions across six movie genres. Each horizontal bar shows the proportion of titles falling into five rating brackets, from below 5.0 to above 8.5, with color-coded segments and an interactive tooltip displaying exact percentages on hover. The visualization uses d3.stack() to compute stacked series, d3.scaleOrdinal for categorical colors, and d3.scaleBand for the genre axis. Data comes from a local CSV file, rendered as SVG with mouseover events controlling tooltip visibility.

Loading thumbnail…

Fork of IMDb Movie ratings

A forked stacked bar chart compares IMDb rating distributions across six movie genres. Each horizontal bar shows the proportion of titles falling into five rating brackets, from below 5.0 to above 8.5, with color-coded segments and an interactive tooltip displaying exact percentages on hover. The visualization uses d3.stack() to compute stacked series, d3.scaleOrdinal for categorical colors, and d3.scaleBand for the genre axis. Data comes from a local CSV file, rendered as SVG with mouseover events controlling tooltip visibility.

Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 visualizes the populations of 20 countries for a chosen year (2010 or 2000) as horizontal bar charts. Using React with D3 v5 scales (scaleBand and scaleLinear), it renders SVG rectangles whose widths map to population values, with formatted axis ticks and tooltips. The data is loaded from a remote CSV file via D3's `csv` function and limited to the first 20 rows.

Loading thumbnail…

Activity 6

This visualization displays the 2020 populations of 30 countries as a horizontal bar chart, using a band scale for country names and a linear scale for population values. The chart shows bars in light green with blue tick marks on the axes, and includes a tooltip formatted with D3's `format` API to abbreviate large numbers (e.g., "1.2B"). Built with React and D3 v5, the code explicitly uses `scaleBand`, `scaleLinear`, and `max`, while a custom `useData` hook fetches CSV data from a GitHub repository. The SVG is rendered via React components (`AxisBottom`, `AxisLeft`, `Marks`).

Loading thumbnail…

Activity 6

This visualization displays the 2020 populations of 30 countries as a horizontal bar chart, using a band scale for country names and a linear scale for population values. The chart shows bars in light green with blue tick marks on the axes, and includes a tooltip formatted with D3's `format` API to abbreviate large numbers (e.g., "1.2B"). Built with React and D3 v5, the code explicitly uses `scaleBand`, `scaleLinear`, and `max`, while a custom `useData` hook fetches CSV data from a GitHub repository. The SVG is rendered via React components (`AxisBottom`, `AxisLeft`, `Marks`).

Loading thumbnail…

Fork of Activity 7 Scatter Plot

A scatter plot visualizes the Iris dataset, showing petal length against petal width for each flower, with points colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The code, built with D3 v6, loads data via `d3.csv` from a GitHub gist, scales with `scaleLinear`, and renders SVG circles with `axisLeft` and `axisBottom`. It also stores sepal measurements in each point’s attributes but does not display them.