Skip to main content
Log in
C

Chaitanya Ratan Sree

@chaaiitanya·22 public vizzes

Loading thumbnail…

Area Chart

This example visualizes monthly website visitor counts over a five-year period, using a smooth area chart with a green fill and an overlaid orange line. The D3 v5 code loads CSV data from a GitHub Gist, parses the year field as dates, and renders the SVG chart on a 930×450 canvas. It employs `scaleTime`, `scaleLinear`, `area`, and `line` generators with `curveBasis` for smoothing, while `axisBottom` and `axisLeft` add labeled ticks with gridlines. Styling is handled via CSS classes for the area and line paths.

Nov 6, 2024
Loading thumbnail…

Fork of Area Chart Activity 8

A fork of an area chart example, this visualization displays the cost of sales from 2000 to 2013 using D3 version 5. The SVG rendering uses `d3.area` and `d3.line` with a basis curve to create a smoothed area chart, with axes labeled using `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV file containing monthly website visitors, with the year parsed as a date and cost as a number. The chart employs red tick text, orange axis labels, and a light green fill for the area.

Nov 6, 2024
Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

An animated scatter plot of the Iris dataset cycles through four floral measurements on the x-axis while hovering over the y-axis, with points colored by species. The visualization uses D3.js to load CSV data, apply linear scales, render SVG axes and circles, and update the chart every second via `setInterval`. A custom reusable `scatterPlot` function manages the chart structure, while the code dynamically adds axis labels, a color legend, and a title.

Nov 6, 2024
Loading thumbnail…

Fork of ICE 7 Area Chart

This example visualizes the sales of cars in India from 2009 to 2019 as a combined line and area chart. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map years and sales values, while d3.line and d3.area with curveBasis generate the smooth line and shaded region. The data is loaded from a CSV file via d3.csv and parsed with d3.timeParse. The chart includes labeled axes with gridlines, and the line and area are styled distinctly to highlight the trend over time.

Nov 6, 2024
Loading thumbnail…

Fork of ICE 7 Area Chart

This example visualizes car sales in India from 2009 to 2019 using a combined line and area chart. The line traces the sales trend over time, while the orange area beneath it emphasizes the magnitude. The chart uses D3 v5 with `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `line` and `area` generators with `curveBasis` for smoothing. Data is loaded from a CSV file and parsed with `d3.timeParse`.

Nov 6, 2024
Loading thumbnail…

Pie Chart

This pie chart visualizes the basic cost of each country, with slices colored by country and a legend displaying names and dollar amounts. The D3.js v5 code loads CSV data from a GitHub gist and uses `d3.pie` and `d3.arc` to generate the SVG paths, with `d3.scaleOrdinal` and `schemeCategory10` for colors. A hover event logs the country and cost to the console, while the legend is built from the same pie data.

Nov 6, 2024
Loading thumbnail…

Fork of Pie Chart

A pie chart visualizes 2022 US auto sales by brand, colored by country of origin. The D3.js v5 code loads comma-separated data from a GitHub gist, converts the basic cost values to numbers, and uses `d3.pie` and `d3.arc` to generate SVG path segments. A categorical color scale (`d3.scaleOrdinal` with `schemeCategory10`) fills each slice. The chart includes an interactive legend on the right, where hovering over a slice logs the country and cost to the console, and legend entries display brand names with formatted dollar amounts.

Nov 6, 2024
Loading thumbnail…

Fork of Pie Chart

This fork of a D3.js pie chart visualizes the basic cost of Netflix subscriptions across ten countries, using a categorical color scheme. The chart renders as an SVG with a legend listing each country and its cost in dollars, and the data is loaded from a remote CSV file. The code uses D3 v5 modules including `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` to compute the pie segments, along with React for the page structure.

Nov 6, 2024
Loading thumbnail…

Fork of Pie Chart

This example visualizes the basic cost of Netflix subscriptions across ten countries, using a pie chart with a legend displaying each country’s name and its cost in U.S. dollars. The data is loaded from a CSV file via `d3.csv`, then processed with `d3.pie` and rendered using `d3.arc` paths. Colors are assigned with `d3.scaleOrdinal` and `d3.schemeCategory10`, while the SVG output is built in a React framework with D3 v5, and hover events log the selected value to the console.

Nov 6, 2024
Loading thumbnail…

Pie Chart

This example shows a basic pie chart of `basic_cost` values by country, using a Tableau10 color scale for each slice and text labels positioned at the arc centroids. The chart is rendered as an SVG within a 500×500 pixel container, with data loaded from a CSV hosted in a GitHub gist. Built with D3 v7, it creates the pie geometry with `d3.pie()` and `d3.arc()`, applies colors via `d3.scaleOrdinal`, and uses `d3.select` to set up the SVG group. The data parsing makes `basic_cost` numeric before generating the arcs.

Nov 6, 2024
Loading thumbnail…

Pie Chart

This example starts with a minimal HTML page and styled message, but its core focus is a React starter template. The code uses the React library to render a simple component, while the page itself relies on standard CSS and JavaScript. The rendering approach is straightforward DOM manipulation through React’s declarative component model. The visualization demonstrates a basic framework setup rather than a data-driven chart, with the visible output limited to the static text "Hello HTML!" styled at a large font size. No external data sources or charting libraries are involved.

Nov 6, 2024
Loading thumbnail…

Pie Chart

This pie chart visualizes the basic costs associated with the top 10 countries from a CSV dataset. It shows each country as a proportional slice of the pie, with values formatted in dollars and a legend listing country names and their corresponding costs. Hovering over a slice triggers a tooltip displaying the country and its cost. Built with D3 v7, the visualization uses the `pie` and `arc` functions to generate the chart, `scaleOrdinal` and `schemeCategory10` for color assignment, and SVG rendering for output.

Nov 6, 2024
Loading thumbnail…

Activity6_Task3

This example demonstrates how to build a visualization with D3 v5 and ES6 modules in VizHub. It loads D3 via UNPKG and uses `import { select } from 'd3'` to manipulate the DOM, setting the text content of a `div` element via `select('#message').text(message)`. A local ES6 module (`myMessage.js`) exports a string that is displayed. The example also includes a CSS stylesheet for layout, showing a basic template for combining external libraries, modular JavaScript, and styling in a single project.

Oct 23, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the percentage distribution of genre ratings (Action, Comedy, Drama) across four movies, with the title “Rating according to genres.” Using D3 v7, the code reads CSV data, applies a linear x-scale for percentages and a band y-scale for movie names, and renders SVG rectangles via `d3.stack()`. A tooltip displays the exact rating percentage for each genre segment on mouseover, while a legend and axis labels clarify the grouping.

Oct 22, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart displays movie ratings across five criteria—Story, Visuals, and Acting—for ten genres, with each genre’s total score segmented into colored bars. The visualization uses d3.csv to load data from data.csv, d3.stack() to compute stacked series, and d3.scaleLinear with a 0–100 domain for the horizontal axis. Genres appear on a categorical d3.scaleBand axis, while d3.scaleOrdinal assigns red, blue, and green to the three rating components. The SVG rendering includes axes via d3.axisLeft and d3.axisBottom, with bars drawn as nested rect elements within layer groups.

Oct 22, 2024
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 20 countries in 2010, ordered by country name. Built with React and rendered as an SVG, it uses D3 v5 scales and axes: a linear scale for population and a band scale for countries. The chart applies custom tick formatting, converting values like '1.2G' to '1.2B', and includes tooltips on each bar. Data loads from a remote CSV via D3's `csv` function.

Oct 22, 2024
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the modular workflow of VizHub, showing how to combine D3.js with local ES6 modules to create a simple interactive page. The code loads D3 v5 from a CDN and uses `import { select } from 'd3'` to manipulate the DOM, setting the text of a `#message` div to display "Hello VizHub!" from the exported `message` variable in `myMessage.js`. The page also includes CSS styling for centered, large text. It illustrates the basic structure of a VizHub visualization project, including HTML, JavaScript, and stylesheet files.

Oct 22, 2024
Loading thumbnail…

activity 6_Task 1

This example demonstrates a minimal Hello World message rendered with D3.js, using the `select()` API to target a DOM element and set its text content. The visualization loads D3 v5 from UNPKG and imports the `select` function directly from the library, while also importing a local ES6 module to supply the message string. The page displays the text “Hello VizHub!” centered via CSS, with the JavaScript combining a template literal and a regex pattern that are defined but not used in the output. It serves as a basic template for structuring D3 projects with local modules and external dependencies.

Oct 20, 2024
Loading thumbnail…

Fork of Buddhha

A Buddha silhouette, rendered as an SVG path, is layered in violet over a photographic background of green flowers. The React app uses a single path element with a hardcoded `d` attribute, scaled and translated via a transform, to create the overlapping composition. The SVG is rendered inside a React component using ReactDOM, with the image loaded via an `image` element. The code defines utility functions for styling but does not implement dynamic interactions.

Oct 15, 2024
Loading thumbnail…

Buddhha

A colorful, overlapping pattern of diamond-like polygons fills the screen, rendered in React with SVG. Each polygon is randomly positioned, colored, and rotated, creating a dense, abstract visual. The code uses React's `map` function to generate hundreds of SVG `<polygon>` elements with randomized coordinates, fill colors via `rgb()`, and transforms. The sketch also includes a detailed Buddha silhouette as an SVG path, layered over the chaotic polygon field.

Oct 14, 2024
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This visualization layers hundreds of semi-transparent, randomly colored circles on top of a single Buddha path rendered in SVG. The circles are generated through three nested array maps, each using `Math.random()` to determine their positions and RGB fill values, creating a dense, overlapping scatter effect. The Buddha outline is drawn with an SVG `<path>` element using a React component, with both elements contained within a fixed 960x1000 SVG canvas. The black background and high opacity settings make the colorful circles stand out against the dark backdrop.

Oct 14, 2024
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

Scattered pink and red circles form a dense, stochastic field across a black SVG canvas, layered behind a large, multicolored Buddha outline rendered as a thick stroked path. Built with React and ReactDOM, the visualization maps an array of numeric values through triply nested loops to generate each circle’s position and fill via `Math.random`. The Buddha vector path is drawn using an SVG `<path>` element, transformed and scaled, while the circles’ opacity and varied hues create an overlapping, textured backdrop that contrasts with the bold figure.

Oct 14, 2024