Allyaenn

@Allyaenn·6 public vizzes

IAD Visualization

This example visualizes a stream of enacted interactions as a horizontal sequence of colored, shape-coded glyphs, where each glyph’s shape and color encode two binary attributes (`exp` and `res`). Clicking the "Add Interaction" button appends a new random data point to the stream, shifting the entire visualization left via a D3 transition animation, and updates the x-axis domain to reflect the new range. Built with D3 v4, the code uses `d3.scaleLinear` for positioning, custom SVG path drawing functions for geometric marks, and an axis rendered with `d3.axisBottom`. The data is generated procedurally via `Math.random`.

Mar 3, 2017

Loading thumbnail…

Proto_eye

This visualization animates a simplified cross-section of an eye, showing how its optical parameters evolve across generations of an optimization process. It displays the eye’s iris, cavity, and reference axes, updating the drawing at each generation step. The code loads parameter data from a CSV file using `d3.csv` and `d3.queue`, then redraws SVG shapes—including lines, circles, and arcs—via `d3.arc` and custom functions. The animation advances every 30 milliseconds with `d3.interval`, cycling through the dataset. The visualization is built with D3 v4 and rendered entirely in SVG.

Feb 20, 2017

Loading thumbnail…

DataViz - TP5

This interactive choropleth map visualizes the spread of influenza (grippe) across French regions over time. Data from a CSV file is joined with geographic regions from a GeoJSON file, and a slider allows users to step through weekly data points, updating the map's fill colors and a tooltip that shows the region name and value for that week. The visualization is built with D3 v3, using `d3.geo.conicConformal()` for the map projection and `d3.json` and `d3.csv` for data loading. A quantized color scale maps the range of reported cases to a blue color gradient.

Jan 12, 2017

Loading thumbnail…

Likert Scales - Squares

This visualization displays Likert-scale survey responses as a grid of colored squares, with each row representing a question and each column an individual respondent. It encodes answer values through a quantized blue color scale, aiding quiz designers in spotting response patterns. The interactive page uses D3 v4 to render the SVG matrix, while jQuery manages dynamic filter checkboxes that let users narrow the displayed data by metadata fields like age, gender, accuracy, country, and source. The code also implements axis labels and a tooltip for detailed inspection, with data loaded from a CSV file via `d3.csv`.

Jan 11, 2017

Loading thumbnail…

DataViz - TP4

A choropleth map of metropolitan France shows the cumulative number of influenza cases per administrative region during November 2014. The visualization uses D3 v3 with a `d3.geo.conicConformal` projection and `d3.geo.path` to render GeoJSON region boundaries. A `d3.scale.quantize` color scale maps aggregated case counts from the CSV data to shades of green and blue, while a custom tooltip displays the region name and total value on hover.

Nov 24, 2016

Loading thumbnail…

TP Data Viz - dynamic line chart

A dynamic line chart plots a synthetic dataset of monthly values from January to December 2016, where hovering over a circular point highlights it in red, shows the value in a text tooltip, and draws a dashed vertical guide to the baseline. The chart uses an ordinal x-scale for categories and a linear y-scale, with the line, circles, and labels rendered as SVG elements. Built with D3 v3, it loads data from a JSON file via `d3.json`, applies date parsing with `d3.time.format`, and uses mouseover and mouseout events to toggle the interactive annotations.

Nov 17, 2016