Rohit-2710

Fork of d3.js learning

This stacked bar chart visualizes the relative proportions of four fruit types (redDelicious, mcintosh, oranges, and white) across the years 2006 to 2016. Each bar segment represents the quantity of a fruit per year, with colors mapping each category. The chart uses d3.layout.stack to stack the series, along with d3.scale.ordinal for the x-axis and d3.scale.linear for the y-axis. Axes are rendered with d3.svg.axis, and the SVG output is styled with CSS. The data is embedded as an array of objects in the code.

Fork of Fork of Fork of Bar Chart + Axis customisation

This bar chart visualizes total COVID-19 cases across eleven countries, using a horizontal layout with a blue-pink gradient fill for bars. The visualization customizes both axes: the y-axis removes tick lines and domain, while the x-axis formats values using D3’s `format` function (e.g., converting to compact notation) and includes a labeled axis title. Data is loaded from a CSV file using `d3.csv`, with scales created via `scaleLinear` and `scaleBand`. Text elements also feature gradient fills, and margins are explicitly set to position the chart within an SVG canvas.

Fork of Bar Chart + Axis customisation

This fork of a D3.js v6 bar chart visualizes population data for 21 countries, using the `d3.csv` loader and `d3.scaleLinear` and `d3.scaleBand` to map population and country names to the SVG canvas. It features customized axes via `d3.axisLeft` and `d3.axisBottom`, with tick labels formatted using `d3.format` to abbreviate large numbers (e.g., "1.44B"). The chart applies a linear gradient fill to the bars and displays a title and axis label, with gridlines removed for a cleaner presentation.

Untitled

A bar chart displays monthly monetary values from 2013-01 through 2014-02, with each bar’s height encoding the value and labeled on the y-axis as "Value ($)." The chart uses an ordinal x-scale with rotated date labels and a linear y-scale, rendered as SVG rectangles. Built with D3 version 3.5, it employs `d3.svg.axis`, `d3.time.format`, and `d3.csv` to load and parse the `bar-data.csv` file. Data points are formatted as monthly timestamps, and axes include tick marks with rotated text for readability.

Fork of Interactive pie and bar

This interactive dashboard displays religious population data across countries using a linked bar chart and pie chart. The bar chart shows total population by country, while hovering over a bar updates the pie chart to show the religious breakdown for that country. Built with D3 v3 in a React framework, it uses SVG rendering and transitions to animate updates. The visualization uses d3.scale.ordinal and d3.svg.axis for the bar chart, with mouseover and mouseout handlers triggering pie chart and legend updates.

Fork of [TEST] Pie Chart

This example shows the religious composition of twelve countries as a pie chart, with each slice colored and labeled in a legend that displays the percentage of the total population. The chart is built using D3 v5, with `d3.pie()` generating the arc data and `d3.arc()` rendering the SVG paths. The data is loaded from a CSV file via `d3.json`, and values are converted from strings to numbers. The chart uses a custom color scale and positions the legend to the right of the pie.

Fork of Making a Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, using population estimates from the 2018 United Nations World Population Prospects data. The chart emphasizes population size through bar length, with a formatted x-axis that abbreviates large numbers using the `d3.format` API. Built with D3 v5, it leverages `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, and D3’s axis components (`d3.axisLeft`, `d3.axisBottom`) to render SVG bars and gridlines. The visualization also customizes axis ticks and removes default domain lines for a cleaner presentation.

Fork of [TEST] Pie Chart

A pie chart displays the percentage distribution of credit rating categories, with "AAA Local" dominating at 73.2% and most values (such as "A Internacional" and "Otros") at 0.0%. Built with d3.v5, the visualization uses `pie()` and `arc()` to generate the sectors, `scaleOrdinal()` for the color scheme, and appends a legend that pairs labels with their corresponding percentages. The SVG renders the chart at 960×500 pixels, with segments positioned at (250,250) and an outer radius of 175.

Fork of Religions of Largest 20 Countries

This interactive visualization combines a bar chart and pie chart to explore religious demographics across the 20 most populous countries. Hovering over a country bar triggers an animated pie chart that breaks down that nation’s religious distribution, using d3.pie, d3.arc, and transition.attrTween for the sweeping animation. A colorLegend component maps religion categories to a d3.scaleOrdinal with schemeGreens colors. Data comes from Pew Research’s Global Religious Landscape, processed into a CSV and rendered as SVG. The bar chart uses d3.scaleBand and d3.scaleLinear to encode country population totals.