Skip to main content
SimilarExport ZIP
100%

JC-Task9&10-Q2

✓ Published0🌍 Public
JJames Cruz
Last edited Apr 28, 2024
Created on Apr 28, 2024
Forked from 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.

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…

Assignment5

This visualization displays the relationship between market capitalization and annual revenue for 30 U.S. companies using a scatter plot. D3 v7 loads CSV data from a GitHub gist and renders an SVG chart with circles positioned by two quantitative axes. The code reports dataset summary statistics with formatted numbers and labels axes with dollar values in billions. Uses `d3.csv()` for parsing, `d3.extent()` for value ranges, and `d3.format()` for number formatting, with equal circle size to emphasize positional encoding.

HHaiyan Sun
76% match
Loading thumbnail…

Assignment5

This dashboard visualizes the relationship between market capitalization and revenue for 30 U.S. companies, with each dot representing a single firm. The interface allows switching between five chart versions that explore different encoding channels, from position-only to color and area variations. Built with D3 v7, the visualization uses `d3.csv` to load data from a GitHub gist, `d3.extent` for summary statistics, and SVG rendering for the scatter plot. The code also includes interactive navigation buttons that update the chart's visual encodings.

HHaiyan Sun
75% 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