E

Edgar Alves

@edgaralvesua·16 public vizzes

Loading thumbnail…

Fork of Multiple Views Cleanup

This visualization combines a world bubble map with a time-series histogram to explore migrant deaths and disappearances. The map projects city coordinates using `d3.geoNaturalEarth1` and `d3.geoPath`, with circle sizes scaled by `d3.scaleSqrt`. The histogram bins reported dates by month using `d3.histogram` and `d3.timeMonths`, summing deaths per bin. Data comes from the Missing Migrants Project CSV, while country boundaries use TopoJSON from World Atlas. The React components render SVG with D3 scales and axes.

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This visualization displays the monthly total of dead and missing migrants using a histogram built with React and D3 v5. The code uses `d3.bin` to group data by month via `timeMonths` thresholds and `d3.sum` to aggregate the "Total Dead and Missing" values for each bin. SVG rectangles render the bars with axes from `AxisBottom` and `AxisLeft`, while data comes from the Missing Migrants Dataset loaded through `csv`. Tooltips appear via SVG `<title>` elements, and the chart includes axis labels for time and casualty counts.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to select which quantitative attributes appear on the x and y axes via React dropdown menus. Hovering over the color legend highlights data points from a selected species while dimming others. The visualization uses React for state management and UI, D3 v5 scales for positioning, and renders marks as SVG circles with axis components built from tick methods.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to select which quantitative attributes appear on the x- and y-axes through two dropdown menus built with React state. The visualization is rendered as an SVG, with axes and circles generated by D3 v5 scales and React components. Data is loaded asynchronously from a CSV file using d3.csv, and the plot updates dynamically when dropdown selections change.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris Dataset, displaying measurements of sepal and petal dimensions for different flower species. Two dropdown menus allow users to dynamically select which attributes appear on the X and Y axes, with all five available measurements (including species) as options. Built with React and D3 v5, the visualization updates scales and axes reactively when selections change, rendering points as SVG circles with tooltips. The code uses `scaleLinear` for axis scaling, `extent` for domain calculation, and custom React components like `AxisBottom`, `AxisLeft`, and `Dropdown` to structure the interface.

Loading thumbnail…

Fork of Menus with React

This example demonstrates interactive dropdown menus built with React, allowing users to select a pet from a list of options. The interface presents a labeled select element with choices for Dog, Cat, or Gold Fish, alongside a second dropdown that renders the same options. The code uses React’s `useState` hook and `ReactDOM.render` to manage and display the UI, with components defined for `Dropdown` and `App`. The HTML file loads React 16.9 from a CDN and includes custom styling for the form elements.

Loading thumbnail…

Fork of Working with Time

A scatter plot shows temperature readings over one week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses React with D3 v5, employing `scaleTime`, `scaleLinear`, `extent`, and `csv` to load and parse the Data Canvas Sense Your City dataset. SVG marks are rendered as circles with embedded tooltips, while `AxisBottom` and `AxisLeft` components generate tick marks. A natural curve connects the points, and the chart is styled with Poppins font and custom axis labels.

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the classic Iris dataset, plotting petal length against sepal width for three species of flowers. The scatter plot uses distinct teal and purple color coding to differentiate species, with hover tooltips revealing each point’s species name. Built with React and D3 v5, it uses `scaleLinear`, `csv` for data loading, and custom SVG `AxisBottom` and `AxisLeft` components. The `Marks` component renders circles with a fixed radius of 10 pixels, while axis styling and font are customized through CSS, including the Poppins typeface.

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization presents the top 10 most populous countries as a horizontal bar chart, using data from the United Nations World Population Prospects 2019. It displays population values along the x-axis and country names along the y-axis, with a tooltip showing formatted values on hover. The React-based implementation leverages d3’s `scaleBand` and `scaleLinear` for scaling, `format` for SI-prefix labels, and SVG `<rect>` elements rendered through reusable axis and mark components.

Loading thumbnail…

Fork of Pathetic Bar Chart

This example presents the top 10 most populous countries as a bar chart with no axes, rendering bars as plain rectangles. Built with React and D3 v5, it loads population data from the United Nations World Population Prospects 2019 via `d3.csv`, scales the bar widths with `scaleLinear` and positions them with `scaleBand`. The SVG output uses React state and hooks to fetch and display the data, with a red grid line attempted inside the tick mapping.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data using a scatter plot of weight versus horsepower, colored by origin and with tooltips showing car names. The visualization is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart. Data is loaded asynchronously from a CSV file via d3.csv, then passed to a vega-lite-api markCircle specification. The chart fits the full window size with custom axis and label styling from a config object.

Loading thumbnail…

Mouse Follower!

A simple interactive visualization renders a single SVG circle that tracks the user's pointer across the browser viewport. The circle is drawn using React's virtual DOM, with its center coordinates updated via a `useState` hook and a mouse event handler. The app uses `window.innerWidth` and `window.innerHeight` to set the full-screen SVG dimensions. React and ReactDOM are loaded from CDN, and the component re-renders each time the mouse position changes, creating a responsive follower effect.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3’s `d3.csv` method, which returns a promise. It fetches a dataset of CSS named colors from a GitHub gist, then displays the file size in kilobytes, the row count, and the column count in a large-format text element. The code also includes commented-out alternatives using `fetch` with `async`/`await` and `d3.csvParse`, illustrating different approaches to the same task. The visualization is purely text-based, with no graphical rendering.

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a cartoon smiley face composed of modular React components: a yellow background circle, two black eyes, and a curved mouth. The code defines each facial feature as a separate ES6 module, imported into a central `Face` component that arranges them inside an SVG. The mouth uses `d3.arc` to generate a path from angular parameters. The visualization is rendered declaratively with React, using component attributes to set coordinates and dimensions, with the SVG output managed by the `FaceContainer`.

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a smiley face built from three SVG circles, with a yellow head and two black eyes. The face is drawn using React and rendered as SVG, with the circle positions and sizing explicitly defined in the code. The app uses ReactDOM to render a component into the DOM, though the current script contains an incomplete placeholder that only displays a heading. The presentation includes a video demonstrating the process of creating the face, and the final visualization relies on SVG primitives coordinated through React’s declarative component structure.

Loading thumbnail…

Fork of Hello HTML

A minimal HTML page defines an inline SVG canvas that renders three circles. The largest circle uses a CSS class to apply a yellow fill with a black border, while two smaller circles have default black fills. The page sets body margins to zero and hides overflow, presenting a static, purely SVG-based graphic with no interactive behavior or external data.