mayhob

@mayhob·5 public vizzes

ScatterPlot

This example displays a scatter plot of work-related variables, with each point representing an initiative and color-coded by its category. The visualization loads CSV data from a GitHub repository and uses the vega-lite-api to construct the chart, with custom styling applied through a config object. The plot is rendered as an SVG, and interactive tooltips show initiative names on hover. The code integrates React for state management and uses d3.csv for data parsing, with VEGA-Lite handling the quantitative encodings for both axes.

Mar 1, 2022

Loading thumbnail…

Fork of Smoothed D3.js Radar Chart

This radar chart compares three smartphone brands—iPhone, Samsung, and Nokia—across eight attributes such as battery life, brand, and contract cost. The chart uses smoothed, rounded paths and colored blobs with glow filters to highlight each brand’s profile, with seven concentric grid levels and percentage labels. Built with D3.js v3 and React, it renders as SVG with animated transitions, using an ordinal color scale and a linear radius scale to map values within a circular grid.

Mar 1, 2022

Loading thumbnail…

Refactored Bar Chart

This is a refactored bar chart visualizing the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. The chart shows horizontal bars representing each country’s population, with axes on the bottom and left. Built with React and D3 v5, the code uses reusable components (AxisBottom, AxisLeft, Marks) that leverage D3’s scaleBand and scaleLinear to position bars and ticks, rendering everything as SVG elements within a React component.

Feb 27, 2022

Loading thumbnail…

5- Loading Data with React & D3

This example shows how React and D3 work together to load and summarize a CSV dataset of CSS named colors. The app displays a text readout with the file size in kilobytes, row count, and column count once the data arrives, or a "Loading..." placeholder beforehand. It uses React's `useState` and `useEffect` hooks to manage asynchronous state, and D3's `csv` function to fetch and parse the remote data. The `message.js` helper formats the summary using `d3.csvFormat` to calculate the byte length.

Feb 20, 2022

Loading thumbnail…

4-Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors, displaying the file size in kilobytes, row count, and column count. The visualization uses the d3.csv function from D3 v5 to fetch and parse the remote CSV data, then presents the summary statistics in a large HTML pre element. The code also includes commented-out alternatives using the Fetch API with async/await and d3.csvParse, highlighting different approaches to asynchronous data loading within a React framework.

Feb 20, 2022