Foysal Ahmed Emon

@emon535·15 public vizzes

Bangladesh poverty MAP

This example visualizes poverty data across Bangladesh’s districts, encoding the percentage of the population living in poverty through a red color scale. The map uses D3 v5 with TopoJSON data to render district boundaries via `d3.geoPath` and a Mercator projection. Hovering over a district displays a tooltip with the city name, ID, and extreme and poor poverty levels. Users can zoom and drag the map using D3’s zoom behavior, with the data sourced from a JSON file containing district-level poverty statistics.

Apr 22, 2020

Loading thumbnail…

Bangladesh map interaction with Sales Data

This example shows sales data for seven districts of Bangladesh overlaid on a choropleth-style map, displaying yearly, monthly, and weekly figures via tooltips on hover. The map is rendered as SVG using D3 v5, with geographic paths generated from TopoJSON data via d3.geoPath and a Mercator projection. Interactive zoom and drag are enabled through d3.zoom. District shapes are colored and styled with CSS, and tooltips are created by appending SVG title elements.

Apr 20, 2020

Loading thumbnail…

COVID-19 Data on BD MAP

This map of Bangladesh visualizes sales data for seven major districts, with hover interactions revealing city-specific yearly, monthly, and weekly figures. The visualization uses D3 v5 and topojson to parse TopoJSON data, projecting the country through a Mercator projection and rendering districts as SVG paths. Interactive zoom and drag capabilities are enabled via d3’s zoom event, while district hovering triggers tooltips constructed from the parsed sales JSON data.

Apr 20, 2020

Loading thumbnail…

D3 Introduction : FACE

This example demonstrates a stylized face constructed entirely with D3.js SVG primitives. It draws a yellow circular head, two black eyes, and a mouth path onto a gray background. The face uses fixed pixel coordinates derived from the SVG element’s width and height attributes. The code explicitly imports `select` and `arc` from D3 v5, employs `svg.append` for elements, and positions the mouth via the `arc` generator with specified inner and outer radii and angle extents, all within a React-rendered page.

Feb 9, 2020

Loading thumbnail…

Ball of Fruits- Hover interaction

Five circles render as apples that morph and reorder into a static row until one fruit shrinks and a later fruit turns into a lemon. Hovering a fruit highlights its stroke in purple via a mouseover handler that updates a selectedFruit state. The visualization uses d3’s scaleOrdinal for color and radius, transition().duration() for 1000ms position and size animations, and SVG circle/text elements. Data is generated in JavaScript with range() and Math.random().

Feb 8, 2020

Loading thumbnail…

Ball of Fruits- Interaction

A set of colored circles represents fruits in a bowl, with apples shown in red and lemons in yellow. Users click a fruit to highlight it with a purple outline, while the entire group smoothly rearranges its positions over time. The visualization uses D3's selection and transition APIs, including `selection.transition().duration()` and `.merge()` to animate enter, update, and exit states. The code relies on `d3.select`, `d3.range`, and `d3.scaleOrdinal` for data generation and color/radius mapping, with data defined as an array of fruit objects that are modified asynchronously.

Feb 8, 2020

Loading thumbnail…

Ball of Fruits- Update pattern

Five circles representing apples render over time as a D3 data-join update pattern. The animation cycles through entering, updating, and exiting states—an apple is removed, another becomes a lemon via color and radius changes, and a third is filtered out. Using `selection.data` with a key function and `transition.attrTween`-style duration changes, `fruitBowl` merges enter and update selections, while exit transitions shrink circles to zero before removal.

Feb 8, 2020

Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth over time, using a line and blue circles to plot yearly data points. The visualization encodes time on the x-axis and population on the y-axis, with tick marks and gridlines for reading values. Built with D3 v5, the code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the chart, while `csv` loads the data from the world-population-by-year-2015 dataset. The SVG rendering includes styled axes, labels, and a thick steelblue line.

Feb 8, 2020

Loading thumbnail…

Auto Horse power vs Weight

This scatter plot visualizes the relationship between vehicle weight and acceleration for a dataset of cars, with each car represented as a semi-transparent tomato-colored circle. The x-axis is labeled "weight" while the y-axis shows "acceleration," and the chart includes a title "HorsePower vs Weight." The visualization is rendered as an SVG using D3 v5, with axes created via `axisBottom` and `axisLeft`, and scales set up using `scaleLinear` and `extent`. Data is loaded from a CSV file containing vehicle specifications from 1970–1973.

Feb 8, 2020

Loading thumbnail…

A week in San Francisco

A line chart visualizes temperature variations in San Francisco over one week, with blue circles marking each recorded temperature reading along a connected steelblue path. The visualization uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes, while data is loaded from a CSV file containing timestamps and temperature values. The SVG rendering includes custom styling for axis labels and tick marks, with a rotated y-axis label to indicate temperature units.

Feb 8, 2020

Loading thumbnail…

D3 Introduction :Population Scatter Plot

This scatter plot displays population figures for countries and regions, with each circle positioned along a point scale for country names on the y-axis and a linear scale for population on the x-axis. The visualization renders in SVG using React, leveraging D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`. Data from `data.csv` is loaded via `csv()`, with population values multiplied by 1000 and formatted with tick labels using D3’s `format`. The chart includes gridlines from tick sizes and a title text element.

Feb 8, 2020

Loading thumbnail…

D3 Introduction : Population Barchart

This bar chart displays populations across countries in Asia, Europe, and the Americas, sorted alphabetically with a logarithmic color scale of steel blue bars. Built with D3 v5 within a React framework, it uses `d3.csv` to load `data.csv`, `scaleLinear` for the x-axis (converting values to billions via `d3.format`), and `scaleBand` for categorical y-axis spacing. Axis rendering relies on `axisBottom` and `axisLeft`, with the SVG viewport sized at 900×500 pixels and margins configured for label placement.

Feb 8, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic SVG shapes—circles, rectangles, lines, and paths—with CSS styling and SVG grouping. It renders a static composition on a 960×500 SVG canvas, using transform attributes to reposition grouped elements and apply fill, stroke, and stroke-width properties. The code uses raw SVG elements within a React project, with a separate CSS file defining global styles and a `.lines` class that overrides stroke properties for line and path elements. The page loads from a minimal HTML file and displays placeholder text via JavaScript.

Feb 8, 2020

Loading thumbnail…

Cars Report

This example demonstrates a text-based "Cars Report" visualization. It displays a list of cars, formatted as a simple string output, with each line showing the year, make, model, and price. The report only includes vehicles priced under $2,000, as filtered by the `generateReport` function. The data is loaded asynchronously from an embedded JSON array via a Promise in `getCars`. The React app renders the final report into an HTML `<pre>` element, using JavaScript string methods like `.filter()`, `.map()`, and `.join()`.

Feb 8, 2020

Loading thumbnail…

Cars Report

This example displays a text-based report of cars priced under $2,000, generated from a hardcoded JSON array and rendered inside an HTML `<pre>` element. The code uses JavaScript promises with `setTimeout` to simulate asynchronous data loading, then filters and formats the car objects using `Array.filter`, `Array.map`, and template literals. The visualization relies on native JavaScript modules (`export`/`import`) and the browser’s Document Object Model (DOM) to update the page content.

Feb 8, 2020