Skip to main content
SimilarExport ZIP
100%

Scientific Data Visualization ICE-6: Marks and Channels

✓ Published0🌍 Public
Ppravalika.thogaru10@gmail.com
Last edited Mar 6, 2023
Created on Mar 4, 2023
Forked from HTML Starter

This bar chart displays the calorie counts of the first 20 cereal products from a CSV dataset, using horizontal rectangles to encode values. The visualization employs React for structure and the d3 library's `scaleBand` and `scaleLinear` for axis mapping, with SVG for rendering. The code loads data via `d3.csv` from a gist URL, and the chart includes custom tick labels for both axes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Bar chart SDV

This bar chart displays the distribution of calories across different cereal brands, with each bar representing a specific cereal’s calorie count. The visualization uses D3.js v7 to load CSV data from a GitHub gist, parse the numeric calorie values, and render the chart as SVG. The code employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with axes formatted via `d3.axisBottom` and `d3.axisLeft`. Cereal names on the x-axis are rotated for readability, while bar heights encode the calorie values directly. The chart’s layout and margins are defined programmatically, and error handling logs any data-loading issues.

Ssreeramyamini@gmail.com
84% match
Loading thumbnail…

ICE-6 Bar Chart Cereals and their calories

This bar chart displays the calorie content of 77 cereals, using green vertical bars sorted by cereal name along the x-axis and calorie values on the y-axis. The visualization loads CSV data from a GitHub gist via d3.csv, then uses React hooks (useState, useEffect) to manage asynchronous data loading and rendering. The chart employs d3.scaleBand for categorical x-axis positioning, d3.scaleLinear for the continuous y-axis, and d3.max to compute the domain. SVG rendering occurs through React components, with rotated x-axis labels for readability and horizontal gridlines generated from y-axis ticks.

Ssreeramyamini@gmail.com
83% match
Loading thumbnail…

ICE 6-1

This visualization displays a bar chart of protein content in grams for ten breakfast cereals, sorted alphabetically by cereal name. Built with React hooks and D3 v5, the chart uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Cereal data is loaded from a CSV file via `d3.csv`, with each bar rendered as an SVG `<rect>` element. The code manually draws grid lines and axis tick labels using `xScale.ticks()`, and all styling is applied via CSS, including the green rect fill and red grid lines.

NNikhilMakkena
83% match
Loading thumbnail…

Data Visualization ICE5

This visualization presents metadata about a cereal nutrition dataset, displaying row count, column count, and file size as text on a styled HTML page. The page uses a background SVG image of cereal boxes and prominent headings to contextualize the data. The code loads a CSV file from a GitHub gist using `d3.csv`, then formats the data with `d3.csvFormat` to calculate the file size in kilobytes. The resulting message is inserted into a `<pre>` element via `textContent`, with CSS styling for italic red headings and green bold text.

Ppravalika.thogaru10@gmail.com
81% match
Loading thumbnail…

ICE 6-1

A horizontal bar chart displays the protein content in grams for ten cereals, ranked by name along the vertical axis. The code uses React with hooks (`useState`, `useEffect`) to fetch CSV data via `d3.csv` and renders the visualization as SVG. D3 scales (`scaleBand`, `scaleLinear`) position bars and axes, with custom tick rendering for gridlines and labels.

Ssaidhiraj16
81% match
Loading thumbnail…

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

This example visualizes the top 10 food-producing countries using a horizontal bar chart rendered as SVG within a React component. It loads CSV data from a GitHub gist via `d3.csv`, scales the bars with `scaleBand` and `scaleLinear`, and draws tick marks and labels manually using `xScale.ticks()`. The code integrates React hooks (`useState`, `useEffect`) with D3 v5 selection and scale APIs, producing a clean, data-driven layout with orange bars and labeled axes.

Nneeharika2023@gmail.com
79% match
Loading thumbnail…

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

A bar chart displays the top 20 cosmetic products by revenue, using horizontal bars to compare product ratings against their identifiers. The visualization splits responsibilities between React state management and D3 scales, with `scaleBand` mapping ratings to the y-axis and `scaleLinear` mapping anime IDs to bar widths. SVG rendering handles all marks and channels, while custom axis ticks are generated manually through React components rather than D3 axis helpers. Data loads asynchronously from a CSV file via `d3.csv`.

Sskambhore04
79% match
Loading thumbnail…

ICE-6: Marks and Channels

This example displays product costs as a horizontal bar chart using React and D3 v5. The visualization maps product names to the y-axis with a band scale and costs to the x-axis with a linear scale, rendering blue rectangles with yellow strokes. The component loads CSV data from a GitHub gist, slices it to the first ten items, and uses D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions within a React functional component with hooks. Custom tick marks and gridlines are drawn manually rather than using axis generators.

PPrasanth Damarla
78% match