ahemdalssafi

@ahemdalssafi·2 public vizzes

Untitled

A treemap-style bar chart visualizes shipping statistics from a CSV file, showing categorical values like department, description, and item value. The visualization uses D3.js v4 with jQuery to load and parse the `ShippingStats.csv` data, then renders an interactive SVG with mouse-hover effects that highlight bars by expanding their stroke and dimensions. The x-axis labels are dynamically mapped from caption data, while scales are built using `d3.scale.ordinal` and `d3.scale.linear`, and axes are created via `d3.svg.axis`.

Oct 6, 2022

Loading thumbnail…

Barchart Tutorial

This example shows a horizontal bar chart of amounts per person, with red bars scaled linearly along the x-axis and categorical names on a band scale along the y-axis. The visualization renders as SVG using D3 v5, loading data from a local CSV file via `d3.csv` and converting the numeric amounts with `+d.amounts`. Scales, axes, and rectangles are created with `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `selection.enter().append('rect')`, with margins applied through a group transform.

Sep 14, 2022