RishiAdarsh (@RishiAdarsh), VizHub

ICE-6: Rendering Marks and Channels with React & D3

This example displays average software developer salaries for 15 metropolitan areas using horizontal bars. It uses React to render SVG marks and D3 v7 scales and axes. The code fetches CSV data with `d3.csv`, applies a linear scale for salary values, and a band scale for metro names. Axes are drawn manually with ticks, lines, and text elements using D3 helper methods.

Mar 7, 2023

Loading thumbnail…

ICE 6

This example displays a centered message reading “Hello HTML!” in enormous type, filling the browser viewport with a bold typographic statement. The page uses a plain HTML document with embedded CSS to style the text size and alignment, and includes no JavaScript logic beyond the static markup. It serves as a minimal demonstration of styling and page structure, with the visual output driven entirely by the CSS `font-size` and `text-align` properties.

Mar 7, 2023

Loading thumbnail…

ICE-6

This example demonstrates how the VizHub platform can load and render a simple D3.js visualization. It uses D3 v5, imported via UNPKG, to manipulate the text content of an HTML element. The code highlights the use of D3’s `select` API to target a DOM node and set its text, while also showcasing the ability to import custom ES6 modules, such as `message.js`, to organize code. The visualization itself is minimal, displaying a centered message in large type, with styling from a local CSS file.

Mar 7, 2023

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows the basic subscription cost of Netflix in fifteen countries using horizontal bars, with each bar’s length encoding the price. The chart is built with React and D3, where React manages the component state and D3’s `scaleBand` and `scaleLinear` position the bars and axes. The code loads CSV data via `d3.csv`, renders SVG elements directly in JSX, and manually draws grid lines and tick labels instead of using `d3.axisBottom` or `d3.axisLeft`.

Mar 7, 2023

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This horizontal bar chart displays the basic cost of Netflix subscriptions across 15 countries, using React state and D3 scales. The React component loads CSV data from a GitHub gist via `d3.csv`, then renders SVG bars with `scaleLinear` for the x-axis and `scaleBand` for the y-axis country categories. Axis ticks and gridlines are generated manually from `xScale.ticks()`, while labels appear without helper axes. The visualization updates asynchronously after data loading, with D3’s `max` and `format` functions supporting the quantitative encoding.

Mar 7, 2023

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows the basic subscription cost of Netflix in fifteen countries using horizontal bars, with each bar’s length encoding the price. The chart is built with React and D3, where React manages the component state and D3’s `scaleBand` and `scaleLinear` position the bars and axes. The code loads CSV data via `d3.csv`, renders SVG elements directly in JSX, and manually draws grid lines and tick labels instead of using `d3.axisBottom` or `d3.axisLeft`.

Mar 6, 2023

Loading thumbnail…

ICE5

This page shows metadata for a software developer salaries dataset, including the file size in kilobytes, the number of rows, and the number of columns. The information is displayed as plain text within a `<pre>` element, formatted with extra line breaks and centered styling. The visualization fetches a remote CSV file using `d3.csv` and computes the metadata with `d3.csvFormat(data).length` to determine the size. A background SVG image and red hyperlinks to the dataset are also presented on the page.

Mar 3, 2023

Loading thumbnail…

Fork of ICE5

This visualization displays metadata about a credit card customer dataset, including its size in kilobytes, row count, and column count. The page presents a large credit card background image and clearly labeled headers, with the computed statistics shown in a preformatted text block. It uses D3 v7’s `d3.csv` to fetch the dataset from a GitHub gist URL and `d3.csvFormat` to measure its length. The data itself is not visualized graphically; only summary metrics are computed and displayed via DOM text content.

Mar 2, 2023

Loading thumbnail…

ICE 5

This example displays metadata about an employee salary dataset, reporting the file size, row count, and column count in plain text on a web page. It loads CSV data from a GitHub gist using D3.js’s `d3.csv` method, then formats the dataset with `d3.csvFormat` to calculate its size in kilobytes. The computed summary is inserted into a predefined `<pre>` element via `textContent`. The page is built with HTML, CSS, and vanilla JavaScript, styled by an external stylesheet, and relies entirely on D3’s data-loading and formatting utilities without any additional visualization.

Mar 2, 2023

Loading thumbnail…

Fork of homework smiley face

This visualization displays a smiley face constructed from SVG primitives, including circles for the head and eyes, ellipses for pupils, and lines for facial hair and eyebrows. The face is rendered using React, with the D3 library’s `arc` function creating a semi-circular mouth. The code defines precise coordinates and stroke widths to compose the face on a 960×500 canvas, using D3 v7 and React to structure the graphical elements.

Feb 23, 2023

Loading thumbnail…

Fork of homework smiley cat

A smiling cat face is drawn as a combination of SVG shapes, including circles for the head and eyes, ellipses and lines for facial details, and an arc for the mouth. The visualization is built using React to render the components and D3’s `arc` generator to compute the mouth path. The static image is centered on a 1000x500 canvas, with fixed coordinates and styling applied directly inline.

Feb 23, 2023

Loading thumbnail…

Fork of homework smiley cat

A smiling cat face is drawn as a combination of SVG shapes, including circles for the head and eyes, ellipses and lines for facial details, and an arc for the mouth. The visualization is built using React to render the components and D3’s `arc` generator to compute the mouth path. The static image is centered on a 1000x500 canvas, with fixed coordinates and styling applied directly inline.

Feb 23, 2023