Ulbert Alain Odle

@UlbertAlainOdle·9 public vizzes

Stylized Line Chart

This stylized line chart visualizes the relationship between time and money sold, using data from the Data Canvas Sense Your City dataset. It presents a smooth, natural curve through the points, drawn with a thick teal stroke. The chart uses React to render SVG elements, with scales and axes created using D3's `scaleTime`, `scaleLinear`, `extent`, and `timeFormat`. The line's path is generated with D3's `line` and `curveNatural` functions, while the tick marks and labels are custom components. The visualization is styled with the Poppins font and a distinct color palette.

Oct 20, 2021

Loading thumbnail…

on me way

This line chart visualizes bicycle sales over time, with a black path connecting data points to show the trend. The plot uses D3 scales (`scaleTime`, `scaleLinear`) for axes and a React-based rendering pipeline with SVG output. Data is loaded as CSV from a gist and parsed with `d3.csv`. Axes are generated via custom React components, while the line path is drawn using the `d3.line` generator. Styling applies Poppins font and muted teal accents.

Oct 19, 2021

Loading thumbnail…

lllooollll

This example visualizes the population of the world's top 10 most populous countries as a scatter plot, with each country represented by a circle. The chart uses a linear scale for both axes, with the x-axis formatted using a custom tick formatter that converts large numbers to abbreviations (e.g., "B" for billions). The visualization is built with React and renders SVG elements, using D3 v5 for scaling and data loading from a CSV file of iris data. Tooltips display the x-axis value for each point on hover.

Oct 12, 2021

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City Dataset, with each circle representing a single measurement across the week. The visualization uses React to render SVG elements, employing d3.scaleTime and d3.scaleLinear for the x and y axes alongside d3.extent for domain calculation. The code demonstrates a modular component structure with separate AxisBottom, AxisLeft, and Marks components, and features native SVG circle elements with titles for tooltips. Data loading is handled through d3.csv, while the playful "Loading..." placeholder displays during the asynchronous fetch.

Oct 11, 2021

Loading thumbnail…

Bary Bar Bar React & D3

A donut chart displays all 148 CSS named colors as equal-sized slices, with each slice filled by its corresponding hex value. React manages the asynchronous loading of the CSV data via the `useState` and `useEffect` hooks, while D3's `csv`, `pie`, and `arc` utilities transform the dataset into SVG `path` elements rendered inside a React component. The visualization highlights the full spectrum of named colors in a single circular layout.

Oct 10, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example shows a color wheel visualization built from CSS named colors, with each slice of the pie representing one color from the dataset. The code loads the data using D3’s `csv` utility and manages the asynchronous state with React’s `useState` and `useEffect` hooks. The pie layout is generated with `d3.pie`, and each slice is rendered as an SVG path using `d3.arc`. The fill color of each path is taken directly from the `RGB hex value` column in the loaded CSV data, creating an immediate visual mapping between the data and its representation.

Oct 10, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5’s `d3.csv` method, fetching a dataset of CSS named colors from a GitHub gist. The code calculates and displays the file size in kilobytes, the number of rows, and the number of columns in a large HTML `<pre>` element. It also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse` to show different parsing approaches. The visualization is purely textual, with no graphical rendering, focusing on data-loading mechanics.

Oct 10, 2021

Loading thumbnail…

Fork of React + D3 Viz Starter

This example shows a minimal React and D3.js visualization starter with a blank SVG canvas ready for custom charts. The code imports React, ReactDOM, and d3.v6 via CDN, then defines a reusable `VizContainer` component that creates an SVG group element following the standard margin convention. The component accepts props for width, height, margins, and inner dimensions, and renders optional gray and light-gray rectangles when the `showMargins` prop is true to visualize the chart area boundaries. The main `App` component renders the container with fixed dimensions and empty child elements.

Oct 10, 2021

Loading thumbnail…

1. HTML Starter

This example shows a smiling face built with SVG shapes, including a yellow circle for the head, two smaller circles for eyes, and a curved mouth arc. The visualization is rendered using React with D3’s `arc` generator to define the mouth path, while the SVG elements are positioned with fixed pixel coordinates. It demonstrates a minimal setup for combining React, D3 v7, and SVG in an HTML page, with the face drawn centered on a 960 by 500 canvas. The code does not use data-driven features, instead hardcoding geometry values.

Oct 9, 2021