Shehroze Aamer

@shehroze19·4 public vizzes

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries using data from the 2018 United Nations World Population Prospects, with population values multiplied by 1000. It builds on a basic bar chart by customizing D3 axes: the y-axis labels are simplified by removing domain lines, the x-axis uses abbreviated tick formats (e.g., “B” for billions) via `d3.format`, and custom tick sizes create horizontal gridlines. The visualization is rendered with D3 v5 using `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, with SVG elements styled via external CSS for typography and color.

Apr 5, 2021

Loading thumbnail…

Gantt Chart

This Gantt chart displays the timeline of five tasks, with each horizontal bar representing the duration from its start to end date. Green bars show the completed portion of each task, while red overlays indicate the remaining work based on a progress percentage. The visualization uses D3.js with an ordinal y-axis for task categories and a time-based x-axis for dates. Hovering over any bar segment reveals a tooltip showing the task name, date range, and completion percentage via mouse events. The chart includes a legend distinguishing completed from remaining statuses.

Apr 5, 2021

Loading thumbnail…

Customizing Axes

This example shows how to customize axes in D3 bar charts, displaying event names on the y-axis and their start years on the x-axis. It uses D3 v5’s `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, with custom tick formatting via `format('.3s')` and removal of default domain lines. The SVG rendering includes axis labels, a title, and grid lines generated by setting negative tick sizes. Data comes from a local CSV file parsed with `d3.csv`.

Apr 5, 2021

Loading thumbnail…

Shozi Gone mad

This example demonstrates a simple text-based data visualization that formats and displays car information from a static JSON dataset. The code iterates through an array of car objects, each containing year, make, model, and price fields, and constructs a formatted string listing each vehicle with its price. The resulting message is displayed in a pre-formatted HTML element. The implementation uses native JavaScript array iteration and template literals to build the output, with the car data defined as an exported constant in a separate module.

Apr 4, 2021