Skip to main content
Log in
J

Joe Rozman

@JoeRozman·14 public vizzes

Loading thumbnail…

Mental Health Survey Pie Chart Project Momentum 5

This interactive pie chart visualizes mental health survey data, showing the average of a selected metric (e.g., study satisfaction, anxiety) across categories of a chosen attribute (e.g., academic year, gender), with an optional filter for university. It uses the D3.js library to build the pie chart with the `pie` and `arc` generators, and employs `rollups` to compute group means. Dropdown menus and a reset button control the selections, while hover interactions display tooltips with the precise average value for each slice.

Nov 26, 2024
Loading thumbnail…

Mental Health Survey Pie Chart Project Momentum 4

This interactive pie chart visualizes mental health survey data, showing average scores of selected well-being metrics across categorical attributes like academic year, gender, or university. Users filter the dataset using dropdown menus for attribute, metric, and university, with a reset button restoring defaults. The visualization uses D3.js’s `rollups` and `pie` functions to aggregate and generate arcs, while `arc` and `schemeCategory10` style the slices. Hovering reveals tooltips with precise values, and the chart reads from a local CSV file.

Nov 21, 2024
Loading thumbnail…

Mental Health Survey Pie Chart Project Momentum 3

This interactive pie chart explores mental health survey data, letting users filter by university and toggle between demographic attributes and well-being metrics. The visualization displays average metric scores as proportional arc slices, with hover tooltips revealing exact values. Built with D3.js, it uses `d3.pie` and `d3.arc` to generate paths, `d3.rollups` for data aggregation, and `schemeCategory10` for color encoding. Dropdown menus control attribute, metric, and university selection, while CSS transitions provide visual feedback on hover.

Nov 16, 2024
Loading thumbnail…

Fork of Mental Health Survey Pie Chart Project Momentum Color

This interactive pie chart visualizes mental health survey data, showing how a selected metric (such as depression or academic pressure) varies across a chosen attribute like gender or academic year, filtered by university. Users adjust three dropdowns to explore different combinations. The visualization uses D3.js version 7.8.5, employing the `pie()` and `arc()` generators to create slices, `rollups()` for aggregation, and SVG elements for rendering. The code reads from the provided MentalHealthSurvey.csv file and updates the chart dynamically based on user selections.

Nov 9, 2024
Loading thumbnail…

Mental Health Survey Pie Chart Project Momentum 2

This interactive pie chart visualizes mental health survey data from Pakistani universities, allowing users to explore how categorical demographics relate to self-reported well-being metrics. The visualization provides dropdown menus to filter by university, select a demographic attribute, and choose a psychological measure. The chart displays the average metric value for each category segment, with a legend showing labels and computed means. Built with D3.js version 7.8.5, the implementation uses the `pie` and `arc` functions from the d3-shape module, along with `rollups` for data aggregation and `schemeCategory10` for color assignment based on the CSV dataset.

Nov 9, 2024
Loading thumbnail…

Mental Health Survey Pie Chart Project Momentum

This interactive pie chart explores mental health survey data, allowing users to select an attribute (such as academic year or gender) and a metric (like depression or anxiety) to visualize the average score across categories. The chart updates dynamically using D3’s pie and arc generators, with dropdown menus controlling the selections. Data is aggregated via rollups to compute mean values, and a color-coded legend displays each category’s label and average. The visualization uses the D3 library and is styled with custom CSS for the SVG and selector elements.

Oct 31, 2024
Loading thumbnail…

Mental Health Survey Pie Chart

This visualization shows the distribution of survey respondents across academic years using a pie chart, with each slice color-coded using `d3.schemeCategory10`. The code groups the mental health survey data by academic year through `d3.rollups`, sorts the categories, and renders the chart with `d3.pie` and `d3.arc` generators. A legend positioned at the top-right maps each color swatch to its corresponding academic year label. The SVG elements are sized dynamically to the container’s dimensions via `container.clientWidth` and `container.clientHeight`.

Oct 24, 2024
Loading thumbnail…

World Map with University Rankings

This visualization displays a world map with blue dots marking the locations of universities from a CSV dataset, with each dot positioned at the centroid of its corresponding country. The map is rendered using D3's `geoNaturalEarth1` projection, `geoPath` for drawing country boundaries, and `geoGraticule` for the graticule overlay. University coordinates are computed by matching each school's country to its country feature's centroid via `geoCentroid`. The code fetches world atlas GeoJSON data and demonstrates an interactive React-based workflow with state management for loading data asynchronously.

Oct 23, 2024
Loading thumbnail…

Mental Health Survey Scatter Plot

This scatter plot visualizes the relationship between academic pressure and self-reported depression levels from a mental health survey dataset. Each circle represents a survey respondent, positioned according to their scores on these two variables, with a light gray background aiding readability. The visualization is built using D3.js, leveraging `scaleLinear` for axis scaling, `extent` to calculate data ranges, and custom axis label functions from the `@curran/axis-labels` library. The code imports the dataset from a `vizhub` reference and configures circles with a radius of 7.65 pixels and 62.9% opacity.

Sep 17, 2024
Loading thumbnail…

mental_health_survey

This example visualizes correlations among mental health survey responses, focusing on relationships between academic factors and well-being indicators like depression and future insecurity. It parses the CSV data using JavaScript, converting key quantitative fields such as academic workload, social relationships, academic pressure, and depression scores into numbers for analysis. The visualization presents a raw JSON preview of the first survey entry, displaying parsed attributes in a styled preformatted text block. The dataset originates from a Kaggle student mental health survey, with the code preparing structured data for subsequent chart rendering.

Sep 17, 2024
Loading thumbnail…

financial_analytics

This visualization displays the first record from a financial analytics dataset of Indian companies, showing attributes like market capitalization, quarterly sales, and their respective categories. The code imports the CSV data, parses the quantitative columns into numbers using unary plus operators, and then renders the first data object as a formatted JSON string using `JSON.stringify`. The output is displayed within an HTML `<pre>` tag, with a font size of 36 pixels, allowing for a clear, textual preview of the structured data from Kaggle.

Sep 17, 2024
Loading thumbnail…

ai_powered_job_insights

This visualization displays JSON-formatted records from the AI job market insights dataset, highlighting fields like job title, industry, salary, and AI adoption level. The code imports a CSV file and converts numeric string values into numbers using JavaScript’s unary plus operator. It then renders the first data entry as a formatted JSON string inside an HTML `<pre>` element, with the font size controlled via inline CSS. The dataset originates from Kaggle and explores correlations between job attributes and AI-related metrics.

Sep 12, 2024
Loading thumbnail…

Solar System Gradient

This animated visualization displays the planets of the solar system in a horizontal line, with relative sizes to scale but distances not to scale, starting from the Sun on the left. Each celestial body is rendered as a circle filled with a radial SVG gradient defined in `<defs>`, using colors that approximate each planet’s appearance. Data on planetary radii and orbital distances comes from Wikipedia’s list of gravitationally rounded objects. The code uses D3’s `transition`, `easeLinear`, and join methods to animate the circles’ radii and positions sequentially.

Sep 12, 2024
Loading thumbnail…

Fork of Circles with D3

This example shows a flower-like arrangement of D3 circles in an SVG canvas, with seven colored petals surrounding a green stem extending downward. The code uses `d3.select` and the general update pattern with `.selectAll()`, `.data()`, and `.join()` to bind an array of objects (each with `x`, `y`, `r`, and `fill` properties) to circle elements. The circles are positioned statically, colored yellow and magenta, and rendered at 70.8% opacity against a light blue background, demonstrating dynamic attribute and style assignment in D3 v7.

Aug 29, 2024