Ekuremaro

@Ekuremaro·17 public vizzes

refactor bar chart with MARGIN and axes united nations data

This bar chart displays population data for ten countries from the United Nations 2019 dataset, using horizontal bars to show each country’s population. The chart uses React with D3 v7, employing `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and SVG `rect` elements for the bars. Margins are implemented to position axes via reusable `AxisBottom` and `AxisLeft` components, with data loaded asynchronously using `d3.csv`.

May 20, 2022

Loading thumbnail…

Fork of bar chart with MARGIN and axes united nations data

This bar chart displays the top 10 countries by population from the United Nations 2019 dataset, with a horizontal layout that prioritizes country names on the y-axis. The React application loads CSV data using `d3.csv` and renders an SVG with `scaleBand` and `scaleLinear` for the axes. Margins are configured, and gridlines with tick labels are drawn using D3's scale methods. The bar lengths encode population values, while the chart includes a loading state message that reports data size in kilobytes.

May 20, 2022

Loading thumbnail…

bar chart with MARGIN united nations data

This example displays a horizontal bar chart of United Nations population data for the top 10 countries, showing each country's estimated 2020 population as a bar length. The visualization uses React with the D3 library, employing `d3.scaleBand` for the y-axis positioning and `d3.scaleLinear` for the x-axis scaling. The data is loaded via `d3.csv` from a GitHub-hosted CSV file. The chart is rendered as an SVG element with a 20-pixel margin on all sides.

May 20, 2022

Loading thumbnail…

bar chart with united nations data

This example displays a horizontal bar chart of the top ten most populated countries using 2019 United Nations data loaded from a CSV file. It renders SVG rectangles with React, where the bar widths are scaled by population using d3.scaleLinear and the country names are positioned with d3.scaleBand. The chart uses d3.csv to fetch and parse the data, loading only the first ten rows. While the data is loading, a status message displays the file size, row count, and column count using d3.csvFormat and d3.csv.

May 20, 2022

Loading thumbnail…

mouse events part 1

A smiling face is rendered as an SVG using React components for the background circle, eyes, and mouth. The face is composed of simple geometric shapes, with the mouth drawn using a D3 arc generator. The example demonstrates a static composition, with no interactive mouse events implemented despite the title. The code uses React to structure the SVG elements and D3's `arc()` function to define the mouth path, with a fixed viewport size of 960 by 500 pixels.

May 20, 2022

Loading thumbnail…

Fork of Visualizing data we got 2

A circular color wheel displays the full set of CSS named colors as wedges radiating from a common center. Using React to manage state and D3 v7’s `arc` generator and `csv` loader, the visualization reads color data from a GitHub-hosted CSV file and renders each row as an SVG `<path>` filled with its corresponding RGB hex value. The rings expand outward to the canvas width, creating a dense, rainbow-like spectrum that fills the viewport.

May 20, 2022

Loading thumbnail…

reformat to use d3 pie Visualizing data

This example uses React with D3 v7 to render a pie chart from a CSV file of CSS named colors. The visualization displays each color as a pie slice, with the fill color taken directly from the RGB hex value in the data. The app loads the CSV using `d3.csv`, then employs the `d3.pie` layout and `d3.arc` generator to compute and draw the SVG paths. The chart is centered via a transform, with inner and outer radii set to create a donut effect.

May 20, 2022

Loading thumbnail…

Visualizing data we got

This example visualizes a CSV file of CSS named colors, displaying each row as a horizontal strip filled with its corresponding RGB hex value to form a full color spectrum. The React application uses the `d3.csv` API to load data from a GitHub gist, tracking loading state with `useState` and `useEffect`. Each color entry is rendered as a div with a background color and fixed dimensions, creating a stacked composition. The interface also includes a loading message that reports the data size in kilobytes, row count, and column count once the CSV is parsed. React 18 and D3 v7 are loaded via UMD, with `ReactDOM.render` mounting the app to the root element.

May 20, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between horsepower, fuel efficiency (MPG), and vehicle weight for classic cars, with color encoding by country of origin. Built using the Vega-Lite API on top of Vega and Vega-Lite, it renders as a single SVG, configured through `vl.markCircle` and the `encode` method. Data is loaded asynchronously from a CSV via `d3.csv`, sourced from the UCI Auto MPG dataset. The visualization adapts to the browser window and includes tooltips via the Vega Tooltip handler.

May 20, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of historical automobile data, plotting horsepower against miles per gallon, with point color encoding weight and size encoding displacement. Built with the Vega-Lite API, the code uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to define the encoding channels, while `vega-tooltip` provides interactive hover details. The data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file containing auto-mpg measurements. The visualization renders using the Vega renderer within an SVG view, configured with custom axis styles for readability.

May 20, 2022

Loading thumbnail…

Loading data with react from csv

This example demonstrates loading a CSV file from a remote URL and displaying a summary of its contents using React and D3. The page shows the file size in kilobytes, total row count, and column count once the data loads successfully. The implementation uses React's `useState` and `useEffect` hooks to manage the asynchronous data fetching, while `d3.csv` retrieves and parses the CSV data, and `d3.csvFormat` calculates the formatted size. The data source is a gist containing CSS named colors.

May 19, 2022

Loading thumbnail…

mouse events

An SVG circle follows the mouse cursor across a 960×500 viewport, reacting to pointer movement in real time. The visualization demonstrates mouse event handling in a React component using D3 v7’s `arc` import (though unused) and React’s `useState` and `useCallback` hooks to update the circle’s position. Rendering occurs via SVG elements within the React tree, with the `onMouseMove` event updating `clientX` and `clientY` coordinates to reposition the black circle.

May 19, 2022

Loading thumbnail…

load and parse csv data

This example demonstrates loading and parsing a CSV file from a remote URL, displaying the result as a large text summary. It uses `d3.csv()` to fetch and parse the data, then reports the file size, row count, and column count via `d3.csvFormat().length`. The output appears in a styled `<pre>` element, with the data sourced from a GitHub gist containing CSS named colors.

May 19, 2022

Loading thumbnail…

Fork of Fork of smiley face modules

This example renders a modular smiley face using React components and D3’s arc generator. The face is assembled from reusable parts—background circle, eyes, and mouth—drawn as SVG elements within a container. D3’s `arc()` function creates the mouth’s path with specified inner and outer radii and angle ranges. The face’s dimensions, eye offsets, and mouth radius are passed as props, demonstrating a component-based approach to data-driven SVG visualization.

May 19, 2022

Loading thumbnail…

Fork of smiley face

This example renders a yellow smiley face as an SVG graphic using React and D3. It shows a face with two black eyes and a curved mouth, all positioned around a fixed center point. The mouth is drawn with the D3 `arc` generator using inner and outer radii and starting and ending angles. React components define each circle and path element, while D3 v7 handles the arc geometry and the SVG is rendered directly to the page.

May 19, 2022

Loading thumbnail…

Fork of Fork of smiley face

This example shows a simple yellow smiley face drawn as an SVG graphic, with two black eyes positioned symmetrically on a yellow circular face. The visualization is built using React (version 18.1.0) and rendered through the ReactDOM.render method into an HTML root element. The face and eyes are constructed from SVG circle elements, with hard-coded dimensions for the canvas width, height, center coordinates, eye offsets, and radii. The code demonstrates basic declarative SVG composition within React, without any interactive or animated behavior.

May 19, 2022

Loading thumbnail…

smiley face

A yellow circle with a black outline and two black inner circles forms a simple smiley face on a blank background. The SVG is rendered at 960 by 500 pixels, with the face centered and all shapes drawn using the `svg` namespace. The outer circle uses `cx`, `cy`, `r`, `fill`, and `stroke` attributes, while the eyes are positioned via absolute coordinates. The minimal HTML page contains no external libraries or scripts, relying solely on inline SVG elements and basic CSS to hide page margins.

May 19, 2022