antanta28

@antanta28·10 public vizzes

Fork of Sized Points on a Map

This example visualizes a world map where each country is shaded to represent the prevalence of HIV/AIDS among adults aged 15–49 in 2017. The color scale uses a sequential yellow-orange-red interpolation to encode values, with gray indicating missing data. Built with React and D3 v5, the map uses `geoNaturalEarth1` and `geoPath` for the projection and rendering, with country boundaries from World Atlas TopoJSON and graticules. Data comes from IHME, joined to country codes via CSV files.

Mar 27, 2021

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 six options and displaying the chosen value in the console. The code uses React’s `useState` hook to manage the selected value and a reusable `Dropdown` component that renders a native `<select>` element. ReactDOM renders the main `App` component, and React’s controlled component pattern synchronizes the dropdown’s state with user input.

Mar 22, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance as an interactive scatter plot, with engine horsepower on the y-axis, miles per gallon on the x-axis, and points colored by country of origin. Hovering reveals each car’s name via a tooltip. Built with the Vega-Lite API, the visualization loads data from a remote CSV file using d3.csv, then renders to SVG through Vega and Vega-Lite. The code customizes axis and label styling in a separate config module and fits the chart to the full browser window.

Mar 13, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower with points colored by origin and sized by vehicle weight. Tooltips display car names on hover. The visualization is built using the Vega-Lite API and rendered through D3.js, with data loaded via D3’s `csv` function. The chart is created programmatically using `vl.markCircle` with encodings for quantitative and nominal fields, and includes custom configuration for axis styles and text formatting.

Mar 13, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face is drawn as a yellow SVG circle with black facial features, but its eyes are replaced by two small circles that follow the viewer's cursor. The React application tracks mouse movement using the `onMouseMove` event handler and updates the eye positions via the `useState` and `useCallback` hooks. The visualization is rendered with React DOM into an SVG container, using the React library version 16.9.0. The interactive behavior directly responds to pointer coordinates, creating a playful, face-tracking effect.

Mar 13, 2021

Loading thumbnail…

Fork of Smiley Face Part V

A grid of 18 randomly generated smiley faces is rendered with React and D3, each face varying in eye position, radius, mouth size, and stroke width. The visualization demonstrates splitting React components into separate ES6 modules, using fragments for the eyes, and leveraging D3’s `arc` generator to create the mouth path. Each face is drawn as an SVG within a shared container, with randomized parameters computed via `Math.random()` and `d3.range`.

Mar 12, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiling face constructed from SVG primitives, with a yellow circular head, two black eyes, and a curved arc for the mouth. The drawing is built declaratively in React, where each facial feature is a separate component that receives numeric parameters like radius and offset. The mouth uses the D3 `arc` generator to create a path with an inner and outer radius, while the face is centered inside an SVG canvas using a translation transform. The code defines constants for all dimensions and positions, then passes them to the components to render the final composition.

Mar 7, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face built from SVG shapes, with a yellow circular head, two black eyes, and a curved mouth. The face is centered in a 960x500 viewport using React 17 and D3 v6. The code uses D3’s `arc` generator to create the mouth path, while circles are drawn directly via SVG elements. All shapes are positioned with coordinates transformed from the center, and stroke styling is applied to the head circle.

Mar 7, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face composed of SVG shapes, including a circular head, two eyes, and a curved mouth drawn as an arc. The composition is centered within a 960x500 viewport, with all elements positioned relative to a central translation point. The code integrates React for component rendering and D3’s `arc` generator to define the mouth’s path geometry. ReactDOM renders the SVG tree, while D3’s `arc` calculates the mouth’s inner and outer radii, as well as its start and end angles. All styling and coordinates are hardcoded in the JavaScript source.

Mar 7, 2021

Loading thumbnail…

Fork of Hello HTML

This example displays a simple yellow circle with a black outline and two smaller black circles positioned as eyes, forming a smiley face without a mouth. The visualization is rendered as static SVG shapes within an HTML page, using basic SVG elements such as `<circle>` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. No JavaScript libraries or data sources are involved; the code relies solely on inline SVG markup and minimal CSS to hide page overflow.

Mar 7, 2021