Xyfer

@xyftw·4 public vizzes

Fork of 1116 Taiwan Earthquake

This interactive visualization explores Taiwan earthquake data from 1973 to 2024, showing on a map where earthquakes of higher magnitude or depth occur, and using a scatterplot to examine correlations between magnitude and focal depth. Users can select a year via slider and choose attributes for the scatterplot axes and color encoding. A heatmap reveals frequency of magnitude ranges over time. Built with D3 v5, the map uses `d3.geoMercator` projection and TopoJSON county boundaries, while the scatterplot employs `d3.zoom` and custom scales. Earthquake data comes from the Taiwan government’s open dataset.

Dec 7, 2024

Loading thumbnail…

Fork of Fork of Taiwan Earthquake

This interactive visualization explores Taiwan earthquake data from March 2023 to March 2024 using a synchronized map and scatterplot. Users can filter by year and select the x and y attributes, with point size encoding magnitude and color encoding depth, magnitude, or quality. The map uses d3.geoMercator projection with topojson for Taiwan’s county boundaries, while custom tooltips and a zoomable SVG interface reveal details on hover. The scatterplot dynamically updates its axes and legend based on user selections.

Nov 16, 2024

Loading thumbnail…

DataVis_HW1

This interactive scatter plot explores the Iris Dataset, allowing users to compare any two numerical attributes or species via dropdown menus for the X and Y axes. The visualization renders data points as circles using React and D3 scales (d3.scaleLinear) for positioning, with axes generated from d3.ticks. The code uses d3.csv for data loading, React hooks (useState, useEffect) for state and data fetching, and SVG for rendering.

Sep 13, 2024

Loading thumbnail…

Fork of Cars Report

This example demonstrates how to build a JavaScript data report that filters and formats car listings under a price threshold. The code uses a JavaScript Promise from `getCars` to asynchronously retrieve an embedded JSON array of car objects, then processes it through `generateReport` and `formatCar` modules. The final output is rendered as text into an HTML `<pre>` element via the DOM API, with a brief "Loading..." state. The implementation highlights modular JavaScript functions and JSON parsing without relying on external visualization libraries.

Sep 11, 2024