Madan05101998

@Madan05101998·14 public vizzes

Madan's ICE-6

This bar chart shows the basic cost of living rent (in USD) for the top 20 cities, with each city labeled on the y-axis and its rent value mapped along the x-axis. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `rect` elements to encode the rent values. Data is loaded asynchronously via `d3.csv` from a GitHub Gist URL and filtered to the first 20 records. The chart also includes custom tick marks, gridlines, and axis labels generated with `xScale.ticks()`.

Mar 8, 2023

Loading thumbnail…

ICE-6 Penguin Scatter Plot

This scatter plot visualizes penguin measurements, mapping flipper length and body mass on the x and y axes while encoding each point’s color by species (Adelie, Gentoo, or other). It uses D3 v5’s `csv`, `scaleLinear`, `extent`, and axis functions within a React-based SVG rendering. The data, sourced from a CSV file, also includes bill dimensions as attributes, though these are not plotted. Axes labels and a title are added via SVG text elements, with body margins preventing overflow.

Mar 8, 2023

Loading thumbnail…

Madan's ICE-6 Penguin Scatter Plot

This scatter plot visualizes penguin measurements, mapping flipper length to body mass while using color to distinguish species (Adelie, Gentoo, and Chinstrap). The D3.js code loads a CSV dataset, parses numeric fields, and applies linear scales with margins. It renders circles with SVG, setting fill colors per species and using `attr('rx')` and `attr('ry')` alongside radius. Axis labels are added for flipper length and bill length, with the latter rotated, showing the plot's dual measurement context.

Mar 8, 2023

Loading thumbnail…

Madan Datta ICE-5

This example displays metadata about a car dataset on a webpage with a background image. The page shows the dataset’s file size, row count, and column count. It uses D3 v7, specifically `d3.csv` to fetch and parse the CSV file from a GitHub gist, and `d3.csvFormat` to measure the data’s size. The code renders the resulting message into a preformatted text element. A separate CSS file sets the background image and styling.

Mar 1, 2023

Loading thumbnail…

Fork of ICE5

This example displays metadata about a credit card customer dataset, showing the file size in kilobytes, row count, and column count from a CSV file. The page uses a credit card background image and presents the information in a centered, bold text block. It loads remote data with the D3.js v7 `d3.csv` method and formats the response using `d3.csvFormat` to calculate the data size. The visualization is a minimal HTML page styled with CSS and includes a link to view the raw dataset.

Mar 1, 2023

Loading thumbnail…

Assignment

This is a web page that presents metadata about a credit card customer dataset, displaying the dataset’s size in kilobytes, row count, and column count. The page uses a credit card background image and provides a link to view the full dataset. It is built with HTML and CSS, and uses the D3.js library (version 7.3.0) to fetch the data from a CSV file via `d3.csv` and format it with `d3.csvFormat` before displaying it in a `<pre>` element. The JavaScript code calculates the file size, row count, and column count to generate the summary message.

Mar 1, 2023

Loading thumbnail…

Fork of ICE5

Mar 1, 2023

Loading thumbnail…

HyPeRRiDeR

This example displays summary metadata about a mobile phone dataset, including its size in kilobytes, row count, and column count. It loads the data from a CSV file hosted on GitHub using `d3.csv`, then formats the information with `d3.csvFormat` to calculate the file size. The results are rendered as plain text in a `<pre>` element. The page uses D3 v7 and React, with a simple HTML and CSS layout that includes a link to view the full dataset.

Mar 1, 2023

Loading thumbnail…

Fork of ICE5

This example presents a webpage that reports metadata about a mobile phone dataset. It shows the dataset’s size in kilobytes, the number of rows, and the number of columns, along with a link to view the raw data. The code uses D3 v7’s `d3.csv` to load data from a GitHub gist and `d3.csvFormat` to calculate the file size. The resulting message is displayed inside a `<pre>` element, while CSS sets a credit card image as the page background.

Mar 1, 2023

Loading thumbnail…

Fork of Madan Datta ICE-5

This page displays metadata about a credit card customer dataset, including file size in kilobytes, row count, and column count, presented as plain text in a styled `<pre>` element. The background features a credit card SVG image, and the dataset is accessible via a linked CSV file. The code uses D3 v7’s `d3.csv` to fetch and parse the remote CSV, then `d3.csvFormat` to calculate its byte length, and updates the DOM via `document.getElementById`. CSS handles the centered layout and background styling.

Mar 1, 2023

Loading thumbnail…

Fork of ICE5

This page displays information about a mobile phones dataset, showing the number of rows and columns in the data. It uses D3 v7 and d3.csv to load a CSV file from a GitHub gist and writes the summary to the page. The page styling, including a green background and centered headings, is defined in CSS, with the dataset details presented in a large bold preformatted text block.

Mar 1, 2023

Loading thumbnail…

ICE-5

This example renders a simple text message, "Hello VizHub!", centered on the page using D3 v5. It loads D3 from a CDN via UNPKG and uses the `d3.select` API to set the text content of a specific HTML div element. The code also demonstrates the use of local ES6 modules by importing a `message` string from a separate JavaScript file. The styling, including the 12em font size and centering, is defined in a local CSS file.

Mar 1, 2023

Loading thumbnail…

Madan's ICE-4

Madan's ICE-4 displays a stylized smiley face constructed from layered SVG shapes, including circles, ellipses, lines, and an arc-based mouth. The face features colorful eyes, a purple nose, black facial hair lines, and blue arms with yellow hands, all centered within a yellow head outlined in red. The visualization is built using React for component rendering and D3 v7’s `arc()` API to generate the mouth path, with all elements positioned using explicit coordinates within an SVG canvas.

Feb 23, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiling face drawn with SVG shapes animates its eyebrows up and down in a looping motion. The example demonstrates fundamental DOM manipulation with D3.js v5, using `d3.select` to append SVG circle, rectangle, and path elements for the face, eyes, eyebrows, and mouth. Animated eyebrows are implemented with chained `transition.attr` calls that alternate the vertical position of a group containing two rectangles. The mouth is generated using the `d3.arc` helper with specified inner and outer radii and angle ranges.

Feb 23, 2023