Kal

@fokalview·15 public vizzes

Engagement

This interactive D3.js visualization explores Virtual Reality (VR) engagement in education through two linked views. An engagement scatter plot maps weekly VR usage hours against a 1-5 engagement scale, with color-coded points distinguishing the Impact and Education datasets, while solid versus hollow circles differentiate VR users from non-users. A secondary grouped bar chart displays user distribution across age groups and education levels, with dynamic filtering by education level. Built with d3.select, d3.scaleLinear, d3.scaleBand, and d3.csvParse, the tooltips provide detailed information on hover, and the UI supports toggling between datasets and views.

Dec 11, 2025

Loading thumbnail…

Virtual Reality Experiences

This interactive chart analyzes virtual reality user experiences, showing how average immersion levels and motion sickness ratings compare across VR headset models. Users can filter the dataset by headset type using interactive checkboxes, with bar heights updating dynamically. The visualization loads comma-separated data from a Kaggle dataset, then uses d3.group, d3.scaleBand, and d3.scaleLinear to aggregate and display average metrics per device in an SVG rendered with D3 v7.

Dec 10, 2025

Loading thumbnail…

Impact of Virtual Reality on Education

This visualization compares learning outcomes between students using virtual reality and a control group across immersion levels. The line chart displays average learning gain by weekly VR hours, with spline-smoothed traces for each group and unified hover tooltips showing both metrics simultaneously. Built with Plotly.js and D3 for data processing, the interactive dashboard supports zooming, panning, and toggleable legend controls. The visualization draws from a Kaggle dataset of 50 students measuring VR's educational impact across demographics and subjects.

Dec 10, 2025

Loading thumbnail…

Tree Node Interactions

This interactive visualization explores VR headset user data through hierarchical tree diagrams and radar charts. Built with React and D3.js, it shows aggregated metrics like average age, motion sickness, duration, and immersion levels, broken down by gender for each VR device. Users can switch between individual device trees, a summary view, and radar chart comparisons, with hover tooltips revealing detailed values. The three views use D3's `tree` layout for the hierarchy, an SVG-based rendering for nodes, and a Canvas-based radar chart.

Dec 10, 2025

Loading thumbnail…

Availability of Education for Assistive Technology

This interactive visualization maps the global availability of assistive technology education programs by WHO region, with each country color-coded by region and filterable by training content type. It uses d3.geoPath with TopoJSON world atlas data to render the choropleth map and d3.scaleBand for the stacked bar chart comparing regional program counts across cognition, communication, hearing, mobility, self-care, and vision training. Hovering reveals country-level details, while the dropdown filter dynamically updates both map and chart. Data comes from a CSV of country-level survey responses.

Dec 9, 2025

Loading thumbnail…

Fork of Fork of Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved_3)

This dashboard visualizes the Pima Indians Diabetes dataset, showing the relationship between BMI and glucose levels for 768 patients. The view splits into two panels: a scatter plot of BMI against Glucose, faceted into age groups with color encoding age and shape encoding diabetes outcome, alongside a bar chart of average glucose by age group and outcome. Clicking points reveals full patient details. Built with D3 v7, it uses `scaleThreshold`, `scaleOrdinal`, `symbol`, `brush`, and `csvParse` to transform and render the data.

Nov 18, 2025

Loading thumbnail…

VR Experiences Scatter Plot

This interactive visualization explores Oculus Rift VR users by plotting motion sickness against age, with points colored by gender (blue for male, red for female, green for other). Users can toggle between the scatter plot and a histogram of immersion level distribution. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.csv for data loading from the Virtual Reality Experiences dataset.

Sep 29, 2025

Loading thumbnail…

Education Scatter Plot

This scatter plot, rendered with D3.js (d3.v7) and SVG, visualizes program duration against cost for assistive-technology education offerings. Each circle represents a program, with color indicating accredited status via a scaleOrdinal color scheme. The visualization includes labeled axes, grid lines, and a legend. The code synthesizes the duration and cost data, as the original dataset from Kaggle lacks these fields. The plot is constructed using scaleLinear for the x and y axes, and axisBottom and axisLeft for the tick marks.

Sep 28, 2025

Loading thumbnail…

VR Game Data

This visualization displays the availability of assistive technology education programs across different regions, broken down by delivery mode: online, in-person, and hybrid. Using a stacked bar chart, each region shows the cumulative count of programs across these three categories. The chart is built with D3.js, employing `csv`, `scaleBand`, `scaleLinear`, `scaleOrdinal`, `stack`, and `axisBottom`/`axisLeft` APIs. Data is loaded from a local CSV file and rendered as SVG elements.

Sep 28, 2025

Loading thumbnail…

New York State Statewide COVID-19 Fatalities by County (Archived)

This archived example displays the raw contents of a CSV file containing the classic Iris dataset, showing parsed tabular data as formatted JSON in a `<pre>` element. It demonstrates lazy-loading and state management with D3 v7, using `d3.csvParse` to convert fetched text into an array of objects, then coercing numeric columns with unary plus operators. The visualization is minimal, focusing on the data-loading pipeline rather than a graphical representation, with a state machine tracking undefined, `'LOADING'`, and loaded data states.

Sep 28, 2025

Loading thumbnail…

lottery mega millions

This visualization displays the raw values of the Iris dataset as a JSON stream, loading the data from a CSV file and converting its numeric fields. The code uses D3’s `select` and `csvParse` to fetch and parse the data, then renders it via a `join` operation into a `pre` element. It demonstrates a minimal state-based data-loading pattern, transitioning from an undefined state to a 'LOADING' state before displaying the parsed array of objects.

Sep 17, 2025

Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

This fork of a React & D3 scatter plot displays the classic Iris dataset, plotting petal length against petal width for all three species as a single series of burnt-orange circles on a cream background. Built with React 19 and D3 v7, the visualization uses `d3.csv` to load data, `d3.scaleLinear`, `d3.extent`, and `d3.axisBottom`/`axisLeft` to construct scales and axes, with charcoal-gray styling applied throughout.

Sep 17, 2025

Loading thumbnail…

Availability of Education for Assistive Technology

This visualization presents sample data on VR technology's educational impact across 15 countries, showing VR Impact Scores as a sorted column chart with bars color-coded by geographic region and labeled with exact values. Hovering reveals tooltips with additional student engagement percentages. Built with D3.js, it uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` alongside `axisBottom` and `axisLeft` to construct the chart. A complete data table accompanies the visualization. The code imports data directly from arrays, with all sample values stored in the `vrEducationData` object for demonstration purposes.

Sep 16, 2025

Loading thumbnail…

Tech and Education

This visualization compares VR immersion, educational VR usage, and student engagement levels across six age groups, overlaying motion sickness trends as a line chart. It uses bar charts for the three primary metrics and a dashed path to show the correlation between immersion and engagement. The implementation relies on D3.js APIs such as `select`, `axisRight`, and `d3line` for rendering. Data is sourced from three Kaggle datasets covering virtual reality experiences, educational VR impact, and assistive technology training availability.

Sep 16, 2025

Loading thumbnail…

Fork of Circles with D3

A static visualization of seven circles in a cream-colored container uses a custom palette of muted colors like charcoal gray, burnt orange, and beige. The circles are connected by thin, semi-transparent lines, and larger ones are framed with rounded rectangles. Rendered with D3 v7, the code uses `select`, `join`, and attribute setters like `.attr` to draw geometric shapes from hard-coded data arrays, demonstrating basic SVG construction without animation or interaction.

Sep 15, 2025