OumaimaFassi

@OumaimaFassi·11 public vizzes

Smoothed Radar Chart

This smoothed radar chart compares French railway stations across seven service-quality criteria, including cleanliness, security, accessibility, and passenger information. Users can select one or two stations to overlay their performance profiles, with each axis normalized to a 0–10 scale and a composite score calculated from the weighted attributes. Built with D3 v4, the visualization uses the SVG rendering pipeline to draw curved, semi-transparent polygons, and includes a glow filter and animated transitions for interactive feedback. The underlying data comes from a CSV file containing station attributes and traveler satisfaction metrics.

Mar 5, 2018

Loading thumbnail…

Smoothed Radar Chart

This visualization compares French railway stations using smoothed radar charts, displaying seven quality metrics such as cleanliness, safety, and accessibility. Users can select one or two stations from the dataset to overlay their profiles, with an animated transition between selections. The charts are rendered as SVG elements using D3.js v4, employing the `RadarChart` function to generate circular grids and interpolated blobs. Data is loaded from a CSV file containing station ratings and passenger statistics.

Mar 1, 2018

Loading thumbnail…

Smoothed Radar Chart

This smoothed radar chart compares two French railway stations across seven qualitative and quantitative criteria, including cleanliness, security, passenger information, waiting comfort, shops and restaurants, average distance traveled, and accessibility for people with reduced mobility. The chart renders two overlapping, semi-transparent polygons, one blue and one dark orange, using the D3.js library’s SVG and animation capabilities. Data is loaded from a CSV file via `d3.csv`, and each station’s scores are normalized to a ten-point scale before being passed to the custom `RadarChart` function, which uses `d3.scaleOrdinal` for color and `d3.scaleLinear` for radial scaling.

Feb 27, 2018

Loading thumbnail…

Smoothed Radar Chart

This visualization compares passenger services at the Gare de Lyon and Paris Nord railway stations, displaying seven quantitative axes covering attributes like cleanliness, security, and accessibility. It uses D3.js v4 to render a smoothed radar chart with an SVG and CSS animation, drawing data from a CSV dataset of French train stations. RadarChart.js constructs the polygon using smooth curves, with each station labeled and color-coded.

Feb 27, 2018

Loading thumbnail…

Smoothed Radar Chart

This example visualizes passenger station amenities and accessibility data for French train stations as a smoothed radar chart. It compares two stations—Paris Nord and one other—across seven axes including cleanliness, security, comfort, and PMR assistance scores, using an animated SVG rendering. Built with D3 v4, the visualization employs an ordinal color scale and a custom radar chart module that maps values to radial coordinates. Data comes from a CSV dataset containing station quality metrics and passenger counts, with the chart updating dynamically when the data loads.

Feb 27, 2018

Loading thumbnail…

Smoothed Radar Chart

This example visualizes a smoothed radar chart comparing passenger ratings across multiple French train stations, showing metrics like cleanliness, security, and communication. The D3.js v4 code loads station data from a CSV file using `d3.csv`, then renders the chart as an SVG with two station profiles overlaid. It uses a custom `RadarChart` function that draws circular grid lines, labels, and area polygons with optional glow filters, animated to display the comparative data.

Feb 11, 2018

Loading thumbnail…

Smoothed Radar Chart

This visualization displays a smoothed radar chart comparing qualitative and accessibility metrics for Paris Nord railway station, including cleanliness, security, comfort, and average distance. The dataset comes from a CSV file containing station attributes. The code uses D3.js v4 with SVG rendering and animation capabilities, utilizing the `RadarChart` function to generate the chart. It employs `d3.scaleLinear` for radial scaling, `d3.scaleOrdinal` for color assignment, and includes a glow filter defined with SVG `feGaussianBlur` and `feMerge` elements to enhance visual appeal. The chart presents multiple axes arranged circularly, with data points connected to form a polygon shape.

Feb 10, 2018

Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed layout places 100 randomly generated nodes into nine color-coded groups, with sparse random links connecting them. The visualization uses d3.forceSimulation with charge, position, collision, and centering forces, executed over 120 ticks to settle node positions. A d3.voronoi partition overlays the canvas, and hovering a Voronoi cell highlights its corresponding node and connected links to show local network structure.

Feb 9, 2018

Loading thumbnail…

Geo_map TP

This interactive animated map visualizes weekly influenza case counts across French regions for 2014. A slider controls the week displayed, updating the choropleth map with regional color intensities and a tooltip showing the total count for that week. The visualization processes `GrippeFrance2014.csv` alongside `regions.json`, using `d3.geoConicConformal` for projection and `d3.geoPath` to draw the regions. Colors are assigned via `d3.scaleOrdinal` with a category color scheme, and the tooltip is implemented with a standard D3 HTML overlay.

Feb 2, 2018

Loading thumbnail…

Interactive visualization of stocks

This interactive visualization displays the average monthly stock prices of MSFT, AMZN, IBM, and AAPL from 2000 to 2010 as a stacked bar chart. Using D3 v4, the bars are rendered in SVG, with each color segment representing a different company. Clicking the chart triggers a smooth animation that separates the stacked segments into a grouped layout, using D3 transitions to shift positions and resize bar widths, allowing viewers to compare individual stock trends over time.

Feb 2, 2018

Loading thumbnail…

IRIS scatterplot and regression

This interactive scatterplot visualizes the classic Iris dataset, plotting petal length against petal width for three flower species. Each species is encoded with a distinct color and symbol (square, diamond, or star) based on the `d3.symbol` API, with point size scaled by sepal length. A linear regression line, calculated via ordinary least squares, shows the overall trend. Clicking the legend dims non-selected species, and hovering reveals a tooltip. The visualization is built with D3 v4, renders as SVG, and loads data from a GitHub-hosted CSV file.

Feb 1, 2018