R

RomyRatolojanahary

@RomyRatolojanahary·34 public vizzes

Loading thumbnail…

World Map

This world map visualization displays all countries as filled polygons, with each nation assigned a distinct color and outlined by thin white boundaries. The map uses a Kavrayskiy VII projection and includes a graticule overlay. Built with D3 v3, it employs `d3.geo.path` for projection and rendering, `topojson.feature` to extract country features, and `topojson.neighbors` to color each country based on its neighbors, ensuring adjacent nations have different colors. The data comes from the Natural Earth Admin 0 Countries shapefile, converted to TopoJSON format.

Loading thumbnail…

World population - bubbles on map

A world map in the Winkel III projection displays semi-transparent bubbles scaled by the square root of each country’s 2016 population, with colors assigned by continent via `d3.scaleOrdinal`. Country outlines, graticule, and labels are drawn using `d3.geoPath` and `d3.geoGraticule`, with zoom support from `d3.zoom()` that adjusts label visibility based on zoom level. Population data comes from the World Bank’s World Development Indicators. The visualization also includes hover tooltips showing the country name and formatted population.

Loading thumbnail…

Films_mal_notes

This visualization displays a network of film recommendations derived from association rule mining, where nodes represent movie titles and links indicate that one movie is frequently purchased alongside another. Node color encodes the film title, while the link data itself includes an item set support value, though it is not visually encoded in the displayed stroke width. The graph is laid out using the D3.js force simulation API, specifically `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody`, and rendered as an SVG with draggable nodes. The data comes from the `recommandations.csv` file, which lists pairwise antecedent–consequence movie relationships.

Loading thumbnail…

Genres

This force-directed network diagram visualizes associations between movie genres, derived from an association-rule mining dataset. Each node represents a genre, with links indicating co-occurrence relationships and their thickness reflecting item-set support values. Using `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, the layout positions nodes based on connection strength. The SVG rendering uses circles colored via `d3.scaleOrdinal` with `d3.schemeCategory20`, while `d3.drag()` enables interactive repositioning of nodes, with the simulation updating link and node positions on each tick.

Loading thumbnail…

Projet 4

This visualization displays a force-directed network of music artists based on association rules from listener data, showing which artists are frequently recommended together. Nodes represent artists, with node size and link thickness reflecting the support values from the dataset. The visualization uses d3.forceSimulation to position nodes and SVG for rendering, with tags and artist names as labels. It includes a search feature that filters and highlights connected artists, sourced from CSV files containing artist tags and recommendation rules.

Loading thumbnail…

Projet final

This force-directed graph visualizes music artist recommendations derived from association-rule mining on a Last.fm-style dataset. Nodes represent artists, while links show recommendation strength, with thicker connections indicating higher co-occurrence support. The visualization is built with d3.v4, using `d3.forceSimulation` for layout and SVG circles and lines for rendering. Hovering a node highlights its immediate connections and applies a semi-transparent “retrait” effect to unrelated nodes, while a custom tooltip shows each artist’s name. Data comes from the included `recommandations.csv` and `artists_tags_count.csv` files.

Loading thumbnail…

Projet final

This example visualizes a network of music artist recommendations derived from an association-rule mining dataset, showing how often one artist appears alongside another. A force-directed graph positions nodes for each artist, with links representing recommendation strengths encoded by line opacity and weight. The interface includes a searchable auto-suggest input to highlight a selected artist and dim unrelated nodes, using D3 v4’s `forceSimulation` for layout and SVG circles and lines for rendering. Data comes from CSV files containing artist tags and item-set support counts, with tooltips providing context.

Loading thumbnail…

Projet_test

This visualization shows music recommendation rules as an interactive force-directed graph. Nodes represent artists, while links connect an antecedent artist to a recommended consequence, with link thickness or proximity reflecting the support value from the recommendation data. The graph also displays artist tags and counts from a CSV file. It uses d3.forceSimulation to position nodes and SVG elements for rendering, with hover highlighting and tooltips displaying artist details.

Loading thumbnail…

Projet_test2

This example visualizes a force-directed graph of musical artist recommendations, where nodes represent artists and links show association rules derived from a market-basket analysis of listening data. The graph encodes the support value of each co-occurrence, and hovering highlights connected nodes. The visualization is built with D3 v4, using `d3.forceSimulation` for layout and `d3.forceLink` plus `d3.forceManyBody` for physical simulation. Artist images and their top five tags are loaded from a separate CSV and displayed, while an input field lets users search and filter the graph.

Loading thumbnail…

Projet_test3

This interactive network visualization maps artist recommendations from a CSV of association rules, showing connections between musicians with link thickness scaled by support values. The D3.js v4 code employs `d3.forceSimulation` with force-directed layout, applying `d3.forceLink` and `d3.forceManyBody` physics, while styling nodes as SVG circles that display artist photos via URL when available. Hovering triggers a tooltip, and each node can be clicked to display its top five tags from the supplementary CSV data. The visualization uses a categorical color scheme (`d3.schemeCategory20`) and scales node radius by artist count.

Loading thumbnail…

TP Projet

This interactive network visualization reveals music recommendation associations between artists, derived from association rule mining data. It displays a force-directed graph using SVG, where nodes represent artists and links show co-occurrence relationships weighted by support values. The visualization employs d3.forceSimulation for layout physics, and node images load artist pictures from a separate CSV file. A tooltip displays each artist’s top five tags, and clicking a node triggers a custom algorithm that finds and recommends additional related artists beyond direct connections. The graph uses ordinal color scaling to distinguish nodes.

Loading thumbnail…

TP Projet

A node-link network diagram visualizes music recommendation relationships as a force-directed graph. Each artist is a circle whose size corresponds to their tag count, and colored by their most frequent genre tag. D3.js with `d3.forceSimulation` and `d3.forceLink` positions nodes, while the `d3.drag` interaction lets users reposition them. Hovering a node reveals its picture and name via a custom tooltip. Data comes from two CSV files: `recommandations.csv` for the links (with support values) and `artists_tags_count.csv` for node attributes.

Loading thumbnail…

TP Projet_tooltip

This interactive network visualization maps associations between music artists, where each node represents an artist and each line connects an antecedent to a consequent based on association-rule support counts from a CSV file. It uses D3 v4’s `d3.forceSimulation` for physics-based layout with link, charge, and center forces. Hovering a node triggers a custom `d3.tip` tooltip that displays the artist’s name and image from their `pictureurl` in the dataset, while artist tags and counts are fetched from `artists_tags_count.csv` and summarized to the top five tags.

Loading thumbnail…

TP 6 FV

A force-directed network graph visualizes voting cohesion among French National Assembly members during 2015. The nodes represent individual legislators, while links connect pairs who voted the same way, with link thickness reflecting the frequency of shared votes. The layout uses D3 v4's `forceSimulation` with `forceLink` and `forceManyBody` to position nodes and reveal clusters of political alignment based on the JSON vote data. Node colors derive from `d3.scaleOrdinal`, and the SVG rendering displays the resulting structure.

Loading thumbnail…

TP Projet

This network graph visualizes music artist recommendations derived from a dataset of association rules, where nodes represent artists and links indicate a recommended connection. The visualization uses a force-directed simulation to position nodes, with `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` from D3 v4. The SVG rendering displays nodes as circles with artist names in tooltips, and edges as lines. The layout is interactive, allowing users to drag nodes to explore the recommendation structure.

Loading thumbnail…

TP 6 DataViz

This D3.js v4 force-directed graph visualizes character co-appearances in *Les Misérables*, using a JSON dataset of nodes and weighted links. The simulation uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while `d3.drag` lets users rearrange them. Nodes are colored by group via `d3.scaleOrdinal`, with link thickness scaled by connection value. The SVG rendering updates each tick, and dragging restarts the simulation with a higher alpha target.

Loading thumbnail…

TP 6

This network visualization reveals voting patterns among French National Assembly members during 2015, using a force-directed layout. Nodes represent individual legislators, while links connect those who voted identically more than 50 times, with stroke opacity reflecting vote-share intensity. The code processes two JSON datasets—scrutins and acteurs—to construct the graph, then uses d3.forceSimulation with link, charge, and center forces. Node colors map to political groups via d3.scaleOrdinal. The visualization renders in SVG, with a tooltip on hover for additional detail.

Loading thumbnail…

fresh block tp6

This example demonstrates a series of experimental operations on JavaScript data structures, including `Map` and `Set`, within a D3.js v4 SVG visualization. It shows how duplicate entries in a `Map` with array keys are overwritten, and how a `Set` containing object literals treats them as unique despite identical properties. The code logs the size of the `Set` and iterates over its values, then converts a separate `Set` of mixed types into an array of node objects, adding an `id` property. The final section pushes similar objects into an array and logs its length and a property value, with no rendering beyond an initially blank SVG text element.

Loading thumbnail…

TP 6

This force-directed graph visualizes voting patterns among French National Assembly members during 2015. The code processes `scrutins.json` to identify pairs of politicians who voted identically, counts their shared votes, and displays links for pairs with more than 50 common votes. Built with d3.v4, it uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, with link thickness scaled by vote count. SVG circles represent individual actors, and the layout reveals clusters of political allies.

Loading thumbnail…

TP 5: Donnees spatiales test2

This visualization shows the spread of influenza across French regions over time, using a choropleth map of France. A slider controls the displayed week, and each region is colored according to the number of reported flu cases for that period, with a tooltip showing values on hover. The map is drawn with D3.js v3 using `d3.geo.conicConformal` and `d3.geo.path`, while CSV data is loaded with the queue library and merged into a GeoJSON file of French regions.

Loading thumbnail…

TP 5: Donnees spatiales test

This interactive choropleth map displays the weekly incidence of influenza across French administrative regions from 2003 to 2015. A slider lets users navigate through the weeks, updating each region's fill color and the display of the corresponding date. Built with D3.js v3, it uses `d3.json` and `d3.csv` via a queue to load the France GeoJSON topology and the regional flu data, projecting it with `d3.geo.conicConformal` and rendering it with `d3.geo.path`. A quantize color scale maps the range of case counts to a purple-to-green palette.

Loading thumbnail…

TP 5: Donnees spatiales

This visualization is a choropleth map of France showing influenza rates across regions for each week. It displays the data through a slider interface that lets viewers step through the weeks, with regions colored on a quantized scale from light to dark. The map is rendered using `d3.geo.conicConformal()` projection and `d3.geo.path()` for the geographic shapes, while the slider uses the `input` event to trigger updates. Data comes from the `GrippeFrance2014.csv` file and the `carteFrance.json` GeoJSON file, which are loaded asynchronously using the `queue()` function.

Loading thumbnail…

TP 5: Donnees spatiales

A choropleth map of French regions displays weekly influenza case counts for 2014. A slider updates the map to show data for each week, with region colors derived from a quantize scale. The visualization uses D3 v3’s `d3.geo.conicConformal` projection and `d3.geo.path` to render GeoJSON regions, while `d3.csv` loads the time-series data and `d3.queue` manages asynchronous file loading.

Loading thumbnail…

TP 5: Donnees spatiales

A choropleth map of French regions displays weekly influenza case counts for 2014, with fill colors encoding case numbers and a slider to adjust the displayed week. The visualization loads a GeoJSON file of regional boundaries and a CSV of time-series data, merging them to assign values to each region. Built with D3 v3, it uses `d3.geo.conicConformal` for projection, `d3.geo.path` for rendering, and `d3.scale.quantize` for color mapping. A tooltip shows region names and values on mouse hover.

Loading thumbnail…

TP 5: Donnees spatiales

A choropleth map of France displays regional influenza case counts over 52 weeks in 2014, using a quantized color scale. The visualization renders the GeoJSON map with `d3.geo.path` and a conic conformal projection. A slider and week label let the user browse the time series, while a tooltip shows the region name and its weekly value. Data comes from a CSV file loaded with `d3.csv` and `queue`.

Loading thumbnail…

TP 4: Donnees spatiales suite

A choropleth map of metropolitan France visualizes regional influenza case counts for November 2014, with each department-colored polygon representing the summed weekly values from the GrippeFrance2014.csv dataset. The visualization uses d3.geo.conicConformal projection and d3.geo.path to render the GeoJSON map, while a d3.scale.quantize color scale encodes case totals from light to dark green. Hovering over a region triggers a tooltip displaying the region name and its aggregated value. Regions without matching data appear gray.

Loading thumbnail…

TP 4: Donnees spatiales suite

This choropleth map visualizes the geographic distribution of influenza cases across French regions for five weeks in late 2014. The colors, ranging from light purple to dark green, represent the cumulative number of cases per region for that period. Hovering over a region reveals its name and total case count. The map uses `d3.geo.conicConformal()` for projection and `d3.geo.path()` to render geographic boundaries from `carteFrance.json`. Data from `GrippeFrance2014.csv` is merged with the GeoJSON features, and a quantized color scale maps the summed values to the fill colors.

Loading thumbnail…

TP 4: Donnees spatiales suite

This choropleth map of France visualizes regional influenza case counts for a five-week period in late 2014, using a color scale ranging from light purple to dark green. The map is built with d3.v3, using the `d3.geo.conicConformal` projection and `d3.geo.path` to render GeoJSON boundaries from `carteFrance.json`. Regional values from `GrippeFrance2014.csv` are summed and joined to the geographic features, with missing data shown in gray.

Loading thumbnail…

TP 4: Donnees spatiales suite

This choropleth map of France visualizes regional influenza case counts for a five-week period in late 2014, using a color scale ranging from light purple to dark green. The map is built with d3.v3, using the `d3.geo.conicConformal` projection and `d3.geo.path` to render GeoJSON boundaries from `carteFrance.json`. Regional values from `GrippeFrance2014.csv` are summed and joined to the geographic features, with missing data shown in gray.

Loading thumbnail…

TP 4: Donnees spatiales suite

This choropleth map of France visualizes regional influenza case counts for a five-week period in late 2014, using a color scale ranging from light purple to dark green. The map is built with d3.v3, using the `d3.geo.conicConformal` projection and `d3.geo.path` to render GeoJSON boundaries from `carteFrance.json`. Regional values from `GrippeFrance2014.csv` are summed and joined to the geographic features, with missing data shown in gray.

Loading thumbnail…

TP 4: Donnees spatiales

A choropleth map of France shows the total number of influenza cases reported in 2014 for each region, using a five-color quantized scale ranging from light purple to dark green. The visualization merges data from a CSV file containing weekly case counts with a GeoJSON file of French regional boundaries, assigning the annual sum to each region. Built with D3 v3, the map uses a conic conformal projection and the `d3.geo.path` API to render the regions, with the color domain fixed from 0 to 2000 cases. Regions lacking data appear gray.

Loading thumbnail…

Gist c7527476915607ec97df5ec292a38e8f

This example displays a static map of the United States using the Albers equal-area conic projection. The visualization renders all state boundaries as individual SVG paths, with Alaska and Hawaii included as multi-part polygons. The code loads geographic data from a local `us-states.json` file and uses the `d3.geo.albersUsa()` projection and `d3.geo.path()` API to convert GeoJSON coordinates into scalable vector graphics. Built with D3 version 3, the map fills the entire browser viewport.

Loading thumbnail…

simple line chart from dataset

A simple line chart maps twelve monthly values from a JSON dataset, with categorical x-axis labels (A–L) and a linear y-axis. The SVG rendering uses D3 v3 scales and the `d3.svg.line` generator to draw the black polyline. Semi-transparent grey circles at each data point act as interactive dots; hovering one turns it red and reveals the corresponding value label and a dashed vertical guide line by switching their fill and stroke from white to black. Month labels appear below the axis using `d3.time.format`.

Loading thumbnail…

simple line chart from dataset

This example displays a single time series as a black line chart, plotting twelve monthly data points (January through December 2016) from a local `dataset.json` file. The chart also renders gray circular markers for each value and white numeric labels; the labels turn black on hover, and the circles turn red. The visualization is built using D3.js v3, employing an ordinal scale for the x-axis, a linear scale for the y-axis, and the `d3.svg.line` API for the path. It renders to SVG with animations on mouseout for the labels and circles.