Fork of JC Task-7 Q1

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.

92% match

Fork of Task-7

This example displays a horizontal bar chart ranking the populations of 30 countries for 2020, sourced from a CSV file. Built with React and rendered as SVG, it uses D3 v5 APIs like `scaleBand`, `scaleLinear`, and `format` to map data to coordinates and create tick labels. The visualization includes a bottom axis with formatted values and a left axis with country names, with styled tick marks and bars defined in the accompanying HTML.

91% match

Fork of Fork of Task-7

This example presents a horizontal bar chart of 2020 population data for the top 30 countries, sourced from a CSV file. Built with React and D3 v5, it renders vector graphics as SVG elements. The visualization uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with axes generated by custom `AxisBottom` and `AxisLeft` components. The bars are drawn as SVG rectangles, and hovering over each bar reveals a tooltip displaying the population value formatted in billions. The chart's title, "POPULATION-2020", is placed below the x-axis.

91% match

JC Task-7 Q1

This interactive bar chart displays the population of 30 countries as horizontal bars, sorted by country name for the year 2020. The visualization uses React with D3.js scales and SVG rendering to produce the chart, with axes formatted using D3’s `format` function to abbreviate large values. Data is loaded from a CSV file via `d3.csv` and processed in a custom `useData` hook, while tooltips show the population value on hover through native SVG `<title>` elements.

91% match

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.

JC-task-7 Q1.2

JC-task-7 Q1.2

Fork of Task 8 Q1-2

This example displays a horizontal bar chart of 2010 population data for 20 countries, sourced from a GitHub CSV file. The chart encodes population values on a linear x-axis scale and country names on a categorical y-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for scales, and renders SVG `rect` elements for bars. The code demonstrates loading D3 via UNPKG and importing from local ES6 modules, with tooltips formatted using `d3.format`.

Vvchittimadha@gmail.com