P

Pedram

@rampedro·25 public vizzes

Loading thumbnail…

lesson-1

This example shows a large blue circle centered on an empty SVG canvas, serving as a placeholder for a geographic visualization. The code sets up a D3 v5 environment with TopoJSON support, importing specific functions like `select`, `geoPath`, and `geoEquirectangular` from D3, along with the `feature` method from TopoJSON. It uses D3’s `select` to access the SVG element and appends a circle with a radius of 200 pixels, positioned at the canvas midpoint. The accompanying CSS defines styles for future Earth and country layers, though no geographic data is loaded or rendered.

Loading thumbnail…

less1

This example shows a stylized yellow face constructed from SVG shapes, centered within a square canvas. The face is composed of a background circle, two eyes, a mouth, and a nose, all positioned relative to the canvas center. Built with React and D3 v5, the visualization uses reusable components for each facial feature, with parameters controlling size, position, and color. The mouth is rendered as a D3 arc path, while the eyes and nose are simple circles. The face is assembled through a container component that applies a translation transform to center the group.

Loading thumbnail…

Lesson1

This example shows a simple HTML page displaying the message "Hello HTML!" in large, centered text. It demonstrates basic web rendering using CSS for styling and a plain HTML structure without external libraries or frameworks. The page uses the `.message` class to set font size and text alignment, and the content is static with no JavaScript interaction or data visualization. The example serves as a minimal introduction to HTML and CSS, matching the title and serving as a starting point for further lessons.

Loading thumbnail…

D3.js Canvas Example

This interactive map displays the provinces of Ontario, Canada, using a custom Albers projection. Users can click on individual divisions to zoom in and highlight them in blue, with a reset function to restore the original view. Built with D3.js v5 and React, it fetches GeoJSON data from GitHub and renders paths using `d3.geoPath`, with zoom behavior driven by `d3.zoom` and color transitions applied via `transition.attrTween`.

Loading thumbnail…

Fork of Fork of Chart

This interactive dashboard visualizes crime statistics against women in India, using a choropleth map alongside two donut charts. The map displays crime counts per state, while the donut charts break down data by crime type and year, with dropdown menus to switch between selections. Built with d3.v7, the visualization uses d3.scaleOrdinal for color encoding and d3.rollups for data aggregation. The map geometry uses topojson, and the data comes from a CSV file of Indian crime statistics. The charts incorporate simple animations when rendered.

Loading thumbnail…

Fork of HeatMap: Career Data

This heatmap visualizes career data from a CSV file, using color intensity to represent values across two categorical dimensions. The chart employs `d3.scaleBand` for axes, `d3.scaleSequential` with the `d3.interpolateInferno` color scale, and SVG rectangles for cells. A tooltip appears on hover to show exact values. The cells are made draggable through `d3.drag`, and during a drag, all rectangles in the same group turn red, highlighting their column.

Loading thumbnail…

Fork of Drag & Drop

A drag-and-drop interaction demonstrates how a single image tile can be moved between a series of empty container boxes. Built with vanilla JavaScript and the HTML5 Drag and Drop API, the example uses event listeners for `dragstart`, `dragover`, `drop`, and related actions to manage the transfer of a `draggable` element. The visual styling, defined in CSS, changes the tile's appearance when it is held or hovering over a target. The tile's image is loaded from a random Unsplash source URL, and the layout presents ten boxes in a row.

Loading thumbnail…

Fork of Fork of Bonus ICE Scatter plot using D3.js

This example creates a 3D scatter plot with two traces, each mapping different agricultural data columns from a CSV file. The first trace plots Crop, Production, and District_Name, while the second plots Crop_Year, Season, and Area. It uses D3.js to load the CSV data via `d3.csv` and Plotly.js to render the interactive `scatter3d` chart inside a `myDiv` element, with margins set to zero.

Loading thumbnail…

Fork of React + D3 Viz Starter

This example demonstrates a reusable React component called `VizContainer` that abstracts SVG and group elements following the margin convention, rendering a dark outer rectangle, a light inner rectangle, and a pink circle. The code uses React 16 and D3 v6 via CDN links, with props controlling dimensions, margins, and colors. The `showMargins` boolean toggle visually highlights the chart’s margin area, which can be removed by deleting that prop. It serves as a minimal starter template for building React-based D3 visualizations.

Loading thumbnail…

Fork of Fork of Fork of Fork of ice8-vignesh

This interactive map visualizes world countries using an orthographic projection that can be rotated by dragging, with clickable countries that switch between orthographic, Mercator, and Albers USA projections. The visualization loads geographic data from world-atlas TopoJSON and TSV files, rendering country boundaries and a graticule as SVG paths via `d3.geoPath` and `d3.geoGraticule`. Drag interactions adjust the projection’s rotation, zoom is handled through `d3.zoom`, and projection changes animate with D3 transitions.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic D3.js v7 setup with an SVG canvas, showing two outlined columns: a left column with a static blue circle and text label, and a right column that maps an array of seven numeric values to green circles of varying radii. It uses `d3.select` and the standard append/attr chain to construct the SVG structure, then applies `d3.scaleLinear` to map data domain [100,700] to a range of [1,10] for circle sizing. The right column’s circles are positioned linearly by index, while a text element is transformed and anchored. The code runs in a simple HTML file with D3 loaded via unpkg.

Loading thumbnail…

Untitled

This example shows an interactive map of Canada with SVG paths representing provinces, initially colored dark green. When the mouse hovers over a province, the CSS class changes to turn it red and a tooltip div appears, displaying information about the province. The tooltip is positioned and shown by modifying its CSS properties on mouse move, and hidden on mouse out. Built with D3.v7, it loads GeoJSON data from GitHub and renders paths using `d3.geoPath` with an Albers projection, while D3's `select` and `join` methods handle the interactive state changes.

Loading thumbnail…

Fork of ICE8 - USA Map

This map visualizes U.S. state boundaries from the US Atlas TopoJSON, projecting them with `d3.geoAlbers` and rendering them as SVG paths via `d3.geoPath`. It includes graticules and a sphere outline, with land areas filled in teal and state interiors stroked in blue. The data is loaded asynchronously with `d3.json` and processed using `topojson.feature` and `topojson.mesh`, while the React component manages state with `useState` and `useEffect`.

Loading thumbnail…

Fork of Fork of 1

This example visualizes poverty data across Bangladesh’s districts using a choropleth map. Each district is colored on a white-to-red linear scale based on its “poor” percentage, with hover tooltips displaying the district name, ID, extreme poverty level, and poor level. The map is rendered as SVG using d3.geoPath and a mercator projection, with zoom and drag interactions applied via d3.zoom. TopoJSON data from two sources—a world map and a Bangladesh-specific dataset—is parsed with topojson.feature, while poverty statistics come from a local salesData.json file.

Loading thumbnail…

Fork of 1

A choropleth map of Bangladesh displays district-level poverty data, with each region colored on a gradient from white to red based on its reported “poor” percentage. Hovering over a district reveals a tooltip with the district name, ID, and both extreme and poor poverty levels. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to render TopoJSON boundary data, with a `d3.scaleLinear` mapping poverty rates to fill colors. Zoom and drag interactions are enabled via D3’s `zoom` behavior. Poverty statistics come from a local JSON file joined to district names.

Loading thumbnail…

Fork of GeoVisualization - Choropleth map of the world

This example displays a choropleth map of the world, rendering country boundaries as gray paths on an SVG. When the user hovers over a country, its fill changes to red, and it reverts to gray on mouseout. The code loads GeoJSON data from a GitHub repository using `d3.json` and applies the `d3.geoEqualEarth` projection with `projection.fitExtent` to fit the map to the viewport. It uses `d3.geoPath` to generate the path data for each feature, with the SVG sized dynamically based on the window dimensions.

Loading thumbnail…

Fork of Map hover

This example displays a map of Canada with each province rendered as an SVG path using d3.geoPath and a d3.geoAlbers projection. On mousemove, a tooltip div is shown and repositioned via inline CSS, while the province’s fill changes through a CSS hover class. On mouseout, the tooltip is hidden. The map data comes from a GeoJSON file loaded via d3.json, and the tooltip content is set with d3 selection’s .html method.

Loading thumbnail…

loading data to react from d3

This example demonstrates a React application that loads a cardiovascular disease dataset using d3.csv, displaying summary information about the data's row count and feature count as SVG text. A red circle tracks the mouse position across the full-window SVG element, with mouse coordinates displayed via SVG tspans. React hooks manage state for mouse location, loaded data, and a numeric counter, while d3.v7 handles the asynchronous CSV fetching through useEffect. The counter button appends numbers to an array, showing React's state update and re-rendering behavior alongside D3's data loading capabilities.

Loading thumbnail…

react intro mouse follower

A red circle follows the mouse cursor across a full-window SVG canvas, with live text displaying the current cursor X and Y coordinates. Built with React’s `useState` and `useCallback` hooks, the application uses an `onMouseMove` event handler to update the circle's `cx` and `cy` attributes. The code also loads cardiovascular disease data from a CSV file using `d3.csv`, logging the row count and feature count to the console while the React interface handles rendering.

Loading thumbnail…

Mouse follower React

A smiley face rendered as SVG responds to no user input, but its eyebrows perform a looping animation, moving down and up repeatedly. The demo uses D3 v5 selections and transitions to manipulate SVG elements, including circles for the face and eyes, rectangles for eyebrows, and a path for the mouth via the `arc` generator. The code structures the face using a centered group with translated subgroups for the eyes and eyebrows, while `transition.attr` with durations animates the eyebrow group’s vertical position. Built with React, the example runs in a plain HTML page with D3 loaded via CDN.

Loading thumbnail…

Fork of MIAGE base

This example demonstrates a draggable HTML div alongside an interactive SVG scene built with React and D3 v5. The SVG contains colored circles that animate on click and double-click events, and a separate rectangle that appends new colored rectangles as the mouse moves across the body. The React component tracks mouse position to render a circle, while D3 functions handle SVG manipulation and transitions. The page includes a draggable header, using CSS and JavaScript for the drag behavior, and displays a message element updated with D3 selectors.

Loading thumbnail…

Fork of Full Fork of Sol LeWitt with SHAPES Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js with SVG rendering. It displays a grid of horizontal and vertical lines that are partially masked by two overlapping shapes, creating a layered visual effect. The code uses `select`, `range`, and `join` to generate the line elements, while `symbol` and `symbols[1]` define a star-shaped mask. A second circular mask further modifies the visibility of the lines, producing an intricate interplay between the drawn paths and the masked regions.

Loading thumbnail…

Full Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v6. It renders a grid of alternating horizontal and vertical rectangles, with two overlapping circular masks creating a layered black-and-white optical effect at the center of the canvas. The code uses `d3.select`, `d3.range`, and the `.join()` method to bind data to SVG `<rect>` elements, while `<mask>` elements with circles define the visible regions. The visualization fills the entire browser window, with the artwork built entirely from SVG shapes and no external data sources.

Loading thumbnail…

Fork of Part 1 making Face

A yellow face rendered as SVG circles uses React 17 to compose static shape elements. Two smaller black circles form eyes, while a larger yellow circle defines the head outline. The code displays a simple geometric portrait without animation or interaction. React is loaded via UMD production build, and all drawing occurs declaratively through JSX-like syntax inside the HTML document. The rendering approach uses plain SVG markup within the React root, demonstrating basic circular primitives for facial features.

Loading thumbnail…

Part 1 making Face

A smiling face is drawn with simple SVG shapes: a yellow circle for the head, and two smaller black circles for the eyes. The visualization is a basic example of combining SVG markup with React, using the `react` and `react-dom` libraries to render a JSX header onto the page. The code also includes a static SVG face, created directly in the HTML, that demonstrates the geometric positioning of elements within a 960 by 600 canvas.