Raphael-Diana

@Raphael-Diana·6 public vizzes

Proto_eye

A visualization animates the evolution of a geometric eye model as it optimizes across generations. It shows a changing iris and cavity shape, represented by arcs and lines, against fixed axes. The animation cycles through a sequence of parameter sets from a TSV file, updating the rendered geometry at a fixed interval. The implementation uses d3.v4 to select SVG elements, append shapes, and define an arc for the eye cavity. The data, loaded via `d3.tsv` and `d3.queue`, includes parameters like `rho_c` and `phi_1` that drive the drawing calculations.

Feb 20, 2017

Loading thumbnail…

Likert Scale DataViz

This visualization displays Likert-scale survey responses as a vertical sequence of glyphs, one row per question, with each point positioned by response level. The code uses D3 v4 with SVG rendering and a queue for asynchronous data loading from a tab-separated CSV file. A blue line connects question means across the chart, while a gray line highlights individual response patterns. The visualization uses `d3.scalePoint` for question placement, `d3.scaleLinear` for response levels, and `d3.scaleQuantize` for color encoding. A tooltip div is included but remains hidden in this version.

Jan 11, 2017

Loading thumbnail…

TP 6 DataViz

This visualization maps voting patterns among French parliamentary members in 2015, showing clusters of legislators who frequently vote together. Nodes represent individual actors, while links connect pairs who shared at least 20 joint votes, with link thickness scaled by vote count. The code processes JSON files from `scrutins.json` and `acteurs_simple2.json` using a D3 force-directed layout, specifically `d3.forceSimulation` with link, charge, and center forces. The SVG rendering uses color-coded circles and lines, built with D3 v4 and queue.js for loading data.

Dec 21, 2016

Loading thumbnail…

TP5

This visualization shows the spread of influenza across French regions over time, using a choropleth map animated by a slider to display weekly case counts. The map colors each region according to the intensity of flu cases for a selected week, with a tooltip providing details on hover. Built with D3 v3, the code loads GeoJSON region boundaries and CSV data, then uses `d3.geo.path` with a conic conformal projection and `d3.scale.quantize` for the color scale. A timeline slider, implemented with HTML input, controls the displayed week, updating the map and date label dynamically.

Dec 7, 2016

Loading thumbnail…

TP4

This interactive choropleth map visualizes the weekly incidence of flu cases across French regions throughout 2014. The map animates through the months, with regions colored on a sequential scale that shifts from pale to dark red as case numbers increase. Viewers can explore the data by hovering over any region to see its name and specific case count for the current month. The visualization uses D3.js version 3, specifically the `d3.geo.path`, `d3.geo.conicConformal`, and `d3.scale.quantize` APIs. It loads regional boundary data from `regions.json` and merges it with weekly case counts from `GrippeFrance2014.csv`, calculating monthly totals for each region before rendering the colored paths.

Dec 1, 2016

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of monthly values from a JSON dataset, with interactive circles and date labels. The chart maps categorical month names to an ordinal x-scale and numeric values to a linear y-scale, rendering the line as an SVG path. Hovering over a circle or date label triggers animated transitions, enlarging the element, displaying a tooltip with the value, and drawing a temporary dashed vertical line via d3.svg.line and d3.select.append. The visualization uses D3 v3, SVG for rendering, and transitions for mouseover effects.

Nov 17, 2016