Skip to main content
Log in
V

Vijay Sheru

@vijaysheru·15 public vizzes

Loading thumbnail…

Question2 Area Chart

This example visualizes stock price trends over time using a filled area chart. The area is drawn in a semi-transparent steel blue, with price on the vertical axis and date on the horizontal axis, where the x-axis labels are rotated for readability. The chart is built with D3 v7, using `d3.scaleTime` and `d3.scaleLinear` for scaling, `d3.area` to generate the area path, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is fetched asynchronously from a remote JSON file containing stock price records.

Apr 20, 2024
Loading thumbnail…

Task9-Pie Chart

This pie chart visualizes grocery item expenditures by category, with each slice colored and labeled by dollar value. The chart is rendered in SVG using D3 v5, with pie segments generated via `d3.pie` and `d3.arc`. Data is fetched from a remote CSV using `d3.csv`, and ordinal color scaling (`d3.scaleOrdinal`) maps categories to a four-color palette. Labels and a legend are positioned manually, with tick text formatted using `d3.format`. The visualization directly conveys relative spending across grocery item types.

Apr 20, 2024
Loading thumbnail…

PieChart Fork

This pie chart visualizes income distribution (above or below $50K) using data from the UCI Adult dataset, loaded via D3’s `d3.csv` from a remote GitHub repository. It computes category counts with `d3.nest()` and `rollup`, then renders SVG arcs using `d3.pie()` and `d3.arc()`. A legend maps label colors via `d3.scaleOrdinal`, while the chart groups slices in a centered `<g>` element.

Apr 19, 2024
Loading thumbnail…

Task8_PieChart

This pie chart visualizes global emissions by gas type using data from the OWID CO2 dataset. The visualization displays proportional slices for each gas category, with a legend mapping color-coded segments to their respective labels. The chart uses D3 v7's `d3.pie`, `d3.rollup`, and `d3.arc` APIs to compute and render the arcs, while `d3.scaleOrdinal` with `d3.schemeSet3` provides the categorical color palette. The SVG output includes interactive-free path elements with white stroke separators and centroid-positioned text labels for each gas type.

Apr 19, 2024
Loading thumbnail…

Piechart of D3.Js

This pie chart visualizes vehicles seized across different U.S. states, with each slice sized proportionally to the seizure count and labeled with scaled values (in thousands). The chart uses D3.js v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to generate SVG paths, slice labels, and a color-coded legend. Data comes from a GitHub-hosted CSV file (penguins.csv) loaded via `d3.csv`, though the dataset contains state-level vehicle seizure figures despite the filename.

Apr 18, 2024
Loading thumbnail…

Fork of Task8

This pie chart displays the breakdown of CO2-equivalent emissions by gas type using data from the Our World in Data CO2 dataset. The visualization uses D3.js v7 with the `d3.pie()` layout to generate arc segments and `d3.rollup()` to aggregate emission sums per gas category. Each slice is rendered as an SVG path via the `d3.arc()` generator, with a categorical color scale (`d3.scaleOrdinal` and `d3.schemeSet3`) distinguishing gas types, and text labels positioned using `arcGenerator.centroid()`. A legend is appended to identify each gas category.

Apr 18, 2024
Loading thumbnail…

Assignment2_D3

This visualization presents a pie chart depicting the number of vehicles seized across different states of the United States. The chart uses a standard donut layout with color-coded slices for each state, displaying the raw count value for each segment. Accompanying the chart is a legend that maps the colors to their respective states and values. The implementation utilizes D3 version 5, specifically the `pie`, `arc`, `scaleOrdinal`, and `format` APIs, to process and render the data as SVG elements. The data is sourced from a CSV file hosted on GitHub, fetched via the `d3.csv` method, and processed to calculate the total before generating the visualization.

Apr 13, 2024
Loading thumbnail…

Question 4 Activity

This bubble chart visualizes the Iris dataset, plotting petal length against sepal length for individual flowers. Circle size encodes sepal width, while color distinguishes the three Iris species (setosa, versicolor, and virginica). The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for position and radius, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom`/`d3.axisLeft` for axes. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file.

Apr 11, 2024
Loading thumbnail…

Activity7_Task3

This scatter plot visualizes the relationship between body mass and flipper length for three penguin species (Adelie, Gentoo, Chinstrap), with each point colored by species using a sequential ordinal color scale. The visualization is built with d3.v7, loading data from a remote CSV file and rendering points as SVG circles. The code uses `d3.scaleLinear` for both axes, `d3.extent` to compute domains, and `d3.axisBottom` and `d3.axisLeft` for the labeled axes.

Apr 11, 2024
Loading thumbnail…

Fork of Hello VizHub Task 2

This stacked bar chart shows the distribution of population across years for the top 10 countries, with each bar segment representing a year's contribution. The visualization uses D3.js v7, employing `d3.stack` with `d3.keys` to create the stacked structure, `d3.scaleLinear` and `d3.scaleBand` for axes, and `d3.axisBottom` and `d3.axisLeft` for ticks. Data is loaded from a CSV file, with `d3.csv` fetching the dataset. The chart renders as SVG, populating rectangles for each segment, and includes a legend and axis labels.

Apr 11, 2024
Loading thumbnail…

Fork of activity 6_Task 1Q2

This example shows a horizontal bar chart of the top 20 countries by population in 2010, with bars sorted in descending order from largest to smallest. The chart uses React components with D3.js scales (d3.scaleBand and d3.scaleLinear) to position bars and axes, while the data is loaded from a CSV file using d3.csv. The x-axis employs d3.format to abbreviate large population values, and the SVG rendering includes axis labels and tick styling.

Apr 10, 2024
Loading thumbnail…

activity 6_Task 1

This horizontal bar chart ranks the ten most populous countries in the year 2000, using bars colored light green against a blue-axis plot. Data is loaded from a CSV via `csv` and sorted in descending order, with the top ten slices selected for display. The chart uses React components (`AxisBottom`, `AxisLeft`, `Marks`) and D3’s `scaleBand` and `scaleLinear` to position bars, while `format(.2s)` converts population values into abbreviated text such as "1.2B".

Apr 10, 2024
Loading thumbnail…

Fork of activity 6_Task 1Q2

This example shows a bar chart of the top 20 countries by population in 2010, sorted in descending order, using a horizontal layout with a linear x-scale and a band y-scale. The chart renders as an SVG in a React app, with D3 v5 handling the data loading via `d3.csv` and the scale creation via `scaleLinear` and `scaleBand`. Axes are custom-built components, and each bar includes a tooltip via the SVG `<title>` element, with the dataset sourced from a GitHub-hosted CSV file.

Apr 10, 2024
Loading thumbnail…

Fork of activity 6_Task 1_Question 2

This example shows a horizontal bar chart of the top 20 countries by population in 2010, sorted in descending order. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning bars. The code imports d3.csv to load data from a GitHub-hosted CSV file, and d3.format to abbreviate axis tick labels (e.g., “B” for billions). Hovering over a bar reveals a tooltip via the native SVG <title> element, and the chart includes styled axes with blue tick lines and green bars.

Apr 10, 2024
Loading thumbnail…

Fork of 2 Buddhas

A fork of the “Buddha in colors” visualization renders an abstract, multicolored Buddha silhouette composed of thousands of overlapping triangular polygons. Each polygon’s position, fill color, and rotation are generated using repeated nested loops and `Math.random()`. The SVG output is built entirely with React `polygon` elements and a static `path` that draws the Buddha’s outline. The code uses React’s `createElement` through JSX, with ReactDOM mounting the component to the page.

Mar 14, 2024