Skip to main content
SimilarExport ZIP
100%

JC-Task9&10-Q2

✓ Published1🌍 Public
JJames Cruz
Last edited Apr 28, 2024
Created on Apr 28, 2024
Forked from Hello VizHub

This example displays an area chart of the top 10 companies by market capitalization, using a light blue filled path to visualize values in billions. The visualization loads CSV data from a GitHub gist and renders it as SVG, drawing axes with D3's `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and generating the area shape with the `area` generator. The code imports these modules via ES6 `import` statements from D3 v5, demonstrating local module usage and data parsing through a custom `parseRow` function.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

JC-Task9&10-Q2

This example displays an area chart of the top 10 companies by market capitalization, using a light blue filled path to visualize values in billions. The visualization loads CSV data from a GitHub gist and renders it as SVG, drawing axes with D3's `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and generating the area shape with the `area` generator. The code imports these modules via ES6 `import` statements from D3 v5, demonstrating local module usage and data parsing through a custom `parseRow` function.

JJames Cruz
100% match
Loading thumbnail…

JC - Task-7 Q1

This bar chart displays the top 10 most populous countries in the year 2000, sorted in descending order, using a horizontal layout with light green bars. The visualization loads CSV population data from a GitHub repository, filters for the year 2000, and converts population values to actual counts. It uses d3.scaleBand and d3.scaleLinear for positioning, React for rendering the SVG elements, and custom AxisBottom, AxisLeft, and Marks components to draw the axes and bars. Axis tick labels are formatted with d3.format to abbreviate numbers (e.g., "B" for billions).

JJames Cruz
78% match
Loading thumbnail…

JC - Task-7 Q1

This bar chart displays the top 10 most populous countries in the year 2000, sorted in descending order, using a horizontal layout with light green bars. The visualization loads CSV population data from a GitHub repository, filters for the year 2000, and converts population values to actual counts. It uses d3.scaleBand and d3.scaleLinear for positioning, React for rendering the SVG elements, and custom AxisBottom, AxisLeft, and Marks components to draw the axes and bars. Axis tick labels are formatted with d3.format to abbreviate numbers (e.g., "B" for billions).

JJames Cruz
78% match
Loading thumbnail…

Task9_Q2

This area chart displays stock prices over time, with the x-axis representing years and the y-axis representing stock price values. The visualization uses a filled area path with a light purple fill and a green stroke to encode the data trend. The code relies on D3 v4’s `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and axis functions to render the SVG. Data is loaded from a CSV file hosted on GitHub, and the chart is drawn within an SVG container.

Jjyothirmai318@gmail.com
77% match
Loading thumbnail…

JC Task-1

This example is a horizontal bar chart that displays the 2020 populations of 30 countries, using the `d3.csv` loader to fetch the data from a GitHub-hosted CSV file and `d3.scaleBand` for the vertical country axis alongside `d3.scaleLinear` for the horizontal population axis. It renders as an SVG via React, with `d3.format` used to abbreviate tick labels (e.g., "G" for billions), and each bar includes a tooltip showing the population value. The chart is built from reusable local components—`AxisBottom`, `AxisLeft`, and `Marks`—each mapping data to SVG `rect` elements and axis lines.

JJames Cruz
75% match
Loading thumbnail…

JC-task-7 Q1.2

This bar chart visualizes the 2020 population for the top 20 countries, using SVG rectangles rendered via React. The x-axis displays population with a custom formatter (converting gigabytes to billions), while the y-axis lists country names. The code builds scales with `scaleBand` and `scaleLinear`, imports data from a CSV via `d3.csv`, and structures the visualization using local ES6 modules for axes and marks.

JJames Cruz
75% match
Loading thumbnail…

Activity7_2

This example visualizes the market share of smartphone companies in 2024 with a blue area chart. The chart uses a band scale for company names on the x-axis and a linear scale for percentages on the y-axis, with the area generated through `area()` and rendered as SVG. Data is loaded from a CSV file via `csv()`, and axes are created using `axisBottom` and `axisLeft`. The visualization demonstrates importing D3 v7 functions through ES6 modules.

Aamarnadhkari98@gmail.com
74% match
Loading thumbnail…

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

This visualization displays the top 10 most-liked companies for stocks and crypto using a horizontal bar chart. The bars are rendered as SVG rectangles, with orange fills atop a green background, and the chart includes axis tick marks and labels. The code loads data from a CSV file using `d3.csv`, then uses a React component with `useState` and `useEffect` hooks to manage state. D3’s `scaleBand` and `scaleLinear` map company names and like counts, while the chart is drawn with JSX inside an SVG element, combining React’s declarative rendering with D3’s data utilities.

HHarishma Nallala
74% match