F

Fouzia A.

@fariahkhan·16 public vizzes

Loading thumbnail…

Running Total of TMDb Movies by Year

This example shows the cumulative growth of TMDb movies over time, with steel-blue bars representing the running total for each year. The visualization uses D3 v5 to load CSV data via `d3.dsv`, parse years with `d3.timeParse`, and render the chart as SVG. A time-scaled x-axis (`d3.scaleTime`) with ticks every ten years and a linear y-axis (`d3.scaleLinear`) position the bars. Axis labels and a title are added, while the data is fetched from a local CSV file using D3's fetch and DSV modules.

Loading thumbnail…

Fork of Making A Bar Chart

This bar chart displays the populations of the ten most populous countries, with each bar's length corresponding to the population value from a CSV file. Built with D3 v7, the visualization uses `scaleLinear` and `scaleBand` to map population counts and country names to the chart's dimensions, and `axisLeft` and `axisBottom` to render the axes. The SVG output is generated by appending rectangles to a group element, with the data loaded via `csv` and parsed to multiply each population value by 1000.

Loading thumbnail…

Untitled

This example demonstrates how to begin using D3 version 6 by loading a LEGO brick network from a GEXF file, with nodes representing different brick types and colors. The code uses `select` from D3 to target the body element and sets its text content as a placeholder message. The visualization relies on the GEXF data structure, which includes node labels and color attributes, though the current implementation stops short of rendering a full graph. It serves as a minimal starting point for integrating D3 with external graph data formats.

Loading thumbnail…

Sol LeWitt Reproduction Vertical

A generative geometric composition reproduces Sol LeWitt's vertical wall drawing across a CSS grid of nine cells, with triangular polygon clusters forming striped patterns that repeat symmetrically. The central cell layers a dark square rotated 45 degrees over a lighter diamond shape, using SVG masks to clip the pattern. Implemented in JavaScript with D3, the visualization calculates polygon points procedurally and uses `selectAll` with `.join('polygon')` to render shapes, while `d3.symbol` and `symbols` draw the rotated square forms.

Loading thumbnail…

Untitled

This example demonstrates a minimal D3 version 7 setup that renders the text “Hello D3 version 7” directly on the page. It uses the `select` function from the D3 library to target the `body` element and set its text content. The visualization is static and serves as a basic starter template for integrating D3 with other tools like Figma, as described in the accompanying README. No interactive features or data processing are present in the code.

Loading thumbnail…

Hummingbird Animation

A purple circle representing a hummingbird hovers near a stylized tree, bobbing up and down beside a green canopy in a static sky-blue scene. The animation uses D3.js v7 selections and transitions, repeatedly moving the circle’s `cy` attribute between 200 and 180 pixels over a 3000-millisecond duration. The SVG rendering includes simple geometric shapes for the background, trunk, and leaves, with the hummingbird’s motion driven by chained transition callbacks that create an endless loop.

Loading thumbnail…

Hummingbird Animation

A hummingbird bobs up and down beside a tree in a simple SVG scene, with a light blue sky and green foliage providing the backdrop. The animation relies on D3 v7's `transition` method to move the bird’s `cy` attribute between two vertical positions in a looping sequence. The example uses basic SVG shapes—`rect` and `circle`—and demonstrates a minimal, self-contained D3 animation without external data sources or complex rendering.

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example renders an animated sunrise and sunset scene using SVG. A radial gradient sky backdrop shifts from aliceblue to indigo, while a circle representing the sun moves vertically via SVG `<animate>` elements. Two layered landscape paths use linear gradients that also transition colors, creating a day-to-night cycle. The visualization relies solely on native SVG animation and gradient APIs, with no JavaScript libraries or data sources involved.

Loading thumbnail…

Fork of SVG Playing Around and Studying

The scene depicts a stylized landscape with a tree, birds, and a sun, all rendered as SVG elements that are procedurally generated and animated over a 24-second cycle. The code constructs SVG nodes using the Document API (`createElementNS`) and defines custom gradients and path data for the bird and scenery. The sky's color changes through an animated gradient, while the sun's radial gradient and bird transformations (scale, translate, rotate) are applied via CSS keyframes. This visualization uses raw SVG primitives and JavaScript, without external libraries, to create a dynamic, time-based composition.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple sunrise and sunset animation using a yellow circle that moves vertically within an SVG canvas. The circle alternates between two positions—descending to the bottom and rising to the top—via a CSS `@keyframes` rule named `sunrise-sunset`, applied with an infinite alternate timing function. The markup also includes a static SVG circle and a brief demonstration of D3 version 7's `select` function to insert text into the body. The animation runs in a 500x500 viewport, showing basic CSS-driven motion without JavaScript interaction or external data.

Loading thumbnail…

Practice

This example shows a minimal HTML page that displays the text “Hello HTML!” centered in the viewport using CSS for styling. The code includes an inline SVG element with a width attribute, though it contains no visual content, and a CSS rule for font size and text alignment. The page demonstrates basic integration of HTML, CSS, and JavaScript, with the latter not yet adding interactivity or data rendering. The example serves as a foundational practice for building web-based visualizations, referencing React Starter as a potential next step.

Loading thumbnail…

Fork of NYC Crime

This interactive visualization presents NYC crime data through a coordinated set of views: a geographically accurate map with a heatmap legend, a pie chart of crime types, and bar charts for age and race breakdowns. Users can click map precincts and toggle the reset button to filter all views dynamically. The map uses a Mercator projection with `d3.geoPath`, while pie and bar charts rely on D3 scales and arcs. Data is rendered as SVG with animated transitions, initialized from the `d3.v6` library.

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering within an HTML page, showing a green circle, a navy line, and an empty path element. The visualization uses the SVG specification directly in the markup rather than generating shapes programmatically. The accompanying JavaScript imports the `select` function from D3 version 7 and writes "Hello D3 version 7" into the document body, illustrating simple DOM manipulation. The code serves as an introductory template for combining static SVG graphics with the D3 library's selection API.

Loading thumbnail…

SVG Fundamentals

This example demonstrates the creation of SVG graphics using D3 version 6, setting up basic shapes like circles, rectangles, and lines within an SVG canvas. The code uses the `d3.select` API to target the body element and render text. The SVG elements are defined directly in the HTML markup with inline attributes for positioning, fill colors, and stroke styling, showing how raw SVG coordinates and properties function. The accompanying video provides additional context on D3's SVG rendering capabilities.

Loading thumbnail…

D3 Starter

This example demonstrates the simplest possible D3 setup, displaying the static text “Hello D3 version 7” centered in the browser window. It uses the D3 v7 library, loaded via a CDN, and the `select` API from that library to target the body element and set its text content. The page is styled with CSS for large, centered typography, and the visualization logic is separated into an external JavaScript file. No data source or dynamic rendering is involved; it serves purely as a minimal template for verifying D3 installation.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 starter template that renders the text “Hello D3 version 7” in the center of the page. It imports the `select` function from the D3 v7 library to target the `<body>` element and set its text content. The page loads D3 from a CDN, with the CSS applying a large font size for visual emphasis, and the main logic is contained in a separate `index.js` file bundled via `bundle.js`.