xilingus

Visualização de gráfico de dispersão v4

This scatter plot visualizes the Iris dataset, letting users interactively explore relationships between sepal and petal measurements by selecting which attribute appears on each axis via dropdown menus. The visualization uses D3.js v5 scales (scaleLinear, scaleOrdinal) to map data values to positions and colors, while the React-driven SVG rendering displays circles for each flower specimen. Species are distinguished by color, and hovering reveals the x-axis value through a native SVG tooltip. The code implements custom React components for axes and marks, with data loaded asynchronously from a CSV file.

Visualização de gráfico de dispersão v3

A scatter plot of the Iris dataset, with dropdown menus to select which flower measurements appear on the X and Y axes. The visualization renders SVG circles for each data point, using scales generated with `d3.scaleLinear` and `d3.extent`, with axes drawn from the `AxisBottom` and `AxisLeft` components. The React app manages the selected attributes via `useState`, and the data is loaded asynchronously with `d3.csv` from a GitHub gist.

Visualização de gráfico de dispersão v2

This interactive scatter plot explores the Iris dataset, allowing users to select which flower measurements appear on the x- and y-axes via two dropdown menus. Built with React and D3 v5, it renders SVG circles whose positions are scaled using `scaleLinear` and `extent`. The x-axis tick labels are formatted with `format('.1f')`, while each circle includes a `<title>` element showing the precise x-value as a tooltip.

Menus with react

This example shows a simple car-selection menu built as a React component. A dropdown list with four car options (Volvo, Saab, Mercedes, Audi) displays the currently chosen value, and selecting a new option updates the displayed selection. The implementation uses React’s `useState` hook to manage the selected value, and a custom `Dropdown` component renders the HTML `<select>` element, calling `onSelectedValueChange` with the new value on each change.

Visualização de gráfico de linha v1

This line chart visualizes temperature over time, using a smooth natural curve to connect data points. The visualization encodes time on the x-axis and temperature on the y-axis, with red circles marking individual observations. Built with React and rendered as SVG, it uses D3’s `scaleTime`, `scaleLinear`, `line` with `curveNatural`, and `extent` for domain computation. The data comes from a CSV file loaded via `d3.csv`. Both axes include tick marks and labels, with a title and axis labels styled using the Oswald font.

Nov 1, 2021

Visualização de gráfico de dispersão v1

This scatter plot visualizes the sepal length and sepal width of iris flowers from a CSV dataset. It uses the D3.js `scaleLinear` API to map the data’s extent to the SVG canvas, with axes and tick marks generated by custom React components. Circle marks are positioned using `xScale` and `yScale`, and each includes a `<title>` tooltip. The visualization is rendered with React and D3 v5, using SVG elements and Oswald font styling.

Oct 28, 2021

Fork of Teste com visualizações v2

A full-screen SVG color wheel displays the complete set of CSS color names and their hex values as equal-area slices. React manages the UI state and lifecycle, loading the CSV data via `d3.csv` from a GitHub gist. The D3 `pie` layout generates the angles, while the `arc` generator with an outer radius equal to the viewport width draws each path, filling it with the corresponding `RGB hex value` from the dataset. The visualization renders entirely in the browser using SVG and the D3 v7 and React 16.9 libraries.

Oct 21, 2021

Teste com visualizações

This example displays the full CSS color palette as a vertical stack of 960-pixel-wide horizontal stripes, with each row colored according to its corresponding RGB hex value. The visualization loads color data from a CSV file using d3.csv, then renders the stripes as React div elements styled with the hex values. The implementation integrates React hooks, specifically useState and useEffect, to manage asynchronous data loading and state updates within the React framework.

Oct 21, 2021

Teste com vega lite api v2

This example visualizes the top 20 countries by religious population, using a bar chart where each bar is colored by country and sorted by population in descending order. Built with the Vega-Lite API v2, it registers with Vega and Vega-Lite, uses D3's `csv` to fetch data from a GitHub gist, and applies D3's `format` to round population values. The chart renders responsively to the window size, with custom axis styling and an interactive tooltip showing country and population details.

Oct 18, 2021

Teste com vega lite api v1

This example renders a scatter plot of automotive data using the vega-lite-api, with each point representing a vehicle from a CSV dataset loaded via d3.csv. The chart visualizes horsepower against weight, colored by country of origin, and includes tooltips showing vehicle names. The visualization leverages vega-lite-api’s programmatic API to encode marks, while the vega and vega-lite libraries handle rendering, with a custom config for axis styling and vega-tooltip for interactivity. The plot fills the viewport using autosize and an SVG renderer.

Teste de D3 v1

This example demonstrates a minimal data-loading pipeline using D3 and React. It fetches a CSV file containing CSS color data from a GitHub gist, then displays a summary message with the file size in kilobytes, the number of rows, and the number of columns. The code uses the D3 `csv` function to parse the remote data, React’s `useState` and `useEffect` hooks to manage asynchronous loading, and the custom `message` module to format the output as text. The visualization is rendered as SVG, with the result shown in a large `<pre>` element.

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file from a remote URL using D3 v7. It displays the file size in kilobytes, the number of rows, and the number of columns derived from the parsed data. The code uses `d3.csv()` to fetch and parse the CSV, then `d3.csvFormat()` and `data.columns` to extract metrics. The resulting summary is rendered as text in a `<pre>` element. The data comes from a gist containing CSS color names.

Teste com React

A React component tracks the mouse position and renders a single circle that follows it across an SVG canvas. The app uses React hooks (`useState` and `useCallback`) to store and update the mouse coordinates, which are passed directly to the circle’s `cx` and `cy` attributes. The circle is redrawn on every `mousemove` event, with its radius fixed at 30 pixels. The example demonstrates a basic interactive visualization built with React 16.9 and SVG rendering, without any additional data source.