JiapengFan

@JiapengFan·8 public vizzes

Untitled

This example visualizes eye-tracking data across multiple city images, plotting fixation points on a scatterplot with a timeline slider for temporal exploration. Users can select stimuli via a dropdown menu and apply K-means clustering with adjustable cluster counts and iteration limits. The visualization uses D3 v5 for SVG rendering and animation, with React for structure, dynamically scaling axes to each image’s resolution from a CSV file.

Jun 14, 2020

Loading thumbnail…

d3.js

This example demonstrates a simple data visualization of population figures for the ten most populous countries, loaded from a local CSV file. The code randomly assigns three distinct colors to a set of five spatial points, initializing centroids with unique identifiers and color fills using `d3.scaleOrdinal` and `d3.schemeCategory10`. The SVG canvas renders the output, though the points themselves are not drawn on screen. It relies on D3 v5 and a bundled JavaScript file, with styling defined in an external CSS file.

Jun 4, 2020

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes eye-tracking data, plotting the mapped fixation point coordinates for viewers as they examine images of city landmarks. Users can select a specific city image from a dropdown menu, which updates the plot’s background and overlays the corresponding fixation points as circles. The visualization uses D3.js with SVG and animation, applying linear scales based on resolution data and implementing k-means clustering to group fixation points by color. Hovering reveals a tooltip with details like user, coordinates, fixation duration, and description.

Jun 3, 2020

Loading thumbnail…

Attention map

This attention map visualizes eye-tracking fixation data from multiple users viewing city images, using a density-based contour overlay to highlight areas of visual focus. The D3.js visualization, built with the `d3-contour.v1` plugin, renders a heatmap-like SVG gradient alongside the mapped fixation points from the data set. The color scale, based on `d3.interpolateInferno`, encodes the density of fixations across each image, revealing where observers concentrated their gaze. The implementation uses raw CSV data containing fixation coordinates and durations to generate these contour layers.

Jun 1, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores the relationship between pairs of attributes in the UCI Auto MPG dataset. Users select which columns to compare via dropdown menus, and the visualization updates with a staggered transition animation. The D3 v5 code uses `scaleLinear`, `axisBottom`, `axisLeft`, and data joins to render SVG circles representing cars. The implementation includes a reusable `dropdownMenu` component and a `scatterPlot` function that handles axis labels and tick marks, with values coerced to numeric type before rendering.

May 10, 2020

Loading thumbnail…

Google Play Store Apps

This animated visualization displays the number of visa refusals by country, filtering to only show nations with more than 55 refusals and sorting the bars in descending order. Built with the vega-lite-api and Vega-Lite, it renders as a horizontal bar chart where each bar’s length corresponds to the REFUSALS value. The code configures axis styles and tooltip formatting via a config object, and loads data from a CSV file using d3.csv.

May 1, 2020

Loading thumbnail…

Untitled

A bar chart displays the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. Horizontal bars encode population with a linear scale, while country names appear on the y-axis. The visualization is built with React, using `d3.csv` for data loading, `scaleBand` and `scaleLinear` for scales, and SVG rectangles for rendering. Tooltips show formatted population values, and axis labels are drawn as SVG text.

Apr 29, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries, displaying their populations as bars whose heights are encoded on the y-axis. The chart uses a linear scale for both axes and renders tick marks and labels with custom SVG elements. It is built using React and D3.js, with d3.scaleLinear for scaling and d3.csv to load data from a local CSV file. The chart’s styling comes from Cascading Style Sheets rules, which specify fonts, colors, and the appearance of tick marks.

Apr 29, 2020