Fork of Fork of Hello VizHub

Last edited Mar 25, 2025

Created on Mar 25, 2025

This example loads a pizza dataset from a GitHub gist using `d3.csv` and `d3.autoType`, then logs the processed data to the console. It shows how to fetch and inspect tabular data with D3 v6, converting numeric columns explicitly with unary plus operators. The page also includes a static message displayed via CSS, demonstrating a minimal setup combining D3 data handling with an HTML/CSS front-end. No charts or visualizations are generated from the data in this code.

AI-generated description

MIT Licensed

Similar vizzes

Fork of Hello VizHub

This fork of Hello VizHub displays a static message, “Hello VizHub!”, centered on the page in large text. It loads a pizza dataset from a GitHub gist using `d3.csv` with `d3.autoType`, converting numerical columns to numbers and logging the processed data to the console. The visualization does not render charts or interactive elements; instead, it demonstrates data loading and preprocessing with D3 v6 in a minimal HTML and CSS setup.

90% match

Fork of D3 Starter

This example displays a dataset from a pizza CSV file loaded from a GitHub gist, logging the parsed and numerically converted columns to the browser console. The page renders no visual output, instead demonstrating the initial data-processing step of a D3 project. Using D3 v6 via the `d3.csv` method, it fetches the remote data, coerces two columns to numbers with unary plus operators, and prints the resulting array for inspection. The minimal HTML and CSS center an empty page with oversized text styling, while the JavaScript executes the asynchronous data loading and transformation.

86% match

Fork of Hello VizHub

This fork of Hello VizHub displays a scatter plot of pizza data loaded from a GitHub Gist CSV, showing the relationship between quantity and unit price. The visualization uses D3 v6 to parse the CSV, create linear scales for both axes, and render steelblue circles for each data point within an SVG. Axes are added using `d3.axisBottom` and `d3.axisLeft`, with text labels for “Quantity” and “Unit Price” appended directly to the axis groups.

83% match

Fork of Hello VizHub

This example loads a CSV file containing customer loan details from a GitHub gist and displays basic metadata about the dataset, including file size in kilobytes, row count, and column count. The page presents a clickable link to view the raw data, alongside a stylized background image. It uses D3 version 5 and 7 via CDN, calling `d3.csv` to fetch the data and `d3.csvFormat` to calculate the data length. The metadata is rendered into a `<pre>` element with large, bold text.

CCHANDU BHARGAVI

Fork of Hello VizHub

This pie chart visualizes the distribution of pizza orders by category, with each slice labeled with its count and a legend identifying the categories. The code loads data from a GitHub Gist CSV file using `d3.csv`, calculates category frequencies through manual aggregation, and renders the chart as SVG with `d3.pie` and `d3.arc`. Slices use a `d3.scaleOrdinal` color scale with `d3.schemeCategory10`, and labels are positioned via `arc.centroid`. The legend is built manually, mapping rectangles and text to each category.

Ssowjanyateppali4202@gmail.com

Fork of Hello HTML

This example displays a CSV dataset loaded from a GitHub Gist, summarizing the total row count and previewing the first five records in an HTML table. It then renders an SVG bar chart showing the first column as categorical labels on the x-axis and the second column as quantitative values on the y-axis using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The chart title and axes are added via D3 selections. Styling uses embedded CSS, and data loading relies on `d3.csv`.

Fork of Fork of Hello VizHub

This example presents a pie chart of aggregated sales data by product category, loaded from a CSV file hosted on GitHub and rendered as an SVG. It uses D3 v6 APIs such as `d3.csv`, `d3.rollups`, `d3.sum`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. The chart displays each category’s total sales in thousands and its percentage share, with labeled arcs and a legend.

KKritin Kesav

Kkotha.shiva@btech.christuniversity.in

Fork of Hello VizHub

This example displays a D3.js pie chart that visualizes the distribution of insurance records by region, rendered as SVG with an accompanying legend and interactive tooltips. The code loads CSV data from a GitHub-hosted dataset using `d3.csv`, aggregates region counts with `d3.rollup`, and constructs the pie with `d3.pie` and `d3.arc`. Hovering over a slice highlights it, triggers a tooltip showing the category and value, and applies categorical colors from `d3.scaleOrdinal` and `d3.schemeCategory10`.