aizazhussain234

@aizazhussain234·5 public vizzes

D3.js

A bar chart displays population counts for ten countries, using horizontal bars to compare values from a CSV dataset. The visualization renders as an SVG element with a light gray background, where bar lengths correspond to population magnitudes via a linear scale. Built with React and D3 v5, the code uses `d3.csv` to load data, `d3.max` for domain calculation, and SVG `rect` elements styled with steelblue fills. The y-axis positions are mapped using `d3.scaleBand`, though no axis labels or tick marks are rendered in the final output.

May 31, 2020

Loading thumbnail…

D3.js

This example shows a horizontal bar chart of the ten most populous countries, using population data loaded from a CSV file. The chart renders as SVG within a React framework, with D3 v5 handling the scales and axes via `scaleLinear` and `scaleBand`. The code imports specific functions from the `d3` package, including `csv`, `max`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, to position the bars and axis labels. Each bar’s width corresponds to its population value, scaled against the maximum population in the dataset.

May 31, 2020

Loading thumbnail…

Filterable Cocktail Ingredient Bar Chart

This interactive bar chart displays the number of students enrolled per module, with the top 20 modules sorted in descending order. A dropdown menu filters the dataset by department (CSIS, CAM, or GAV), recalculating student counts and resorting the bars accordingly. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, `d3.nest()` for aggregation, and SVG `rect` elements with tooltips. The chart loads data from a remote CSV file and updates dynamically when the department selection changes.

May 26, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays population estimates for ten countries, using vertical bars to compare values from the United Nations population data. The visualization is rendered as an SVG element, with D3’s `select` method importing the chart’s dimensions from the SVG attributes and logging a test value to the console. The data is loaded from a CSV file containing country names and population figures, though the current code does not yet bind or draw the bars.

May 26, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays population estimates for ten countries, with the United Nations World Population Prospects data loaded via `d3.csv` and transformed by multiplying each value by 1000. The visualization uses D3 scales (`d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis) and renders SVG rectangles with an ordinal color scale. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while the chart is positioned using a margin convention and fixed SVG dimensions.

May 26, 2020