meperezcuello

Wow 3D Map

A 3D terrain map of the World of Warcraft game world visualizes player connection data per zone using animated pie chart sprites. Interactive Three.js rendering with WebGL displays the heightmap-generated landscape, while D3 pie layouts draw sector proportions onto canvas textures applied as sprites. The visualization uses OrbitControls for camera navigation and a custom fragment shader for texturing the terrain mesh, with player data loaded from CSV.

Oct 29, 2019

Wow 3D Map

This interactive 3D map visualizes the World of Warcraft game world, showing player activity patterns across different zones and time periods. The terrain is rendered using Three.js with custom shaders that blend multiple textures based on heightmap data, creating a realistic landscape. D3 pie charts are generated as sprites and positioned over each zone to display the distribution of player characters by class at specific hours. The visualization uses the Three.js OrbitControls for camera navigation and pulls data from a CSV file containing player connection timestamps, allowing users to explore how player populations shift throughout the day.

Oct 28, 2019

Wow 3D Map

A 3D topographic map of the World of Warcraft game world displays player activity per zone, rendered with Three.js. Animated pie sprites overlay the terrain to show the class distribution of connected players for each hour, based on the Avatar History Dataset. The terrain itself is generated from a heightmap texture and colored with custom shaders that blend textures using D3 and WebGL.

Oct 25, 2019

Wow 3D Map

This interactive visualization displays World of Warcraft’s game map in 3D, using player count data per hour per zone to generate pie charts overlaid on terrain. The map is rendered with Three.js, using custom shaders for textured terrain and sprites for each zone’s pie chart. Data from a CSV file is processed with d3.csv and d3.pie, while OrbitControls enable navigation and D3’s arc generator draws the charts onto canvas textures.

Oct 25, 2019

Wow 3D Map

A 3D map of the World of Warcraft game world displays terrain and player activity across zones. Pie charts overlay the map at zone locations, showing the distribution of character classes among players connected at specific hours. The visualization uses Three.js for WebGL rendering of a terrain mesh from a heightmap image and D3 for pie-chart generation. Player data from an avatar history CSV is aggregated by time and zone, with interactive orbit controls allowing exploration.

Oct 24, 2019

Wow 3D Map

An interactive 3D terrain map of the World of Warcraft game world, rendered with Three.js, shows player connection counts per zone as animated pie charts via sprites. The terrain is generated from a heightmap image processed through custom vertex and fragment shaders that apply textured layers. D3 handles data aggregation from a CSV of player sessions, with sprite textures drawn on canvas and updated to reflect counts by character class. OrbitControls enable camera navigation.

Oct 24, 2019

Wow 3D Map

This visualization presents a three-dimensional map of the World of Warcraft game world, with each zone overlaid by a pie chart showing the distribution of player character classes. The pie charts use d3.arc and d3.pie to draw the segments onto canvas textures, which are then mapped onto sprites and positioned within the 3D scene. The terrain mesh is generated using Three.js with custom vertex and fragment shaders that displace vertices based on a heightmap image. Player connection data from a CSV file is filtered by timestamp and zone to drive the chart values.

Oct 24, 2019

Wow 3D Map

This example visualizes a 3D map of the World of Warcraft game world, encoding player connection patterns by zone. It combines a custom Three.js terrain generated from an image heightmap with D3.js-driven pie charts, which are positioned over the map to show the number of connected players per hour. The terrain uses a custom fragment and vertex shader for texture blending, while the pie sprites are rendered via canvas and mapped onto Three.js sprites. Data is sourced from a CSV file, and the visualization includes interactive orbit controls for camera navigation.

Oct 23, 2019

WOW Avatar History Under: Amount Players Connected per Hour

This visualization shows the number of World of Warcraft players connected per hour over a 12-hour period, revealing patterns in player activity through a trailing line chart. The data is sourced from the WOW Avatar History Dataset and processed using d3-time-format to extract hour values, then aggregated by player ID and time via d3.nest(). The visualization is rendered using Vega-Lite API with a markTrail encoder, styled with custom configuration for dark-mode axis and title colors, and displayed across the full viewport via the vega-lite-api and vega-tooltip libraries.

Oct 23, 2019

Wow 3D Map

A 3D terrain map of Azeroth renders mountains and valleys as an interactive WebGL scene using Three.js. The terrain elevation comes from a PNG heightmap texture, which is converted into a custom shader material that blends multiple textures based on height. D3 loads the heightmap data via CSV. Users can orbit, zoom, and pan the scene with Three.js OrbitControls, which also supports auto-rotation animation.

Oct 22, 2019

Terrain Generator (Beta)

An interactive WebGL terrain visualization maps grayscale heightmap data onto a 3D plane, displacing vertices via a custom Three.js `ShaderMaterial` and `vertexShader`. The fragment shader blends repeated textures (ocean, sand, grass, snow) using elevation-based `smoothstep` intervals, while D3 loads CSV height values. Users can orbit, zoom, and pan with `OrbitControls`, and the scene exports geometries through `GLTFExporter` or `OBJExporter`.

Terrain Generator (Beta)

A 3D terrain visualization maps elevation data from a CSV file onto a Three.js plane, using a custom vertex shader to displace geometry based on height values. The scene applies multiple procedural textures—ocean, sand, grass, rock, and snow—blended in the fragment shader according to elevation thresholds, while a semi-transparent blue box simulates water. D3 loads the CSV dataset, and THREEE.OrbitControls enables interactive camera rotation, zoom, and panning around the generated landscape.

Wow 3D Map

A 3D terrain map of a game world is rendered as an interactive, rotating surface. A heightmap drives vertex displacement, with multiple textures such as ocean, sand, grass, rock, and snow blended via a custom GLSL shader based on elevation. The visualization uses Three.js with WebGL rendering, OrbitControls for camera navigation, and D3 for CSV data loading. The scene includes a point light, a semi-transparent water plane, and a checkerboard ground, all presented at five times standard pixel density for clarity on high-DPI displays.

Wow 3D Map

This interactive 3D map displays World of Warcraft terrain, reconstructing the game’s continent of Azeroth from heightmap data loaded via d3.csv. Three.js renders the scene with WebGL, using custom vertex and fragment shaders to displace geometry based on grayscale height values and apply texture blending across elevation bands. D3 facilitates data parsing, while OrbitControls enables camera rotation, zoom, and panning. The map supports multiple pre-defined regional textures, offering a stylized, game-inspired visualization of the world’s topography.

WoW Sphere Map

A 3D terrain map of the World of Warcraft game world, rendered as a textured sphere using Three.js and D3. The sphere is created by displacing vertices along their normals based on a heightmap image loaded from GitHub, with custom shaders blending multiple textures (ocean, sand, snow) by elevation. OrbitControls enables interactive rotation and zooming, while WebGL rendering provides real-time animation and lighting.

Oct 17, 2019

Terrain Generator (Beta)

This interactive 3D terrain generator visualizes a heightmap as a textured, three-dimensional surface. The example uses Three.js with WebGL rendering to build a `PlaneGeometry` mesh, displacing vertices based on pixel data from a CSV or PNG image via `getImageData`. A custom fragment shader blends multiple textures—ocean, sand, grass, rock, and snow—across elevation bands, using `smoothstep` for gradual transitions. D3’s `csv` function loads the height data, while `OrbitControls` enables user rotation and zoom. The scene includes a checkerboard ground plane and displays the terrain with lighting from a Phong reflection model.

Oct 16, 2019

Pika 3D Dice

A 3D cube displays a Pikachu face texture on all sides, rendered as a spinning dice above a checkerboard ground. The visualization uses Three.js for WebGL rendering, a CanvasTexture generated from a D3-drawn SVG, and OrbitControls for camera interaction. D3’s zoom behavior also applies incremental rotation, while keyboard controls move the cube. A point light and shadow effects enhance the scene's depth.

Oct 16, 2019

Terrain Generator (Beta)

This example renders a 3D terrain mesh from a heightmap image using Three.js and D3. It loads elevation data from a CSV or texture, applies a custom GLSL shader to displace vertices, and maps textures onto the surface based on height thresholds. The scene includes an animated water plane, orbit controls for navigation, and uses WebGL for rendering.

Oct 16, 2019

Terrain Generator (Beta)

A 3D terrain visualization generates a textured landscape from elevation data, with a color-mapped surface that transitions between ocean, sand, grass, rock, and snow textures based on height. The scene includes a semi-transparent blue water plane and a checkerboard ground, with interactive orbiting and zooming controls. Three.js renders the WebGL scene, while D3 loads the CSV elevation data, and custom GLSL shaders displace vertices and blend textures procedurally.

Oct 10, 2019

HiDPI 3D Scatter Plot

This example visualizes mountain elevation data as a 3D scatter plot built with Three.js and D3. It uses a HiDPI canvas technique with a scale factor of 2 to render crisp points on high-pixel-density displays. The visualization loads CSV data via the d3.csv function and displays each data point as a cube, with multiple cubes stacked vertically to represent elevation values. The scene includes a textured ground plane and supports interactive rotation through Three.js OrbitControls, allowing viewers to explore the 3D data from different angles.

Oct 4, 2019

Polished Medical Cost Personal (with menu)

This interactive scatterplot explores the Medical Cost Personal Dataset, plotting patient attributes such as age, BMI, and charges against each other. Each circle represents a patient, with color indicating smoker status and size reflecting age, allowing for visual clustering analysis. Built with React and D3 v5, the visualization features dropdown menus that dynamically change the X and Y axes at runtime. The SVG rendering uses `scaleLinear` and `scaleOrdinal` from D3 to map data values, while custom React components like `AxisBottom`, `AxisLeft`, and `Marks` handle the chart elements. Data is loaded asynchronously via the `csv` function.

Oct 2, 2019

Medical Cost Personal (charges vs bmi)

This visualization displays the relationship between BMI and medical charges for individual patients, with each circle colored by smoking status and sized according to patient age. The plot uses positioned circles from the vega-lite-api library, rendering as an SVG through the vega and vega-lite specifications. Data comes from the Medical Cost Personal Dataset, loaded via d3.csv. The chart applies custom axis and label styling from a configuration object, while incorporating interactive tooltips through vega-tooltip to reveal each patient's region on hover.

Oct 2, 2019

WOW Avatar History Dataset

This example loads the World of Warcraft Avatar History Dataset from a GitHub Gist and verifies its contents by displaying the file size, row count, and column count in large text. It uses `d3.csv` to fetch and parse the CSV, then iterates through the first ten rows to log the `zone` field to the console. The code also includes commented-out alternatives using `fetch` with `async`/`await` and a callback-based pyramid-of-doom approach, all relying on D3 v5’s CSV parsing and formatting methods.

Oct 1, 2019

HiDPI 3D Scatter Plot

A HiDPI 3D scatter plot renders ten thousand cubes on a checkerboard ground plane using Three.js. The visualization merges individual cube geometries into a single mesh via `THREE.BufferGeometryUtils.mergeBufferGeometries` and applies normal-based coloring. Data comes from a Medical Cost CSV loaded with D3's `csv` function. The camera orbits interactively through Three.js OrbitControls, while the canvas is scaled by a factor of two for high-pixel-density displays.

Oct 1, 2019

WOW Avatar History Dataset

Sep 25, 2019

Pikachu Face

This example renders a stylized Pikachu face using D3.js and React. The visualization constructs the character’s face from SVG shapes: ellipses for eyes and cheeks, circles for inner eye highlights and pupils, and D3’s `arc` function to create the curved mouth. The code uses D3’s `arc` API to generate the mouth paths and relies on React for composing the SVG elements. The drawing is purely programmatic—there is no external data source—and is displayed as a static vector graphic in the browser.

Sep 25, 2019

WOW Avatar History (Race vs Total Level)

This visualization displays the sum of Total Level over 48 hours for World of Warcraft avatars, broken down by race and character class, with each class represented by a distinct color. The bar chart uses vega-lite-api with vega-lite and vega to render the marks, while d3.csv loads the external WOW avatar history dataset. The visualization is customized with a dark-themed configuration for axes and labels, and tooltips are enabled via vega-tooltip.

Sep 18, 2019

Medical Cost Personal (charges vs bmi)

This visualization uses an interactive scatterplot to explore the relationship between patient BMI and medical charges, with each circle representing a patient. The color distinguishes smokers from non-smokers, while the circle size encodes patient age. The chart is built with the vega-lite-api library on top of Vega-Lite and d3, loading data from a CSV file hosted as a GitHub gist. The code customizes the axes and label styling through a config object.

OSRS Grand Exchange (buy_average vs sell_average)

This scatterplot visualizes the relationship between the buy and sell averages of items in the OSRS Grand Exchange, with each point representing an item and its position along the axes indicating the price averages. The circle’s size encodes the overall average price, while its color denotes whether the player is subscribed. The visualization uses the vega-lite-api to build the chart, which is rendered via Vega-Lite and Vega, with D3.js handling the data fetching from the provided JSON file. Data is filtered to exclude items with averages over one million.

OSRS Grand Exchange Dataset

This visualization displays summary statistics for a dataset of item prices from the OSRS Grand Exchange, fetched as real-time JSON from RsBuddy and hosted on GitHub Gist. It shows the file size in kilobytes, total number of rows, and column count by loading the JSON with `d3.json` and inspecting object keys. The code uses D3 v5 to parse the data and render the results as plain text in a large HTML `<pre>` element, relying on JavaScript’s `Object.keys` and `JSON.stringify` for measurement.

Medical Cost Personal Datasets

This example displays basic metadata about the Medical Cost Personal Datasets, sourced from a cleaned-up Kaggle dataset used in the book Machine Learning with R. It shows the file size in kilobytes, the number of rows, and the number of columns in the CSV. The visualization uses d3.csv to load the remote data and d3.csvFormat to calculate the byte size, then displays the results as large text in an HTML pre element. It also includes commented-out alternatives using fetch, async/await, and d3.csvParse.