Uzoemeka Okechukwu Innocent

Reuseable D3 Scatter Plot

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It employs a functional, configurable design using d3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to automatically compute scales and render axes. The code loads CSV data via d3’s `csv` and draws SVG circles with a fixed radius, adapting to the browser window’s dimensions. The implementation showcases a modular chart-building pattern with settable properties for dimensions, data, and margins.

Oct 4, 2023

Reusable D3 scatter plot

This reusable D3 scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal length for individual flowers. Built with D3 v7, it renders circles as SVG marks positioned by d3.scaleLinear scales derived from the data extents. The code uses d3.csv to load the data, d3.axisLeft and d3.axisBottom to generate axes, and d3.selectAll with data joins to bind circles. The visualization fills the entire browser window and includes a 24-pixel tick font size, making it suitable for large displays.

Sep 20, 2023

D3 scatter plot

This D3 scatter plot visualizes the classic Iris dataset by positioning each flower as a circle, with sepal length plotted on the y-axis and petal length on the x-axis. The circles are rendered as SVG elements using data-driven joins, with scales created via `d3.scaleLinear` and axes generated through `d3.axisLeft` and `d3.axisBottom`. The code loads the CSV data using `d3.csv`, parses numeric fields, and fills the entire viewport. Tick text is enlarged to 24 pixels for improved readability.

Sep 20, 2023

D3 scatter plot

This D3 scatter plot visualizes the Iris flower dataset, plotting petal length against sepal length for individual samples. The SVG rendering uses d3.scaleLinear to map data values to pixel coordinates, with d3.axisLeft and d3.axisBottom providing labeled scales. d3.csv loads the external data source, and d3.select creates circles for each data point. The chart fills the browser window, with margins separating the plot area from its axes.

Sep 19, 2023

Dynamic D3 Scatter Plot visualization

This dynamic scatter plot visualizes the Iris dataset, mapping petal width against sepal length and encoding species with distinct d3 symbol shapes. The SVG visualization uses d3.csv for data loading, d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbols for categorical markers, and d3.axisLeft/axisBottom for gridlines. It implements a reusable scatterPlot function with configurable accessors, margins, and symbol size, rendering marks as SVG path elements with translations. The plot fills the browser window and includes styled tick labels.

Sep 7, 2023

Fork of Dynamic D3 React Starter

This example shows an interactive scatter plot of the Iris dataset, rendered as SVG shapes whose positions map petal length and sepal length. It uses D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` APIs to draw symbols with a specified radius. The code loads CSV data from a GitHub gist via `d3.csv`, parses numeric columns, and creates a reusable scatter plot function that joins data to path elements. Styling includes large tick labels and a full-viewport layout.

Sep 7, 2023

Dynamic D3 React Starter

This example demonstrates a dynamic scatterplot visualization using D3 v7 within a React starter template. The code loads the Iris dataset from a GitHub Gist via `d3.csv` and renders points using SVG `path` elements with `d3.symbol` for distinct shapes, scaled by `d3.scaleLinear` and `d3.scaleOrdinal`. Axes are added with `d3.axisLeft` and `d3.axisBottom`. The visualization supports interactive resizing to the window dimensions and uses a reusable `scatterPlot` function pattern.

Reusable D3 Scatter Plot with symbols

This example presents a reusable scatter plot of the Iris dataset, where each flower species is represented by a distinct D3 symbol shape. The code uses `d3.scaleLinear` to map petal length and sepal length to x and y positions, `d3.scaleOrdinal` with `d3.symbols` to assign symbol types by species, and `d3.axisLeft` and `d3.axisBottom` for axes. Data is loaded as CSV via `d3.csv`, and the plot is rendered as SVG within a customizable margin.

Fork of D3 Starter

This example displays the text “Hello D3 version 7” in the center of a web page using a font size of 13em. It serves as a minimal starter template, showing how to load D3 version 7 from the unpkg CDN and apply its selection API. The code uses `d3.select` to target the body element and calls the `.text()` method to set its content, with styling defined in an inline CSS block.

Fork of Reusable D3 Scatter Plot

This example displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses a reusable D3 module pattern with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The code loads data via `d3.csv` from a gist, parses numeric fields, and applies a configurable margin and radius through a closure-based API. The visualization fills the browser window and uses a full-screen SVG without additional interaction.

Reusable D3 Scatter Plot

This example demonstrates a reusable D3 scatter plot using the Iris dataset, visualizing petal length against sepal length with circular marks. The code, written by InnocentSky and rendered as SVG, uses `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and a configurable `scatterPlot()` factory function that accepts setters for width, height, data, margin, and radius. Data is loaded asynchronously via `d3.csv`, with numeric parsing applied to all measurement columns. The plot fills the browser window and includes styled tick labels.

Fork of Reuseable D3 Scatter Plot

This visualization shows a scatter plot of the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis using blue circles. The code loads the CSV data via `d3.csv`, parses numeric fields, and scales the data with `d3.scaleLinear` using `d3.extent` for domains. It renders SVG circles and adds axes using `d3.axisLeft` and `d3.axisBottom`, with the plot sized to fill the browser window.

Reuseable D3 Scatter Plot

This example demonstrates a reusable scatter plot built with D3.js, visualizing the Iris dataset by mapping petal length to the x-axis and sepal length to the y-axis. The code uses `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.axisLeft` and `d3.axisBottom` to render the ticks and labels. Circles are drawn as SVG elements with dimensions that adapt to the full browser viewport, using the `d3.select` and `join` pattern for efficient data binding.

Reuseable Scatter Plot on D3

This example demonstrates a reusable scatter plot component built with D3 and React. It visualizes the Iris dataset, plotting petal length against sepal length, with each data point rendered as a circle with a radius of 5 pixels. The visualization uses D3’s `csv` function to fetch and parse data from a remote URL, and the `select` API to create an SVG canvas that fills the browser window. The scatter plot is implemented as a customizable function, accepting configurable properties for dimensions, margins, data, and axis value accessors.

Resuable D3 Scatter Plot

This reusable scatter plot component renders a static 2D chart, plotting a set of points against numerical x and y axes using D3.js scales and SVG. The code defines a single point dataset and draws circles with a default radius and fill color, while displaying axis labels and tick marks via d3.axisBottom and d3.axisLeft. The chart is built as a configurable function, allowing users to pass custom data, margins, and dimensions for reuse. The accompanying HTML file is minimal, showing only a placeholder message, and does not include any interactive or animated behaviors.

Aug 22, 2023

Fork of Hello VizHub

This example demonstrates D3.js module importing and basic DOM manipulation. It loads D3 v5 from UNPKG and uses the `select` function to set the text of a `div` element to 'Hello VizHub!'. The code also shows local ES6 module imports via `myMessage.js`, and applies styling from an external CSS file. The visualization is minimal, focusing on framework structure rather than data rendering.

Aug 17, 2023

Introduction to D3

This example demonstrates basic vector graphics construction with D3 version 7, using d3.select to append SVG shapes (circle, rect, and line) to the document body within a 500×500 coordinate space. The code loads D3 from UNPKG and directly manipulates attributes such as cx, cy, r, fill, width, height, and line endpoints, though it notably contains attribute typos (e.g., `widht` instead of `width`) and redefinitions that the renderer would interpret. The visualization serves as a minimal introduction to D3’s SVG API, highlighting how to create and stylize geometric primitives without data binding or interaction.

Fork of Let's make a face with D3.js!

This example displays a smiling face constructed from SVG shapes, including a yellow circle, two eyes, and a mouth path with a curved arc. Built with React and D3.js v7, it uses the `arc()` function from d3-shape to generate the mouth with specified inner and outer radii and angles. Positioning is handled through SVG transforms, with the face centered on an 960×500 viewport. The code demonstrates proportional sizing by calculating radii relative to the center coordinates and stroke width.

Fork of Fork of Let's make a face with D3.js!

This example draws a smiling face using SVG circles and an arc path. The face is composed of a yellow circle for the head, two smaller circles for the eyes, and a mouth created with D3’s `arc` generator. The code uses React to render the SVG elements and D3 v7 for the arc path calculation, applying a black stroke to the head and positioning all elements relative to the center of the viewport.

Fork of Fork of D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. Each data point is rendered as a circle on a full-screen SVG canvas using D3 v7. The code loads the CSV data from a GitHub Gist via `d3.csv`, then uses `d3.scaleLinear` with `d3.extent` to compute the scales. Axes are added with `d3.axisLeft` and `d3.axisBottom`, while the tick labels are enlarged to 24 pixels for readability.

Fork of D3 Scatter Plot

This visualization shows the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. It renders circular marks in an SVG canvas using D3 v7’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, with data loaded via `d3.csv` from a GitHub Gist. The plot fills the entire browser window, uses a minimal margin layout, and includes large tick labels for readability.

D3 Scatter Plot

A D3 scatter plot visualizes the Iris dataset from a CSV file by encoding petal length on the x-axis and sepal length on the y-axis. The code loads data with `d3.csv`, scales the values using `d3.scaleLinear`, and renders circles as SVG elements with axes added via `d3.axisLeft` and `d3.axisBottom`. The visualization fills the entire browser window and uses the classic three-species flower measurements to reveal clustering patterns in flower dimensions.

Learning Scatter Plot on D3

This example demonstrates a minimal scatter plot setup using D3 within a React framework. The page displays a simple HTML message with large centered text, along with a basic CSS styling. The code initializes an SVG-less visualization, focusing on the foundational structure for future D3 scatter plot development. It does not yet render actual data points, instead serving as a starting template that references the D3 v3 library and React integration patterns. The implementation uses plain HTML and CSS, with the message element serving as a placeholder for the forthcoming chart.

Aug 2, 2023

html stater

This example demonstrates a minimal D3 version 7 starter page that renders the text “Hello D3 version 7” in the center of the viewport using the `select` API from the D3 library. The page loads D3 from a CDN and relies on a large CSS font size, set to 13em, to visually focus the output. The entire application is defined in a single `index.html` file with an embedded JavaScript call that updates the body element’s text content.

Jul 31, 2023

HTML Cars Report

This example presents a simple HTML-based cars report, displaying a list of three used vehicles with their model years and prices. The page uses a plain HTML unordered list within a styled body, with a large font size for readability. The data is hardcoded directly in the markup rather than loaded externally. The visualization relies solely on standard HTML elements and inline CSS, with no JavaScript libraries or SVG features involved.

Jul 13, 2023