Rashidi

@salam4life2270·12 public vizzes

Fork of Bar chart with D3.js new

This bar chart visualizes the popularity of ten programming languages using survey data from Stack Overflow, 2019. Each bar represents a language, with horizontal gridlines and a y-axis showing percentages. On hover, the chart highlights the selected bar, draws a dashed horizontal line at its value, and overlays white text on every bar showing the percentage divergence from the hovered language. Built with D3.js v5, the visualization uses d3.scaleBand for positioning, d3.scaleLinear for the y-axis, and d3.axisLeft/axisBottom for ticks.

May 17, 2023

Loading thumbnail…

Fork of Fork of VizHub Cumulative Unique Logins

This visualization tracks the cumulative total of unique logged-in VizHub users over time, from the platform’s launch in August 2018 through April 2023. A black line chart with small circles for each data point shows steady growth, with annotations labeling key milestones like the VizHub 1.0 medium post, the 2.0 Kickstarter, and the Datavis 2020 launch. The code uses d3.v4 with d3.scaleTime, d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft, rendering to SVG, and includes d3-svg-annotation for the labeled callouts.

May 15, 2023

Loading thumbnail…

Fork of VizHub Cumulative Unique Logins

This chart traces the cumulative number of unique VizHub users from its launch in August 2018 through April 2023, using an SVG line chart with points. It highlights key growth events, such as a medium post, the VizHub 2.0 Kickstarter, and the Datavis 2020 launch, through annotated labels. The data is loaded from a CSV file and rendered with d3.v4, using d3.scaleTime, d3.scaleLinear, d3.line, and d3-axis, with d3-svg-annotation providing the contextual notes.

May 15, 2023

Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart displays two years of personal electricity consumption for a three-family structure, broken down by individual meter account numbers and read dates. It shows the total kilowatt-hours used per month, with separate colored segments for each account, and includes a legend for account identification. The visualization uses `d3.stack` for data transformation, `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` with `d3.schemeCategory10` for account colors. Interactive hover events enlarge bars and display tooltips via SVG `<title>` elements, while the chart is rendered as SVG.

May 11, 2023

Loading thumbnail…

Fork of Making A Bar Chart

This example presents a horizontal bar chart of country populations, with the countries listed in descending order of population. The visualization uses D3 v7, loading data from a CSV file and rendering it as SVG graphics. It employs the `scaleLinear` and `scaleBand` scales to map population values and country names to the plotting area, with `axisLeft` and `axisBottom` generating the corresponding axes.

May 11, 2023

Loading thumbnail…

D3 reusable graph

This example demonstrates a minimal D3.js visualization setup that prints the D3 library to the console. The code uses the d3.v7 release loaded from an external script tag, and includes a stylesheet that applies 24px font size to axis tick text and removes page margins. The visualization renders no actual data or graphics, serving only as a bare-bones HTML page that confirms the D3 library is available for use.

May 11, 2023

Loading thumbnail…

D3 JavaScript Modules & Build Tools

This example demonstrates a minimal HTML page styled with CSS, rendering the message “Hello HTML!” as the core visualization. It uses plain JavaScript embedded in the page, with a CSS class controlling the large, centered font size. The code highlights the distinction between raw HTML/CSS/JavaScript and the modular, toolchain-driven workflow typical of D3 v3 with React, serving as a simplified baseline for understanding build tools and module bundling in data-visualization projects. No external libraries or data sources are used beyond the standard web platform.

May 11, 2023

Loading thumbnail…

D3 Selection

This example demonstrates SVG selection and cascading updates using D3 within a React application. It creates an interactive smiley-face visualization by appending circles to an SVG canvas sized to the browser window. The code leverages D3’s `select` and `selectAll` APIs to traverse the DOM and bind data from a range of fifteen values, positioning each circle horizontally based on its index. The implementation relies on React for component management and D3 for DOM manipulation, with all shapes rendered as vector-based SVG elements.

May 11, 2023

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This React and SVG visualization renders a full-screen smiley face, centered and scaled to the browser window’s dimensions using `window.innerWidth` and `window.innerHeight`. The head is a yellow circle with a black stroke, while two offset circles form the eyes, computed from `eyeOffsetX`, `eyeOffsetY`, and `eyeRadius`. The code uses React’s `ReactDOM.render` to inject the SVG into the DOM, with the face drawn via a `<g>` group transformed to the canvas center. No mouth is drawn, leaving the expression incomplete.

May 11, 2023

Loading thumbnail…

SVG Demo

This demo shows basic SVG shapes composed directly in HTML markup, including a circle, rectangle, line, and path. The SVG element uses a fixed 960x500 viewport with inline styling for stroke and fill attributes. It renders static vector graphics without any JavaScript libraries or data sources, relying solely on native SVG presentation attributes. The message styling suggests decorative intent, while the line element contains duplicated X1 attributes and the path draws a simple polyline.

May 8, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as a responsive SVG that fills the browser window. The face’s head is drawn as a circle centered on the viewport, with its radius calculated from the window height, and two fixed-offset eyes are positioned symmetrically around the center. The code uses React to define the SVG elements declaratively and ReactDOM to mount the component into the page’s root element. Window dimensions are read directly via `window.innerWidth` and `window.innerHeight`, and all drawing is handled by SVG primitives such as `<circle>` and `<g>` with transform translations.

May 4, 2023

Loading thumbnail…

Smiley face HTML

A yellow circle with two black eyes forms a simple smiley face on a blank page. The face is drawn entirely with SVG primitives, using a large `circle` element with a yellow fill and black stroke for the head, and two smaller black `circle` elements for the eyes. The inline SVG is embedded directly in a minimal HTML document, with body margins removed via CSS to create a clean, full-window display. No additional libraries or data sources are used; the visualization is purely declarative SVG markup.

May 4, 2023