Skip to main content
SimilarExport ZIP
100%

Akshitha ICE-6 Fork of HTML Starter

✓ Published0🌍 Public
Aakshitha.rapala@gmail.com
Last edited Mar 21, 2024
Created on Mar 21, 2024
Forked from HTML Starter

This example visualizes December sales figures for various products using a scatter plot, where each dot represents a product's sales value. The visualization emphasizes clarity by placing product names along the y-axis and sales amounts on the x-axis, with axis labels for context. It loads data from a CSV file using D3 v5’s `csv` function, then constructs the chart with `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and renders circles via `selectAll` and `enter`/`append`. The SVG output includes styled axes and text, with the code running in a React framework.

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 Fork of HTML Starter

This example shows a horizontal bar chart of product sales data, displaying the December sales figures for the top 10 products. The visualization uses React with hooks like `useState` and `useEffect` to fetch and manage the data, while D3 v5 functions `csv`, `scaleBand`, and `scaleLinear` handle data loading and scaling. The SVG rendering maps products to the y-axis and sales values to the x-axis, with axis ticks and grid lines drawn manually. Data comes from a CSV file loaded via D3’s `csv` method, and the chart updates dynamically once the data arrives.

Aakshitha.rapala@gmail.com
88% match
Loading thumbnail…

Akshitha Rapala - Fork of ICE7

This pie chart displays product sales data for January 2023, with each slice labeled by its sales value in millions and a corresponding legend listing product names and amounts. The visualization uses D3.js v5, loading CSV data via `d3.csv` from a GitHub gist, and renders the chart with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color assignment. Interactive styling and labels are applied through SVG selections and a color palette of ten predefined colors.

Aakshitha.rapala@gmail.com
85% match
Loading thumbnail…

Fork of Fork of HTML Starter abc

This visualization presents electronics sales data over time using a line and area chart, with monthly values plotted along a categorical x-axis and a linear y-axis for sales figures. The render function uses d3’s scaleBand, scaleLinear, line, and area generators with curveBasis smoothing to draw the paths, while axisLeft and axisBottom add labeled axes with gridlines. The data is loaded asynchronously from a CSV file via d3.csv, and the chart is rendered inside an SVG element. The code also includes a separate scatterplot.js module with d3.scaleLinear for potential scatter plot rendering.

Aakshitha.rapala@gmail.com
83% match
Loading thumbnail…

Akshitha Rapala Fork of ICE-7 Area Chart

This area chart visualizes monthly electronics sales for 2023, displaying a smooth trend line and a filled pink region beneath it to highlight sales volume variations. The chart uses D3 v5’s `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `area` with `curveBasis` to create the smoothed area shape. Data is loaded from a CSV via `d3.csv`, and axes are rendered with `axisBottom` and `axisLeft`, including custom tick formatting and labels, all within an SVG.

Aakshitha.rapala@gmail.com
82% match
Loading thumbnail…

Akshitha Rapala Fork of ICE-7 Line Chart

This example shows monthly electronics sales for 2023 as an orange line chart, with month names on the x-axis and sales values on the y-axis. The visualization uses D3 v5 to load CSV data from a GitHub gist and render an SVG. It constructs the chart with `scalePoint` for categorical months, `scaleLinear` for the numeric axis, and `line` to generate the path, while custom axis labels and a title are styled via CSS.

Aakshitha.rapala@gmail.com
82% match
Loading thumbnail…

Fork of Akshitha Rapala Fork of ICE-7 Line Chart

This line chart visualizes monthly electronics sales for 2023, with months on the x-axis and sales figures on the y-axis. The chart uses D3 v5’s `scalePoint` for categorical month labels and `scaleLinear` for the sales axis, while `d3.line()` generates the orange path. Data is loaded from a CSV file via `d3.csv`. The SVG rendering includes labeled axes, grid lines, and a green title, with the y-axis label rotated and styled in red.

Rreddysushma994@gmail.com
81% match
Loading thumbnail…

Fork of Akhil -vizhub assignment bat-scatter

This horizontal bar chart displays product prices from a CSV file, with each bar’s length and color intensity encoding the price value. The visualization sorts products by price and uses a light-to-dark blue linear scale for color encoding. Built with React hooks and D3 v5, it employs `scaleBand` for categorical y-axis placement, `scaleLinear` for the quantitative x-axis, and `csv` for data loading. The SVG rendering includes labeled axes, tick marks, and gridlines, with all marks and channels generated imperatively within React’s `useEffect` and rendered as SVG elements.

Hharichandanamone21@gmail.com
80% match
Loading thumbnail…

Fork of HTML Starter_ Akshitha Rapala

This example demonstrates loading and parsing a remote CSV dataset using D3 v7, displaying metadata about the data in a styled HTML page. It shows the data’s size in kilobytes, row count, and column count within a `<pre>` element. The page also embeds a static SVG illustration of a house, rendered via an `<img>` tag. The code uses `d3.csv()` to fetch and parse the data, then updates the DOM with template literals. CSS styles the heading and metadata display, while the SVG provides a simple visual anchor. The dataset is sourced from a GitHub gist URL.

Aakshitha.rapala@gmail.com
79% match