alitemel89

@alitemel89·5 public vizzes

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset, showing the fluctuation of weekly temperatures. The visualization uses React with D3 v5 scales, including `scaleTime` and `scaleLinear`, to map data points as circles on an SVG canvas. Axes are rendered via custom React components, with `timeFormat` for date labels and a native SVG `<title>` element for hover tooltips. Data is loaded asynchronously using D3's `csv` method and processed through useState and useEffect hooks.

Jul 25, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This fork of the Pathetic Bar Chart displays the top 10 most populous countries as horizontal bars without axes. It uses React with a `useEffect` hook to load CSV data from the United Nations World Population Prospects 2019 via `d3.csv`. The visualization employs `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, rendering SVG rectangles and text labels. The code also generates tick marks and labels for the x-axis, though they lack visible axis lines.

Jul 23, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL using the Fetch API and D3 v5’s `d3.csvParse` function. It fetches a list of CSS named colors, converts the raw text into a structured data array, and logs the file size, row count, and column count to the browser console. The code includes commented-out variations showing alternative patterns like async/await and nested callbacks. No visualization is rendered on screen; the output is purely diagnostic via `console.log`.

Jul 22, 2022

Loading thumbnail…

Fork of Mouse Follower

This example demonstrates interactive mouse tracking within an SVG canvas, where a circle follows the cursor's movement across the viewport. The visualization uses React's `useState` and `useCallback` hooks to manage and update the mouse position state, triggered by the SVG's `onMouseMove` event handler. Rendered entirely with SVG elements in a React component, the circle's coordinates are dynamically set to the clientX and clientY values from the mouse event, creating a direct and responsive visual feedback loop.

Jul 22, 2022

Loading thumbnail…

Fork of Hello HTML

This example displays the minimal structure needed to render a web page by showing a blank HTML document. It contains an HTML root element, a head section with a page title, and an empty body. The page itself demonstrates no visualizations, using only the standard HTML tags defined by the World Wide Web Consortium, with no external libraries, scripts, or styling applied. The accompanying README file describes the setup as a bare minimum page.

Jul 22, 2022