DHasanC

@DHasanC·6 public vizzes

Responding to Resize

This example demonstrates how an SVG visualization can adapt to changes in the browser window’s size. A large green X is drawn to fill the viewport, with the chart container sized via CSS and the SVG’s width and height set from the container’s client dimensions. The code uses D3 v5’s selection and merge API to update line positions and listens for browser resize events to trigger a redraw.

Aug 30, 2020

Loading thumbnail…

Shapes with SVG and CSS

A bar chart displays population sizes for ten countries, with horizontal bars ordered by country name. SVG rectangles are positioned using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, driven by data loaded from a CSV file. The visualization renders entirely with SVG elements, styled via external CSS that removes page margins and hides overflow. Population values are converted from thousands to absolute numbers during data preprocessing.

Aug 30, 2020

Loading thumbnail…

Mountains on a Map

A world map represents cities with populations over 50,000 as triangular "mountains" whose height encodes population and color encodes country. Built with React and D3 v5, it uses `geoNaturalEarth1` projection with `geoPath` for land, graticules, and borders. City positions derive from longitude and latitude through the projection, with hover tooltips revealing details. Data comes from the Simplemaps World Cities Database, while country boundaries use World Atlas TopoJSON.

Aug 30, 2020

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the populations of the top 10 most populous countries using a horizontal bar chart layout. The React application loads data from the United Nations World Population Prospects 2019 dataset via `d3.csv`, then renders SVG elements including axes and marks. The `AxisBottom` and `AxisLeft` components generate ticks with scales, while `Marks` creates rectangles whose widths are proportional to population values using `xScale` and `yScale`. Tooltips display population values through SVG `<title>` elements. The visualization uses d3.v5 and React to create a clean, readable chart.

Aug 26, 2020

Loading thumbnail…

Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, comparing petal length against sepal width. Built with React and D3 v5, it renders circles in SVG using the `scaleLinear` and `extent` APIs to map data values. The chart includes labeled axes, gridlines, and tooltips that display values on hover. Styling uses the Poppins font and a custom teal color scheme defined in CSS.

Aug 26, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Dhrubo Hasan CHowdhury” centered on a blank page, styled with a large font size. It serves as a minimal HTML template for starting new projects. The page includes a `<style>` block for visual formatting and a `<script>` element that outputs the message “Hello JavaScript!” to the browser’s console. It uses no external libraries or data sources, relying solely on native HTML, CSS, and JavaScript.

Aug 25, 2020