NyashaBradleymhepo

@NyashaBradleymhepo·10 public vizzes

Fork of Making A Bar Chart

This bar chart displays population estimates for ten countries, with population values read from a CSV file and converted from thousands to the raw count. The visualization uses D3 v7's `scaleLinear` and `scaleBand` to map population to bar width and country names to vertical bands, respectively, rendering the result as SVG. Axes are generated with `axisBottom` and `axisLeft`. The bars themselves are styled with a steelblue fill via CSS, and the layout applies fixed margins to position the chart within the SVG canvas.

Aug 3, 2023

Loading thumbnail…

D3 Chart with CSV Data

This example visualizes hierarchical data from a CSV file, plotting `team_score` values for each `team_name` as horizontal bars. The bar chart initially presents a top-level overview, with the ability to drill down into nested categories. The code uses D3 v6 APIs including `create`, `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, `csv`, and `hierarchy` to load external CSV data, construct the scales, and build the interactive, drillable bar chart. The rendering is done via an SVG container, with axes drawn on the left and bottom margins.

Aug 3, 2023

Loading thumbnail…

Fork of Bradley test Fork of D3 Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length against sepal length for individual flowers. Built with D3 v6, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` to render axes. The SVG canvas fills the browser window, with each data point drawn as a circle using D3's `selectAll` and `join` operations.

Aug 2, 2023

Loading thumbnail…

Fork of SVG Fundamentals Dynamic landscape practice

This animated SVG landscape depicts a stylized sunrise and sunset cycle over layered mountain silhouettes. The sky backdrop and terrain use radial and linear gradients, while a circle representing the sun animates its vertical position. SVG `<animate>` elements continuously shift gradient stop colors between aliceblue and steelblue, and the sun’s `cy` attribute moves from 250px to 350px and back, simulating a day-night loop. The scene combines three distinct path shapes filled with gradient definitions to create depth.

Jul 19, 2023

Loading thumbnail…

Bradley test Fork of D3 Scatter Plot

This visualization displays the Iris dataset as a scatter plot, plotting petal length on the x-axis against sepal length on the y-axis. Each data point is rendered as a circle using D3 v6’s selection and join methods, with scales defined by `scaleLinear` and axes generated via `axisLeft` and `axisBottom`. The plot fills the entire browser window, and the code loads CSV data asynchronously with `d3.csv`, parsing numeric fields before mapping coordinates to SVG circles.

Jul 19, 2023

Loading thumbnail…

D3 scatter plot

This example loads the classic Iris dataset from a GitHub gist using `d3.csv` and logs each row to the browser console. It sets up a minimal HTML page with the D3 v7 library included via CDN, defining a `parseRow` function that currently returns data unchanged. The visualization itself is not yet implemented; the code demonstrates the initial data-loading stage for a scatter plot, with the styling and rendering left to be added.

Jul 19, 2023

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It encodes individual flowers as circles rendered in SVG, sized uniformly with a radius of 5 pixels. The example uses d3.csv to load the external CSV file, d3.scaleLinear with d3.extent for continuous scales, and d3.axisLeft and d3.axisBottom to generate the axes. The chart adapts to the viewport by sizing the SVG to the window’s inner width and height.

Jul 19, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric pattern using D3 v6 and SVG rendering. It displays a grid of horizontal and vertical rectangles overlaid with two circular masks, creating a layered, minimalist composition of intersecting lines and a central void. The visualization uses `d3.select`, `d3.range`, and `.join()` to generate 100 rectangles in each orientation, while SVG `<mask>` elements define the circular cutouts. The `circle-mask` uses a black background with a white circle, while `circle-mask-2` inverts the effect, producing contrasting visual regions across the full viewport.

Jul 19, 2023

Loading thumbnail…

Fork of D3 Implementation first day

This example demonstrates a minimal, full-screen grid of horizontal and vertical stripes that become visible only through two circular windows. Built with D3.js version 7, it uses the `select` API to append SVG elements, `range` to generate 100 coordinates, and iterative `join` operations to create and position the rects. Two SVG masks—one with a central white circle on a black field, the other inverted—define the circular reveal for the horizontal and vertical stripe layers, respectively.

Jul 19, 2023

Loading thumbnail…

D3 rugby plyer stats

This example presents a static SVG graphic titled "D3 rugby plyer stats," featuring two primitive shapes: a single circle and a blue rectangle. The visualization uses D3 version 6 within an HTML document, despite the absence of dynamic data or statistical plots. The scene is rendered via SVG elements, drawing the circle at coordinates (50,50) and a 300x500 rectangle at (400,100). The code directly employs SVG markup rather than higher-level D3 APIs, showing only basic shape creation without data binding or interactive behavior.

Jul 19, 2023