neerajreddyaluka@gmail.com

@NeerajRdy·26 public vizzes

question2

This stacked area chart shows how IMDb movie ratings are distributed across genres, with each genre’s five rating bands (from below 5.0 to above 8.5) stacked to sum to 100%. The visualization uses d3.stack() to compute the layered series and d3.area() with a basis curve to render smooth shapes, while d3.scaleOrdinal assigns distinct colors to each rating category. The SVG chart includes axes, a legend, and a title, and it reads data from a local CSV file using d3.csv().

Apr 29, 2024

Loading thumbnail…

Task 9 question2

This stacked area chart shows the distribution of IMDb ratings across six movie genres, with each genre broken into five rating brackets from “below 5.0” to “above 8.5”. The chart uses d3.stack() and d3.area() with a basis curve, rendering as SVG. A color scale maps each rating category, and an ordinal axis with rotated labels displays genres on the x-axis. The data originates from a CSV file and is loaded via d3.csv.

Apr 29, 2024

Loading thumbnail…

Fork of question1

This example displays a pie chart of population data for ten countries. The chart uses a D3 pie layout to generate arcs, with a legend and percentage labels for each slice. The code imports `d3` functions like `pie`, `arc`, and `format`, and renders via SVG. The data is loaded from a remote CSV file using `d3.csv`, and the visualization is built with React, with the axes drawn separately using custom components.

Apr 29, 2024

Loading thumbnail…

question 1

This example shows a pie chart of population data for ten countries, drawn as SVG arcs with percentage labels and a legend. The visualization is built using React and D3 version 5, leveraging the `pie` and `arc` functions to compute arc segments and `schemeCategory10` for color encoding. Data is loaded from a remote CSV file using `d3.csv`, with population values scaled by ten, and labels are formatted as percentages. The chart includes axis labels, although the implementation mixes pie and bar chart styling, creating a hybrid visual.

Apr 29, 2024

Loading thumbnail…

Task8_Question4

This visualization displays the maximum price of electric vehicles for each brand as a bubble chart, with the y-axis and bubble size both encoding price. It uses a categorical x-axis for brand names, which are rotated for readability. The code loads CSV data with `d3.csv`, groups data by brand using `d3.group`, and finds the maximum price per brand. It renders SVG circles with position determined by `d3.scaleBand` and `d3.scaleLinear`, and encodes price through both the radius (`d3.scaleSqrt`) and color (`d3.scaleSequential` with `d3.interpolatePlasma`). Axes are added using `d3.axisBottom` and `d3.axisLeft`.

Apr 17, 2024

Loading thumbnail…

Activity6_Question4

This visualization compares rating distributions across movie genres through a bubble chart, showing the percentage of films falling into five rating bands from "below 5.0" to "above 8.5" for categories like Documentary, Drama, and Action. Each genre's mid-range rating share (6.5-7.5) is mapped to both the vertical position and bubble radius, while color distinguishes genres. Built with d3.v7, the chart uses d3.scaleBand and d3.scaleLinear for axes, d3.scaleOrdinal for colors, and features CSS-driven hover effects with a custom tooltip displaying complete rating breakdowns for each genre. Data comes from a CSV file containing proportional ratings per genre.

Apr 15, 2024

Loading thumbnail…

Activity6_question4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle represents a car make, positioned by its horsepower and torque values, while the circle's size reflects its highway MPG and its color distinguishes the make. The chart uses d3.scaleLinear for axes and bubble size, and d3.scaleOrdinal for color mapping. Interactive tooltips display the make on hover, and a legend shows the MPG scale and color categories. The data is loaded from a CSV file using d3.csv.

Apr 15, 2024

Loading thumbnail…

Activity6_Question4

Apr 15, 2024

Loading thumbnail…

Activity6_Question4

This stacked bar chart shows the percentage of IMDb ratings within each of six movie genres, with each bar segmented by five rating brackets from “below 5.0” to “above 8.5.” Hovering a segment reveals its exact percentage via a tooltip. Built with D3 v7, the visualization uses `d3.stack`, `d3.scaleOrdinal`, and `d3.scaleBand` to render the horizontal bars as SVG, with data loaded from a local CSV file.

Apr 15, 2024

Loading thumbnail…

Activity6_Question3

This scatter plot visualizes the Iris dataset, mapping sepal length and sepal width for three species (setosa, versicolor, virginica) as colored circles. Using D3 v6 via UNPKG, it employs `csv` to load data, `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick labels, and `select` to build an SVG. The plot is responsive, sized to the browser window, and styled with a red, centered title.

Apr 15, 2024

Loading thumbnail…

Activity6Question2

This stacked bar chart visualizes the Iris dataset, showing the average measurements of sepal length, sepal width, petal length, and petal width for each of the three iris species. The code uses d3.csv to load the data, d3.stack to group the four numeric attributes into layers, and d3.scaleBand and d3.scaleLinear to map species and cumulative values. Rendered as SVG, each colored segment represents one measurement category, with axes added via d3.axisBottom and d3.axisLeft.

Apr 15, 2024

Loading thumbnail…

Activity6_question2

This stacked bar chart displays the percentage distribution of movie ratings across five genres, with each bar segmented into five rating categories from below 5.0 to above 8.5. The chart reveals how genre influences rating patterns, such as Documentaries having the highest proportion of high ratings, while Action films show the largest share of low ratings. Hovering over a segment displays the exact percentage via a tooltip. The visualization uses d3.v7 with SVG rendering, employing `d3.stack`, `d3.scaleOrdinal`, and `d3.scaleLinear` to construct the stacked bars from the CSV data.

Apr 15, 2024

Loading thumbnail…

Acitivty6_Question2

This scatter plot of the Iris flower dataset compares petal length and petal width, representing each species with a distinct color and a legend for identification. Rendered as SVG circles, hovering over a point displays a tooltip with the species and the exact measurements. The visualization uses D3.js v7 to load data from a local CSV file, position the points via `d3.scaleLinear` and `d3.extent`, and add axes with `d3.axisBottom` and `d3.axisLeft`. An ordinal color scale via `d3.scaleOrdinal` maps species to colors, while D3's `transition` API animates the tooltip's opacity.

Apr 15, 2024

Loading thumbnail…

Activity6_Question1.2

This example shows a horizontal bar chart comparing the 2020 populations of twenty countries, ranked in descending order. The visualization uses React to render SVG elements, with D3 v5 (d3.scaleBand, d3.scaleLinear, d3.csv, d3.format) handling data loading and scaling. Bars are drawn as rectangles, with axis components for bottom and left labels, and a tooltip showing abbreviated population values. The dataset is fetched from a remote CSV file and processed to convert population figures to absolute numbers.

Apr 15, 2024

Loading thumbnail…

Activity6_Question1

This bar chart displays the population of ten countries in the year 2020, with country names on the vertical axis and population values on the horizontal axis. The chart uses React with D3 v5 scales, including `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the quantitative axis, rendering SVG rectangles. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and axis ticks are formatted using `d3.format`. Hovering over a bar reveals a tooltip with the population value.

Apr 15, 2024

Loading thumbnail…

Activity6_task1

This example shows a horizontal bar chart ranking the 2020 populations of 30 countries, drawn with SVG in a React component. The chart uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population values, with formatted tick labels via `d3.format`. The data is loaded asynchronously from a CSV using `d3.csv` and rendered through a custom `Marks` component that creates SVG rectangles with tooltips. The visualization demonstrates combining D3’s data-joining and scales with React’s component structure.

Apr 15, 2024

Loading thumbnail…

Activity6_task1

This example displays a horizontal bar chart of the top 30 countries by 2020 population. The visualization uses the D3 version 5 library with `scaleBand` and `scaleLinear` to map data from a CSV file to SVG rectangles. The React component defines axes with `AxisBottom` and `AxisLeft`, formatting tick labels from scientific notation to billions. Each bar includes a tooltip showing the population value, with data loaded asynchronously via a custom `useData` hook that fetches from a GitHub repository.

Apr 15, 2024

Loading thumbnail…

Activity6_Question2

This bar chart displays the population of 20 countries in 2020, with countries listed along the vertical axis and population values extending horizontally. The visualization uses React components to render SVG rects, with D3 v5’s `scaleBand` and `scaleLinear` handling the axes and data mapping. Population values are read from a remote CSV file using D3’s `csv` function, and formatted with `format('.2s')` to display values in billions. The chart includes axis labels and tooltips showing the exact population for each bar.

Apr 15, 2024

Loading thumbnail…

Activity_6_population

This horizontal bar chart displays the populations of ten countries for the year 2000, sorted by country name. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with formatted tick labels converting large numbers to billions. Data loads from a CSV via D3's `csv` function, and bar tooltips show the exact population value in abbreviated format.

Apr 15, 2024

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to structure a minimal D3.js visualization using ES6 modules and external libraries. It loads D3 v5 via UNPKG and uses the `select` API to update the text content of a `div` element with the ID `message`. The text itself is imported from a local ES6 module, showcasing modular code organization in a browser-based project. A CSS file centered styles the message with a large font size.

Apr 12, 2024

Loading thumbnail…

Fork of Activity6_Task4

A bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes. Each circle's x-position maps to horsepower, the y-position to torque, and its radius encodes highway MPG from the CSV data. The chart is built with D3 v7, using `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color encoding, and an interactive tooltip that displays the make on hover. SVG elements render the graph and legend, with animated transitions on tooltip appearance.

Apr 12, 2024

Loading thumbnail…

Activity6_Task4

This example demonstrates the use of ES6 modules and D3.js in a VizHub project. It imports the `select` function from D3 via UNPKG and a local module named `myMessage.js` to set the text content of a div element. The code also declares unused variables and a regular expression. The page is styled with centered, large-font text using the `styles.css` file. The focus is on modular code organization and basic DOM manipulation with D3.

Apr 12, 2024

Loading thumbnail…

Activity6_Task3.2

This D3.js scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. Each point's shape encodes the flower species, with a custom legend created using D3's `symbol` generator and `scaleOrdinal` with `symbolsFill`. The chart uses `scaleLinear` for axes, along with `axisLeft` and `axisBottom` for tick marks. Data is loaded via `csvParse` from a remote URL, and the visualization updates dynamically using D3's `select` and `.join` pattern for DOM manipulation.

Apr 12, 2024

Loading thumbnail…

Activity6_Task3

This example visualizes the Iris dataset as a scatter plot, using points with distinct symbols to represent different flower species. It maps sepal length to the x-axis and petal length to the y-axis, with a legend identifying each species. The visualization loads data from a remote CSV file via `d3.csvParse` and uses a custom D3 v7 setup with ES6 modules. It leverages `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbolsFill`, `d3.symbol`, and `d3.axisLeft` and `d3.axisBottom` to render the chart and its axes, with the plot resizing to the full window.

Apr 12, 2024

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5." The visualization highlights how genre influences rating patterns, such as documentaries having a larger share of high ratings compared to action films. Hovering over a bar segment displays the exact percentage for that rating category within the genre. The chart is rendered as an SVG using D3.js, employing `d3.stack`, `d3.scaleOrdinal`, and `d3.scaleBand` to construct the stacked layout, with the data loaded from a CSV file.

Apr 12, 2024

Loading thumbnail…

Activity 6_Task 1

This visualization displays the populations of 30 countries for the year 2020 as a horizontal bar chart, with each bar’s length proportional to its population value. The chart is rendered as an SVG using React components, with D3 v5’s `scaleBand` and `scaleLinear` handling the y-axis categories and x-axis scaling respectively. Population values are formatted with D3’s `format('.2s')` to abbreviate large numbers, converting gigabytes to billions for tick labels. The data is loaded via `d3.csv` from a GitHub-hosted CSV file, and axis ticks and bars are styled with custom CSS classes.

Apr 12, 2024