sohith kampalli

@sohithk2002·12 public vizzes

Fork of Fork of Hello VizHub

This example shows a horizontal bar chart ranking the populations of twenty countries in 2010, sorted in descending order with steelblue bars. It uses D3 v7’s `scaleLinear` for bar widths, `scaleBand` for categorical y-axis positioning, and `d3.axisLeft` and `d3.axisBottom` to render the axes. The data is loaded from a CSV file via `d3.csv`, then parsed, sorted, and sliced. The SVG is manually sized at 960 by 600 pixels, with margins controlled through a transform on a group element.

Mar 30, 2025

Loading thumbnail…

Fork of Hello VizHub

This horizontal bar chart displays the top 10 countries by population in the year 2000, using steelblue bars scaled with a linear x-axis and a banded y-axis. Built with D3 v7, it loads population data from a GitHub CSV via `d3.csv`, then renders SVG `<rect>` elements and axes through modular functions like `AxisBottom`, `AxisLeft`, and `Marks`. The chart is generated as a reusable visualization with explicit margins, tick formatting, and axis labels.

Mar 30, 2025

Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub displays an area chart of iris sepal lengths against sample ID. The D3.js code uses `d3.csv` with `d3.autoType` to load and parse the data from a gistfile, filters it, and then applies `d3.scaleLinear` for both axes. It renders the visualization as an SVG, using the `d3.area` generator to create the filled path and `d3.axisBottom` and `d3.axisLeft` for the axes with labels.

Mar 24, 2025

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple D3.js visualization that displays a centered greeting message, “Hello VizHub!”, within a web page. The code uses the `select` function from the D3 v6 library to target a specific HTML element by its ID and set its text content. The page’s styling is handled with CSS via the `styles.css` file, applying a large font size and text alignment. The message text is defined in a separate ES6 module, `myMessage.js`, showcasing modular code organization within the VizHub framework.

Mar 24, 2025

Loading thumbnail…

Fork of Hello VizHub

This example displays a simple text message within a web page. It creates a `<div>` element with the id "message" and uses the d3 selection API to set its text content. The code imports the `select` function from D3 and a custom message from a local module. The D3 function `// d3.v6` is used to select the element and assign the imported message string using the `.text()` method. The page also includes a linked stylesheet and loads D3 from a CDN.

Mar 24, 2025

Loading thumbnail…

Fork of iris-pie-chart

This fork of the iris-pie-chart displays the distribution of three iris species as a pie chart with a legend. The chart uses d3.csv to load species data, d3.rollup to count occurrences, and d3.pie with d3.arc to generate and render SVG path slices. Each slice is labeled with its species name using arc.centroid, and a legend built with d3.scaleOrdinal links colors to species.

Mar 24, 2025

Loading thumbnail…

Fork of Hello VizHub

This pie chart displays the distribution of three Iris species in the classic dataset, with each slice labeled by species and a color-coded legend below. The visualization uses D3 v7’s `d3.pie` and `d3.arc` generators to compute slice paths, while `d3.rollup` aggregates row counts from a CSV loaded via `d3.csv`. SVG paths and text elements are rendered inside a centered group, with a separate HTML legend built from `d3.scaleOrdinal` color mapping.

Mar 24, 2025

Loading thumbnail…

iris-pie-chart

This pie chart visualizes the distribution of iris species across the dataset, showing counts for Iris-setosa, Iris-versicolor, and Iris-virginica. It uses d3.pie and d3.arc to generate slices, d3.rollup to aggregate counts, and a d3.scaleOrdinal for color encoding. The chart is rendered as SVG with labels positioned via arc.centroid, accompanied by a separate SVG legend. Data is loaded asynchronously from a CSV file using d3.csv, with all elements cleared on reload.

Mar 24, 2025

Loading thumbnail…

Fork of Fork of Hello VizHub

This example displays two D3.js v7 visualizations in a single SVG: a pie chart categorizing stock closing prices into three ranges and an area chart showing closing prices over time. The pie chart uses `d3.pie` and `d3.arc` with ordinal color scaling, while the area chart employs `d3.area` and `d3.scaleTime`/`d3.scaleLinear` axes. Both render from the same CSV dataset fetched via `d3.csv`, showing the date and closing price values.

Mar 24, 2025

Loading thumbnail…

Fork of Hello VizHub

This example visualizes the Iris dataset as an animated scatter plot, cycling through four different feature pairs on the x-axis. It uses D3.js v6 to fetch CSV data, render SVG circles, and animate the plot via `setInterval`. The code dynamically updates the x-axis attribute, and colors points by species with a custom legend. It demonstrates D3’s `select`, `csv`, and SVG primitives for interactive data exploration.

Mar 24, 2025

Loading thumbnail…

Fork of Hello VizHub

This example visualizes gold stock price data as a pie chart grouped by year, showing the sum of closing prices for each year. It loads CSV data from a GitHub Gist, cleans the dataset by removing columns and filtering low-volume rows, then aggregates values using `d3.nest` and `d3.sum`. The chart is rendered with D3 v6 as SVG elements, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10`, alongside a color-coded legend beside the pie slices.

Mar 21, 2025

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to set up a minimal D3.js visualization inside the VizHub runtime environment. It renders the text “Hello VizHub!” centered in the page by using the D3 selection API, specifically `d3.select` to target a div and set its text content. The code loads D3 v6 from UNPKG as a UMD script, while also importing local ES6 modules, including a custom message exported from a separate `myMessage.js` file. Styling is applied through an external CSS file that controls the font size and alignment.

Mar 21, 2025