A

Arefa Patwary

@areepatw96·34 public vizzes

Loading thumbnail…

Social Network Graph by Arefa Patwary

This interactive social network graph visualizes connections between individuals, with nodes representing people and links representing relationships. A force-directed simulation (d3.forceSimulation) positions the nodes, while node size and color intensity reflect each person’s degree of connectivity, computed from the link data. The graph uses SVG rendering, with draggable nodes and labeled text. The code leverages d3.forceLink, d3.forceCenter, d3.forceManyBody, and d3.drag to handle the physics and interaction, with bluescale coloring applied via d3.interpolateBlues.

Loading thumbnail…

US map Demo By Arefa Patwary

This demo shows a map of the United States with gray state land areas and white state boundary lines, drawn using the geo-albers-usa-territories projection. The map loads US state topology from the US Atlas TopoJSON dataset via `d3.json` and converts it to GeoJSON features and meshes with `topojson.feature` and `topojson.mesh`. React renders the SVG paths generated by `d3.geoPath`, while the projection is applied through the geo-albers-usa-territories library. The visualization is built with d3.v5 and React, displaying static geographic shapes without interaction.

Loading thumbnail…

Family tree by Arefa Patwary

This interactive family tree shows Arefa Patwary’s ancestors and relatives, with clickable nodes to expand or collapse branches. The SVG rendering uses d3.layout.tree to position nodes hierarchically and d3.svg.diagonal for curved links. Node clicks trigger a transition that smoothly animates the tree’s layout over 750 milliseconds. The hardcoded family data includes names like Nurun nahar begum and Shah alam Patwary. Styling is applied via CSS classes for nodes and links, with blue strokes for connections.

Loading thumbnail…

Fork of ICE-8 - Network - Nghia Dang

A force-directed network diagram visualizes 13 nodes grouped by color (using a categorical scale) and linked by weighted edges, with node positions determined by a physics simulation. The SVG rendering uses d3.v5 and the `d3.forceSimulation` API with `forceLink`, `forceManyBody`, and `forceCenter` to compute layout, while `d3.scaleOrdinal` assigns colors based on group membership. Data is loaded from `data.json`, and link stroke widths encode the `value` attribute, with all elements updated on each simulation tick.

Loading thumbnail…

Fork of ANY JSON tree (DRAFT)

This example shows any JSON object as a selectable, zoomable tree diagram using D3’s hierarchical layout. A custom `hierarchify` function converts arbitrary JSON data into the nested `{ name, children }` structure expected by `d3.hierarchy`, with node labels indicating each value’s type and content. The tree is rendered as SVG, with curved links via `d3.linkHorizontal` and pan/zoom through `d3.zoom`. It visualizes a sample dataset containing error and response fields, including nested arrays and objects. The interface supports interactive exploration of the JSON structure.

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by region, extending from a root node labeled with a personal name. It uses the D3.js v5 library, specifically `d3.tree` for layout and `d3.linkHorizontal` for edge paths, to render an SVG graphic. The data loads from a JSON file and supports panning and zooming via the `d3.zoom` API. Node labels vary in font size based on their depth in the hierarchy, making the structure readable while emphasizing the broader regional groupings and individual countries.

Loading thumbnail…

Fork of Polished World Map by AREFA PATWARY

This example displays a polished world map with country boundaries, graticules, and a highlighted sphere, rendered as SVG in a React component. It uses d3-geo’s `geoNaturalEarth1` projection and `geoPath` to draw land features, graticules, and interior country borders, with data sourced from the World Atlas TopoJSON. The map is styled with distinct fills for land, sphere, and boundary strokes, offering a clean, visually refined geographic visualization.

Loading thumbnail…

Fork of World Map

This example renders a global map with an orthographic projection, displaying landmasses in teal, country borders as fine gray lines, and a graticule overlay on a light sphere. The visualization uses D3’s `geoOrthographic` and `geoPath` to project and draw geographic features, while TopoJSON’s `feature` and `mesh` extract land polygons and country boundaries from the world-atlas dataset. The React-based code structure separates data handling in `useData` from the SVG marks rendered by the `Marks` component, with styling applied via CSS classes.

Loading thumbnail…

Fork of Pie Chart by arefa patwary

This example visualizes the top 10 countries by deaths in 2020 from air pollution using a pie chart rendered with SVG. The chart uses d3.pie and d3.arc to compute and draw arc segments, with d3.scaleOrdinal assigning colors to each slice. Text labels display death counts in thousands, while a legend lists each country alongside its corresponding value. Data is loaded asynchronously from a CSV file using d3.csv, and d3.format is applied to abbreviate large numbers.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot by Arefa Patwary

This fork of a reusable D3 scatter plot visualizes the Iris dataset, mapping petal width against sepal length for each flower sample. The code uses `d3.csv` to load the data and `d3.scaleOrdinal` to color marks by species, with SVG circles rendered via `selection.join`. A legend identifies the three species. The plot animates every two seconds by cycling the x-axis variable through petal width, sepal width, petal length, and sepal length using `setInterval`, updating the axes with `axisLeft` and `axisBottom`.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes the Iris flower dataset, cycling through four different x-axis measurements—petal width, sepal width, petal length, and sepal length—while keeping sepal length fixed on the y-axis. Each data point is colored by species (setosa, versicolor, virginica), with a static legend. The example uses D3 v6 APIs such as `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` to update the chart, rendering SVG circles and text with a custom `scatterPlot` reusable function.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot visualizes the Iris dataset, cycling through four different floral measurements on the x-axis over time while plotting petal width against sepal length. It uses D3 v6 to render animated SVG circles colored by species, with the y-axis fixed and the x-axis rotating automatically via `setInterval`. A legend identifies the three species, and axis labels update dynamically to reflect the current dimension. The code relies on D3’s `csv` import, `scaleLinear` scaling, and custom `scatterPlot` API.

Loading thumbnail…

Fork of line chart by arefa Patwary

This line chart displays electronic sales totals over time, with years on the x-axis and total sales on the y-axis. The visualization uses d3.csv to load data from a GitHub gist, d3.scaleTime and d3.scaleLinear for axes, and d3.line to generate the path. The SVG includes styled gridlines and rotated axis labels, with a pink background and green line color.

Loading thumbnail…

Fork of Area Chart by Arefa Patwary

This visualization shows electronic sales from 2013 to 2021 using a combined line and area chart. The line traces sales trends over time, while the filled area beneath emphasizes cumulative magnitude. The code uses d3.csv to load data from a GitHub gist, d3.scaleTime and d3.scaleLinear for axes, and d3.line with d3.curveBasis for the stroke. d3.area creates the shaded region, with axes rendered via d3.axisBottom and d3.axisLeft. SVG rendering and green/pink styling support the presentation.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization presents a pie chart ranking the top 10 countries by deaths from air pollution in 2020, with each slice labeled with its death count in thousands and accompanied by a color-coded legend listing countries and values. The chart uses D3 v5’s `pie()` and `arc()` generators to compute slice angles and SVG paths, with `scaleOrdinal` mapping a fixed color array to each data point. Data is fetched asynchronously via `d3.csv` from a gist URL, and all text and shapes render as SVG elements within a 960×500 canvas.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by deaths from air pollution in 2020, using a dataset fetched from a GitHub gist. Each slice represents a country’s death count, with labels showing values in thousands and a legend listing country names and corresponding figures. The visualization uses d3.pie and d3.arc to generate the chart, with d3.scaleOrdinal assigning colors, d3.csv loading the data, and d3.format for tick labels. The SVG is rendered with appended `path` and `text` elements, while the legend is built from rectangles and texts.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

Animated scatter plot of the Iris dataset built with D3.js, showing petal measurements on the axes. The visualization cycles through four different column combinations (petal width, sepal width, petal length, sepal length) every two seconds, updating the x and y axes via a reusable `scatterPlot()` component. Circles are colored by species using `d3.scaleOrdinal`, with SVG rendering, axes from `axisLeft` and `axisBottom`, and a legend appended. Data loads from a CSV URL, and the plot uses `selectAll`, `join`, and `setInterval` to animate transitions.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example visualizes the Iris dataset as an animated scatter plot, cycling through four measurements on the x-axis while keeping sepal length on the y-axis. The plot updates every two seconds, re-scaling the axis and repositioning the circles. It uses D3 v6’s `csv` for data loading, `scaleLinear` for axes, and a reusable `scatterPlot` module with a fluent interface. SVG rendering drives the animation, with axis and circle elements dynamically joined and updated.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

Animated scatter plot of the Iris dataset built with D3.js, cycling through different attribute pairs (petal width, sepal width, petal length, sepal length) every two seconds. The visualization uses SVG rendering with `scaleLinear`, `axisLeft`, and `axisBottom` to map data to coordinates and axes. A reusable `scatterPlot` function encapsulates the chart, driven by `setInterval` to update the X-axis mapping. Data loads from a CSV via `d3.csv`, with numeric parsing for all four measurements.

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3 by Arefa

This bar chart displays the top 11 best-selling books from an 1890 dataset, showing each book’s population-related value as a horizontal bar. The visualization uses React hooks like `useState` and `useEffect` to load CSV data with `d3.csv`, then renders SVG rectangles scaled using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Orange gridlines and text labels are generated from `xScale.ticks()`, with the chart styled by CSS.

Loading thumbnail…

Iris Data by Arefa

This visualization is a scatter plot of the Iris dataset, showing the relationship between petal length and sepal width for individual iris flowers. The plot uses D3.js v7 scaleLinear functions to map data values to SVG coordinates, with the x-axis representing petal length and the y-axis representing sepal width. The React components (AxisBottom, AxisLeft, and Marks) render the axes and data points as circles, with each point displaying a tooltip showing its exact petal length value via a `<title>` element. The data is loaded from a CSV file using D3's csv function.

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the best-selling books data from a CSV file, showing book categories and their population values. The visualization uses React with hooks for state management and data loading via D3’s `csv` function, then renders bars as SVG rectangles using D3’s `scaleBand` and `scaleLinear` for axes and positioning. Tick marks, axis lines, and labels are manually generated in JSX, with D3’s `max` and `format` utilities supporting the scale domain calculations.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This interactive bar chart displays the top 10 countries by 2019 population from a CSV file (cars.csv). The visualization uses React with D3.js v5 to render SVG marks, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The code employs React's `useState` and `useEffect` hooks to asynchronously load data via `d3.csv`, then renders axis ticks and rectangles through React DOM components.

Loading thumbnail…

Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization presents a horizontal bar chart of bestselling books information, ranking eleven items by population metrics from an external CSV dataset. Built with React and D3 v5, the chart uses `scaleBand` and `scaleLinear` to map categorical labels and numeric values to SVG rectangles. The code leverages React hooks (`useState`, `useEffect`) for data loading and rendering, while D3 utilities handle CSV parsing, scales, axes, and tick generation. The SVG output includes orange gridlines and labeled axes, with steelblue bars sized proportionally to each entry's population value.

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows the top 11 best-selling book categories using a horizontal bar chart, with bar lengths encoded by book sales and category names listed on the y-axis. The React component loads CSV data via D3’s `csv` method and renders SVG marks using JSX, while D3’s `scaleBand` and `scaleLinear` map categorical and numerical channels. Grid lines and tick labels are generated manually from `xScale.ticks()`, with bars styled through an external CSS file.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart visualizes the top 20 countries by confirmed COVID-19 cases, using horizontal bars to compare population metrics. The visualization is built with React and D3 v5, leveraging `d3.csv` to load the dataset and `d3.scaleBand`/`d3.scaleLinear` for axis scaling. SVG elements are rendered declaratively through React, with `rect` marks for bars and text grids for tick labels, displaying both chart axes and data directly from the raw CSV file.

Loading thumbnail…

Fork of Scatterplot with Iris Data

This scatterplot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization uses React to render SVG elements, with D3 v7 providing the linear scales (`scaleLinear`) that map data values to pixel coordinates. Axis components generate ticks and labels, while circular marks represent each data point. The chart includes a tooltip showing the x-axis value for each point. The dataset is loaded asynchronously via D3's `csv` function from a remote gist URL.

Loading thumbnail…

Fork of Fork of Scatterplot with Iris Data

This scatterplot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. The visualization renders as an SVG using React components, with D3 v7 handling the data loading via `d3.csv` and the linear scales for the axes. Each data point is a circle generated through React components, with tooltips displaying the x-axis value in a compact format. The chart includes labeled axes for petal length and sepal width, and uses `scaleLinear` with `extent` and `max` to compute the scale domains.

Loading thumbnail…

Scatterplot with Iris Data

This scatterplot displays the Iris dataset, plotting petal length against sepal width for individual flowers. Built with React and rendered as an SVG, it uses D3’s `scaleLinear` with `extent` and `nice` to compute axes, which are drawn by custom `AxisBottom` and `AxisLeft` components. The `Marks` component maps each data point to a circle with a `<title>` tooltip, and data is loaded asynchronously via D3’s `csv` from a gist URL. The visualization includes axis labels and a custom tick format, but does not encode species or other dimensions.

Loading thumbnail…

Fork of Scatterplot with Iris Data

This example displays a scatter plot of the classic Iris dataset, mapping sepal length along the x-axis and sepal width on the y-axis. Each data point is rendered as a blue circle with a tooltip showing its x-value, using React to construct the SVG elements and D3.js's `scaleLinear` and `extent` functions to compute scales and domains. The chart includes labeled axes and tick marks, with data loaded from a remote CSV file via D3's `csv` parser.

Loading thumbnail…

Scatterplot with Iris Data

This scatterplot visualizes the classic Iris dataset, plotting sepal length against sepal width for individual flower samples. Built with React and D3 v7, the visualization renders as an SVG, using `d3.csv` to load data from a GitHub-hosted CSV file. The code employs D3's `scaleLinear` for axis scaling, with custom `AxisBottom` and `AxisLeft` components generating tick marks and labels. Each data point appears as a filled circle with a tooltip showing its sepal length value, while the axes are labeled "Sepal Length" and "Sepal Width." The visualization demonstrates a clean, functional scatterplot with interactive hover details.

Loading thumbnail…

Scatterplot with Iris Data

This scatterplot visualizes the classic Iris dataset, plotting sepal length and width as circular SVG marks. The chart uses D3 v7 scales and axes to map the data, with styled tick marks and axis labels for readability. Built as a React application, the visualization is rendered through D3’s selection and data-join methods, while a separate ES6 module supplies a message displayed via `select('#message').text()`. The layout includes a fixed viewport with a hidden overflow, and the axis and mark colors are defined in embedded CSS.

Loading thumbnail…

Reading values into a table

This example demonstrates how to read data from an external CSV file into an HTML table using an ActiveX object with the `datasrc` and `datafld` attributes. The table displays the classic Iris dataset, including species, sepal length and width, and petal length and width. The code binds span elements within table cells to specific data fields from the CSV, and the `classid` references Microsoft's ActiveX data binding control to load the content from `irisdata.csv`.

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a simple smiley face rendered as an SVG graphic using React components. The face consists of a pink background circle, two black eyes, and a curved mouth, all positioned within a 960×500 SVG canvas. The code splits the visual elements into separate React component files—BackgroundCircle, Eyes, and Mouth—using ES6 modules and React Fragments. The mouth is generated using the d3.arc() API to create a semicircular path, while the overall layout uses SVG transformations to center the face. ReactDOM renders the final composition into the page.