Alexalim28

@Alexalim28·15 public vizzes

Fork of Let's make a map with D3.js!

This example shows an interactive world map built with D3.js v5, rendered as SVG. It displays country boundaries in red fill with a dark blue sphere background, and includes a title tooltip on hover showing each country’s name. The map uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate paths, and `d3.zoom` for pan and zoom interaction. Country geometries come from TopoJSON data in the world-atlas package, joined with ISO country names from a TSV file, while `d3.scaleOrdinal` defines the color scheme.

Aug 28, 2021

Loading thumbnail…

Stylized Line Chart

This stylized line chart shows daily temperature variations over a week. The visualization uses a smooth natural curve to connect data points, with circular markers displaying tooltips on hover. Built with React and D3 v5, it employs d3.scaleTime, d3.scaleLinear, and d3.line with curveNatural to render the SVG path. The chart reads CSV data from a GitHub gist containing San Francisco weekly temperatures, and includes styled axes with formatted day labels. The design uses a Poppins font and teal color scheme for a modern aesthetic.

Aug 3, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays the Iris flower dataset as a scatter plot, mapping sepal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, the code uses `csv` from D3 to load the data and `scaleLinear` to create the axes. SVG circles represent each data point, with hover tooltips showing formatted values. The `AxisBottom` and `AxisLeft` components render gridlines and labels using React components that generate SVG elements.

Aug 1, 2021

Loading thumbnail…

Rendering data with data

This example visualizes data about CSS named colors by using that data itself to render colored rectangles. The application loads a CSV file containing population statistics from the United Nations using D3’s `csv` utility, then employs React to generate an SVG output where each data row maps to a rectangle. The code also prepares a summary message using `d3.csvFormat` to display the data size in kilobytes, row count, and column count. The visualization is built with React’s `useState` and `useEffect` hooks to fetch and manage the dataset.

Jul 31, 2021

Loading thumbnail…

Fork of Fork of Loading Data with React and D3

This example loads a CSV of CSS named colors and displays a summary of the dataset’s size, row count, and column count in large text. It demonstrates combining React state management with D3’s data-loading utilities, specifically `d3.csv`, to fetch external data asynchronously. The visualization uses the `useState` and `useEffect` hooks to trigger the data request and update the rendered message, while `d3.csvFormat` calculates the file size for display. The raw data comes from a GitHub-hosted gist and is rendered as text without any graphical chart.

Jul 30, 2021

Loading thumbnail…

Fork of Loading Data with React and D3

This example demonstrates the use of D3 utilities and React state to load and summarize a dataset of CSS named colors. It shows both a loading message and a three-line summary of the data: size in kilobytes, number of rows, and number of columns. The code uses React's `useState`, `useEffect`, and `d3.csv` to fetch the remote CSV file, then formats it with `d3.csvFormat` within a custom `message` function. The React application renders the text output inside a `<pre>` element.

Jul 30, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the top five religions by country, displaying a grouped bar chart where each bar’s height encodes population and color encodes religion, with tooltips showing exact population values. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite for rendering, and loads CSV data via `d3.csv` from a GitHub gist. The chart uses a dark-themed configuration to improve readability, with custom axis and label styling. Rendering is handled by Vega’s SVG renderer, and interactivity is provided through Vega Tooltip.

Jul 29, 2021

Loading thumbnail…

Fork of Mouse Follower

A React application renders an SVG circle that follows the mouse cursor across a 960-by-500 canvas. The circle’s position updates on every `mousemove` event using React’s `useState` and `useCallback` hooks, with the client coordinates stored in state. The example demonstrates real-time mouse tracking within an SVG element, relying on React 16.9 and ReactDOM for rendering, and is styled with minimal CSS to hide page overflow.

Jul 29, 2021

Loading thumbnail…

Fork of Fork of Mouse Follower

A yellow circle follows the mouse cursor across a full-screen SVG canvas, repositioning itself to match the pointer’s exact coordinates. The visualization uses React state management with a `useState` hook and `useCallback` for the mouse-move handler, while `d3.arc` is imported but not directly used in this implementation. The rendering is driven by React’s declarative SVG elements, with D3 v5 loaded via CDN but not contributing to the core interaction logic.

Jul 29, 2021

Loading thumbnail…

Fork of Mouse Follower

A React application renders a single SVG circle that follows the mouse pointer across the viewport. The circle’s position is tracked via React state, updated by an `onMouseMove` event handler on the SVG element. D3’s `arc` function is imported but unused, while React’s `useState` and `useCallback` manage the coordinates. The visualization relies on standard SVG rendering with no external data source.

Jul 29, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across a blank SVG canvas, tracking every movement in real time. The visualization demonstrates React state management, where mouse coordinates update the circle's position via the `useState` and `useCallback` hooks. Rendered as an SVG element, the circle's `cx` and `cy` attributes are bound to the current cursor position. The example uses React 16.9 and D3 v5, with the D3 `arc` function imported but unused, relying instead on React's event handling for interactivity.

Jul 29, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing CSV data from a remote URL using D3.js version 7. It fetches a dataset of CSS named colors from a GitHub gist and displays three summary statistics: the data size in kilobytes, the number of rows, and the number of columns. The visualization uses the `d3.csv` method to asynchronously retrieve and parse the file, then `d3.csvFormat` to calculate its byte length. Results are rendered as large text inside an HTML `<pre>` element, providing a simple, non-graphical output.

Jul 29, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example creates a responsive smiley face graphic that fills the entire browser window. It draws a large yellow circle with a black outline as the face, using two smaller black circles positioned above the center to represent eyes, while the mouth is omitted from the visible output. The visualization is built using React and rendered as SVG, with the `index.js` file dynamically calculating positions and dimensions based on `window.innerWidth` and `window.innerHeight`. The code uses `ReactDOM.render` to display the SVG element, leveraging a hardcoded dataset of coordinates for facial features.

Jul 29, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays summary statistics from a CSV file containing CSS Named Colors. It shows the file size in kilobytes, the number of data rows, and the number of columns in a large text format. The code loads the data using `d3.csv` and processes it with `d3.csvFormat` to calculate the file size. An alternative approach using the Fetch API with `async` and `await` is also commented out, alongside a "pyramid of doom" nested promise example.

Jul 28, 2021

Loading thumbnail…

Smiley Face Part I

A grid of nineteen smiley faces, each rendered as a yellow SVG circle with two eyes and a curved mouth, demonstrates a modular React component approach to building faces. The code uses React 17 and D3 v7, specifically the `arc()` generator to create the mouth path. Each face is generated by mapping over an array created with D3’s `range()` function, and randomized eye radius values produce slight variation between faces. The components `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` are composed together, with SVG positioned via a `<g>` transform.

Jul 28, 2021