Jovenne Naldrey Sapuay

@JovenneNaldreySapuay·7 public vizzes

Scatter Plot with Menus

This interactive scatter plot uses the Auto MPG dataset from the UCI Machine Learning Repository to visualize relationships between car attributes like horsepower, weight, and acceleration. Users select which columns to plot on the X and Y axes via dropdown menus, and the chart updates accordingly. The visualization is built with D3 v5, using `select` and `scaleLinear` for axes, SVG circles for data points, and a custom `dropdownMenu` component. Points animate to new positions over two seconds when the axis selection changes.

Sep 4, 2019

Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical organization of world countries, categorized by continent and subregion, as an interactive tree diagram. The layout uses D3’s `tree` and `hierarchy` functions to position nodes, with `linkHorizontal` generating curved paths for parent-child connections. Text labels scale in size by depth, and a `zoom` behavior allows panning and scaling the entire SVG view. Data comes from a local JSON file, rendered with SVG elements styled using a green stroke and a serif font.

Sep 4, 2019

Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes the Iris dataset using Three.js for WebGL rendering and D3.js for data processing and scaling. Colored circles represent different Iris species, mapped to petal length, petal width, and sepal width coordinates. The scene automatically rotates via `requestAnimationFrame`, and users can pan to rotate the view using D3's `select` and `zoom` interaction. The code generates circle sprites from canvas textures with `CanvasTexture` and `SpriteMaterial`.

Sep 4, 2019

Loading thumbnail…

MIT Technicolor Campus Map

This map of the MIT campus displays buildings as colorful, semi-transparent polygons, with each color assigned to a unique set of building properties from OpenStreetMap. The visualization is rendered using SVG through D3.js v4, employing `d3.geoMercator` for projection and `d3.geoPath` to draw shapes from TopoJSON data. Users can pan and zoom interactively via `d3.zoom`, with the viewport initially centered and scaled to the campus. A sequential color scheme from `d3.schemeCategory10` differentiates the structures.

Sep 4, 2019

Loading thumbnail…

MIT Technicolor Campus Map

This interactive map of MIT’s campus visualizes building footprints from OpenStreetMap data, which is imported as TopoJSON and converted to GeoJSON features. Each building’s color is assigned using `d3.scaleOrdinal` with `d3.schemeCategory10`, based on its attribute tags. The view supports zoom and pan through `d3.zoom` and `d3.zoomIdentity`. Geometries are drawn as SVG paths using `d3.geoPath` with the `d3.geoMercator` projection, and the map automatically fits to the window size.

Sep 4, 2019

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with countries filled in tomato red against a yellow sphere background. It uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to generate the geographic outlines. The code loads TopoJSON country boundaries from the world-atlas package and converts them to GeoJSON using the `feature` method from `topojson`. A single sphere path is drawn first, followed by country paths, with strokes for borders. The map is static, with no interactivity or zoom.

Sep 4, 2019

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart ranking 15 countries by speed camera density, as sourced from a Spectator Index tweet. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map camera counts and country names, with `axisBottom` and `axisLeft` generating custom gridlines and ticks. Numerical labels are formatted using `d3.format` to abbreviate values, while the y-axis hides its domain and ticks for a cleaner look. SVG rectangles render the bars, with margins and axis titles controlled via CSS classes.

Sep 4, 2019