ocasfre@gmail.com

@CasFre4·8 public vizzes

Fork of Choropleth

This example combines a choropleth map and an animated scatter plot to explore country-level statistics. The map uses `d3.geoPath` with an Equal Earth projection to color countries by urban population rate, while the scatter plot encodes variables like life expectancy and birth rate. Users can switch axes between linear and log scales via `d3.scaleLog` and `d3.scaleLinear`, with transitions updating both axes and circle positions. Data comes from CSV and GeoJSON sources, with missing countries rendered in grey.

May 9, 2024

Loading thumbnail…

ImageSphere

This example displays a three-dimensional globe with pan and zoom, showing a detailed world map texture on a sphere. It uses the Three.js library with `SphereGeometry` and `MeshBasicMaterial` to render the Earth, applying a texture loaded from an external image source. The camera is set with a `PerspectiveCamera` at a distance of one unit, and an animation loop continuously rotates the sphere on the X and Y axes to create a slow, spinning effect. The scene is rendered via `WebGLRenderer` with antialiasing, and the visualization automatically adapts to the browser window size. The underlying data is a static map texture rather than the city-point dataset referenced in the README.

May 9, 2024

Loading thumbnail…

Fork of Fork of Fork of Migrant Deaths Linked Views with Fast Brushing

A 3D Earth globe rendered in Three.js visualizes country boundaries from a GeoJSON file, with each polygon colored in warm amber tones. The globe rotates continuously as users can interact via TrackballControls for panning and zooming. Post-processing effects from the `postprocessing` library add a bloom glow to the scene. The code loads the ThreeGlobe library to display the earth texture and topology bump map, while D3's timer drives the animation loop.

May 9, 2024

Loading thumbnail…

Fork of Fork of Migrant Deaths Linked Views with Fast Brushing

A WebGL globe, built with Three.js and the ThreeGlobe plugin, visualizes country polygons from a Natural Earth GeoJSON file. The scene rotates automatically and supports interactive zooming and rotation via TrackballControls. A post-processing BloomEffect enhances the visual output, while d3.timer drives the animation loop. The code uses D3.js to fetch the geographic data, which is rendered with semi-transparent orange caps and dark strokes.

May 9, 2024

Loading thumbnail…

Fork of CSV Dataset Template - Penguins

This gallery example presents a forkable CSV dataset template built around the Palmer Penguins data. It loads the penguins.csv file and parses its quantitative attributes into numbers for downstream visualization use. The code uses JavaScript's `d3.csv` parsing logic and provides a simple, reusable structure for importing custom datasets into VizHub. The visualization itself does not render a graphic; instead, it focuses on data preparation and export, with the README documenting the original source and instructions for forking.

May 8, 2024

Loading thumbnail…

Fork of Task 9 Question 2

This example visualizes the relationship between wine pH and total sulfur dioxide concentration as an area chart, with the area filled in steel blue and axes labeled accordingly. The chart filters data from a WineQT CSV hosted on GitHub, computed with D3's `d3.area` and `d3.scaleLinear`. It renders in SVG via D3 v6, using `d3.csv` for data loading, `d3.axisBottom` and `d3.axisLeft` for axes, and includes a legend rectangle. The accompanying text explains a comparison of machine learning models for stock volatility forecasting.

Apr 30, 2024

Loading thumbnail…

Fork of Responsive Scatter Plot

This scatter plot displays the relationship between bill length and flipper length for a sample of penguins, with each circle representing an individual bird. The visualization uses D3's `scaleLinear` and `extent` functions to map data values to pixel coordinates, while `@curran/responsive-axes` handles the axis rendering and labels. The plot automatically responds to container resizing via `observeResize`, and the data comes from the `@curran/penguins` package. Circles are drawn with a fixed radius and opacity, layered over a light gray inner rectangle.

Apr 30, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple web page that displays a large, centered greeting message. It uses standard HTML markup to structure the page and CSS to style the text, setting the font size to 13em and aligning it to the center. The page is a minimal starter template that relies on core web technologies—HTML and CSS—without any JavaScript or external libraries. The rendered output is a static visual of the phrase “Hello HTML!” displayed prominently in the browser.

Apr 29, 2024