AbirKhan96

@AbirKhan96·5 public vizzes

barchart-sorted

This interactive bar chart visualizes the height and weight percentages of children across eight blocks in Palghar district, India, with monthly data for August, September, and October. Users select a month and a metric—height, weight, or combined height and weight—via dropdown menus. The bars animate through a transition over one second, re-sorting and rescaling to reflect the chosen metric, with a color scale interpolating red-yellow-green. The visualization uses D3.js v5, including `d3.scaleLinear`, `d3.scaleBand`, and `d3.scaleSequential`, rendering SVG rectangles with tooltips.

Feb 17, 2020

Loading thumbnail…

barchart-sorted

This example shows an interactive, animated bar chart comparing height and weight percentages across eight administrative blocks. Users can switch between viewing height data, weight data, or their combined sum, as well as select among three months (August, September, October) via dropdown menus. The bars are sorted by the selected metric and colored using a sequential color scale with an RdYlGn interpolator. Built with D3 v5, the visualization uses `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft` for scales and axes, with transitions animating bar positions, heights, text labels, and the y-axis. Hovering over a bar reveals a tooltip with the block name and value, while the underlying SVG renders the chart and its table-like layout.

Feb 17, 2020

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a bar chart and a pie chart to explore categorical frequency data across states. Hovering over a bar updates the adjacent pie chart and legend to display the breakdown of that state’s frequency by three categories (low, mid, high), with smooth transitions between states. Built with React and D3.js v3, the visualization uses SVG paths for the pie slices and rects for the bars, with mouseover and mouseout handlers triggering `pC.update()` and `leg.update()` to synchronize the views. The bar chart’s y-axis rescales dynamically as the pie selection changes the underlying data.

Feb 17, 2020

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the population of the top 10 most populous countries, with China leading at over 1.4 billion. The chart uses a categorical y-axis (country names) and a linear x-axis (population), drawn with SVG. The code leverages `d3.csv` to load population data, `scaleLinear` and `scaleBand` for scaling, and `axisBottom` with a custom tick formatter to abbreviate large numbers (e.g., converting billions from 'G' to 'B'). The default axis domain lines and tick marks are removed for a cleaner look.

Feb 17, 2020

Loading thumbnail…

Customize Axes

This example shows a horizontal bar chart of block height and weight percentages across seven Indian regions, with population values derived from land area. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to position bars, while customizing the left and bottom axes via `axisLeft` and `axisBottom`. Tick labels are formatted using `d3.format` with suffix replacement, and grid lines are rendered through negative tick sizes. Data comes from a CSV file and is rendered as SVG with styled text and steelblue bars.

Feb 17, 2020