dassermouna

@dassermouna·7 public vizzes

Nbr dossier candidature / plateforme et niveau

This example visualizes the number of job applications per education level and platform using a line chart. The y-axis counts applications, the x-axis represents education level, and color distinguishes platforms. Data is loaded via `d3.json` from a GitHub gist, and the chart is rendered with the vega-lite-api library, configured with custom axis styling and tooltips through the vega-tooltip handler.

Jul 23, 2021

Loading thumbnail…

Loading Data with React & D3 (information csv data permis US)

This example demonstrates loading a real-world US permanent visa dataset using D3’s `csv` utility within a React application. The visualization presents a plain-text summary of the raw CSV data, displaying its size in kilobytes, row count, and column count. The code uses React’s `useState` and `useEffect` hooks to manage asynchronous data loading and re-render the page once the data arrives. The dataset is fetched from a remote Gist URL, and the summary is generated using `d3.csvFormat` to measure the data size before calculating the descriptive statistics.

Jul 23, 2021

Loading thumbnail…

Untitled

This interactive tree diagram visualizes U.S. permanent visa categories and subcategories from a JSON dataset, with nodes collapsed by default and expandable via clicks. It uses D3 v3’s `d3.layout.tree` and `d3.svg.diagonal` for the positional layout and curved links, rendered as SVG with animated transitions (`transition().duration()`) that move nodes and paths smoothly between states. Node styling distinguishes collapsed nodes with lightsteelblue circles, while the hierarchy’s depth is normalized vertically at 180-pixel increments.

Jul 18, 2021

Loading thumbnail…

Dossier candidature / Niveau etude & année diplome

This visualization plots US permanent visa applications by education level and year of degree, using a circular mark for each application record. It encodes the count of applications through circle size, while positioning education level on the y-axis and degree year on the x-axis. The code leverages the vega-lite-api with d3.csv to load data from a GitHub gist, and configures axes, tooltips, and a dark color scheme via vega-tooltip and vega-lite’s configuration object.

Jul 17, 2021

Loading thumbnail…

Nbr candidature / Mois

This visualization shows the number of job applications per month, broken down by applicant’s country of origin, using an area chart where the vertical axis aggregates the count of records and the horizontal axis maps the date field to monthly time units. The chart is built with the vega-lite-api, registered with Vega and Vega-Lite, and reads its data from a remote JSON file containing US permanent visa application records. Styling is customized via a shared config object, and the tooltip is enabled through the vega-tooltip Handler.

Jul 11, 2021

Loading thumbnail…

Status candidature / Annee candidature

This scatterplot visualizes job application statuses by application date, with each point representing an individual record sized at 6000 pixels and colored by education level. The x-axis shows categorical status values while the y-axis maps temporal reception dates, using a zero-suppressed scale. Built with vega-lite-api, the visualization loads JSON data from a remote GitHub gist via d3.json, then renders an interactive SVG canvas with a custom dark-themed configuration for improved label and title readability.

Jul 11, 2021

Loading thumbnail…

Nbr classe admission (by Status) / Province

This bar chart shows the number of visa applications received, grouped by province and colored by applicant status, with tooltips displaying additional details on status and admission class. The visualization loads its data from a JSON file containing US permanent visa records, then aggregates counts of applications per province using a bar mark with color encoding for status. It is built with the vega-lite-api wrapper over Vega-Lite and Vega, using d3 to fetch the remote JSON dataset and custom configuration to adjust axis colors and font sizes for readability.

Jul 11, 2021