Mohammad Afaq Khan

@mkhan1·6 public vizzes

React Starter

D3 v5 and React render a static array of eight numeric values as a sequence of teal bars, with each bar’s height proportional to its data value. The code showcases D3’s select, data binding, and transition APIs in a browser-based animation, using `d3.select` to append paragraphs and styled `div` elements. A 10-second transition animates the bar heights from their initial 75-pixel default to the computed `d*10` pixel values, while a separate heading labels the visualization “Var Values In Respective Order.” The dataset is embedded directly in the HTML script, and the React framework is referenced via the starter project structure, though no React components appear in the visible code.

May 20, 2020

Loading thumbnail…

React Starter

This example displays a series of teal bars and red text values derived from a hardcoded dataset. The visualization uses D3 v5 within a React environment, employing `d3.select` to locate elements and a bar chart transition to animate height changes over ten seconds. The rendering relies on SVG-less HTML divs and paragraphs, with the x-axis labeled “Vars.”

May 20, 2020

Loading thumbnail…

React Starter

A React starter template renders a dataset as a static bar chart inside an HTML page. Using D3 v5, the visualization appends red paragraph elements for each value and creates teal div bars whose heights correspond to the numeric data, with an animation applied via a ten-second duration during the transition. The code employs `d3.select`, `.data()`, and `.transition().duration()` to build the graph, showing eight variables from an inline array.

May 20, 2020

Loading thumbnail…

React Starter

A React Starter page demonstrates the mapping of a hardcoded numeric array to animated bar charts and red text values. The visualization uses D3 v5 to bind an eight-element dataset to DOM elements, creating teal bars whose heights transition over ten seconds via `transition().style()` calls. Text values appear as red paragraph elements, while the page title and axis label are plain HTML. The example integrates D3 selections with static React markup, showing basic data-driven styling and animation without external data loading or complex layout systems.

May 20, 2020

Loading thumbnail…

HTML Starter

A bare HTML page that renders the text "Hello HTML" in the browser, centered and displayed at a very large font size of 13em. The example serves as a minimal starter template for HTML projects, using only inline CSS within a `<style>` tag to control the layout. It includes a separate `p.js` file that requires D3.js and appends a paragraph with the text "Test New Para!" to the body, demonstrating how to integrate D3 into a simple HTML document.

May 20, 2020

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot, built with React and D3 v5, visualizes the Iris Dataset, plotting petal length against sepal width. An ordinal color scale distinguishes the three iris species, and a color legend with mouse hover effects enhances exploration. When a species is hovered, the chart fades all non-matching data points using an opacity transition, allowing for focused comparison. The visualization uses SVG rendering and D3 scales for axes and color encoding.

May 20, 2020