shahedabdullhadi

@shahedabdullhadi·4 public vizzes

Fork of A Bar Chart(Platform)

This interactive bar chart displays the global, EU, Japanese, North American, and other regional sales for the top 500 video games across different platforms, based on a Kaggle dataset. Users can switch between regional sales metrics via a dropdown menu. The visualization is built with React and rendered as SVG, using D3’s `scaleBand` and `scaleLinear` for axes, with `csv` for data loading and `format` for tick labels.

Mar 20, 2021

Loading thumbnail…

Fork of Bar Chart

This visualization displays monthly global sales data from January 2017 through December 2018 using an animated bar chart. The bars show sales figures in steel blue, turning orange on hover with a smooth transition, while axes are labeled with month names and sales values. Built with D3 v6, the example loads data from a local CSV file and uses `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the SVG chart. Mouse interactions use standard D3 event handlers with a 250-millisecond transition effect.

Mar 20, 2021

Loading thumbnail…

Fork of trend category

This interactive line chart compares crime counts across Costa Rican provinces over time using D3 v5. A dropdown menu lets users select a different province to display, with color-coded lines representing yearly trends from 2016 to 2019. The visualization uses `d3.scaleTime`, `d3.scaleOrdinal`, `d3.line` with `curveBasis`, and animated path transitions via `transition.attr` to smoothly update the data. SVG rendering with custom axes and a color legend provides a clear comparison of seasonal patterns across provinces.

Mar 18, 2021

Loading thumbnail…

trend category

This visualization shows monthly crime counts across Costa Rican provinces from 2016 to 2019, with each year represented by a colored line. A dropdown menu allows users to switch between provinces, updating the line chart and its axis labels dynamically. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.nest to group data by year, and d3.line with curveBasis to draw smooth paths. A color legend maps years to distinct hues, and transitions animate line updates. Data is loaded from a CSV file using d3.csv.

Mar 18, 2021