MelanieSalignat

Data Mining

This visualization shows a network of movie recommendations, where each node represents a film and links connect movies that are frequently recommended together based on association rules. Users can drag nodes to explore relationships, and hovering over a movie highlights its directly connected neighbors. The code uses D3 v4’s `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to position the graph, and renders nodes as SVG circles with drag interactions. Data comes from a CSV file containing antecedent-consequence pairs from a recommendation dataset.

Jan 19, 2017

Data Mining

This interactive visualization maps the interconnectedness of films, showing how a single movie like *2001: A Space Odyssey* links to a vast network of over one hundred related titles. The primary display uses a force-directed graph layout via D3.js v4’s `forceSimulation` to position the nodes of the recommendation network. A separate chart reveals the frequency of genre pairs, drawing on the `genres.csv` dataset. Data is rendered as SVG, with the dataset loaded from external CSV files in a custom script.

Jan 18, 2017

ProjetFinal

This visualization shows a network of music artists and their associations, with nodes connected by links weighted according to co-occurrence data from a recommendations dataset. It uses the D3.js force-directed graph layout (d3.forceSimulation) to position nodes, with circle size and link thickness reflecting support counts. The code includes a searchable autocomplete input for filtering nodes, and hovering over a node highlights its connections and reduces the opacity of unrelated elements. Artist names, images, and tags are loaded from CSV files, and the rendering is done via SVG elements with a custom tooltip.

Jan 11, 2017

Projet 4

This network visualization maps music artist recommendations, showing associations between bands and solo acts. It displays artists as nodes, with connections and support values indicating the strength of their association. The visualization uses a force-directed simulation, `d3.forceSimulation` in the D3.js framework, to position nodes and draw links between them. Data is loaded from `recommandations.csv`, which includes the antecedent, consequence, and item-set support for each recommendation pair. The visualization also includes an interactive autocomplete feature for searching artists.

Jan 11, 2017

Projet final

This network graph shows music artist recommendations derived from association rule mining. Each node is an artist, and a directed edge connects an antecedent to a consequence. The thickness of a link encodes the support count for that rule, as seen in the `recommandations.csv` file. Artists are colored or sized by tag counts from `artists_tags_count.csv`. The visualization uses D3.js v4's force-directed layout to position nodes, with SVG paths and circles rendering the links and nodes. Hovering on a node triggers a brush effect that highlights connected nodes while dimming the rest.

Jan 10, 2017

Projet final

This visualization shows a network of music artists, with nodes connected by association rules derived from item-set support values. It presents a force-directed graph where each circle represents an artist, and links indicate shared listener preferences or recommendations between them, with node size and link strength reflecting the support counts. The implementation uses D3 v4’s `d3.forceSimulation` for layout, rendering nodes and links as SVG circles and lines. Hovering highlights a node, dims unrelated connections, and displays a tooltip with the artist’s name and support value, based on data from CSV files containing artist tags and recommendation counts.

Jan 10, 2017

Projet 3

This visualization displays song recommendations as a directed network graph, where each node represents a musical artist and each edge connects an antecedent artist to a consequent artist, with edge thickness or weight reflecting the support count from the dataset. Using D3 version 4's force-directed layout via `d3.forceSimulation`, the graph arranges nodes spatially to reveal clusters of related musicians. The interface includes an interactive search box that filters and highlights specific artists from a predefined list, while a tooltip provides details on hover. The underlying data comes from a CSV file of association rules derived from user tagging patterns, rendered as an SVG with custom styling for nodes and links.

Jan 9, 2017

Projet_test2

This example shows a network of music artists and their associations, using a force-directed graph layout to reveal clusters of related performers. The visualization encodes connections through links and nodes, with the ability to hover and search for a specific artist. The code relies on `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to compute the layout, and uses custom SVG elements for nodes and links. Data is loaded from two CSV files, `recommandations.csv` and `artists_tags_count.csv`, with node size reflecting artist popularity and a tooltip displaying tag information.

Jan 9, 2017

Projet 4

This visualization displays a network of recommended music artists based on association rule mining. The force-directed graph shows artist nodes connected by links, where the strength of each connection represents the support value from the dataset. Using D3 v4, the layout employs a force simulation to position nodes, with link opacity reflecting relationship strength. The data comes from a CSV file containing antecedent-consequence pairs with support counts, and the interactive visualization also includes a searchable autocomplete feature for finding specific artists in the network.

Jan 8, 2017

Projet 2

This visualization shows a force-directed network of music artists and their associations, mapping relationships derived from an association-rule mining dataset where nodes represent artists and links indicate co-occurrence strength. The graph uses `d3.forceSimulation` with collision and link forces to position nodes, with circle size encoding node degree and line opacity reflecting link weight. Hovering a node highlights its connections, and the code includes an autocomplete search feature that filters the network. Data is loaded from CSV files containing artist tags and recommendation pairs, rendered as SVG elements with tooltips for interactivity.

Jan 7, 2017

Projet 2

A force-directed network graph maps associations between music artists, where nodes represent artists and links indicate co-occurrence support values from the datasets `recommandations.csv` and `artists_tags_count.csv`. Node size reflects tag count, and fill color encodes the first tag from each artist's top-five tags. Using D3 v4, the code builds the visualization with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, while a hover tooltip displays artist name and image. Nodes are draggable via `d3.drag`.

Jan 5, 2017

fresh block

This network visualization maps associations between music artists based on co-occurrence in recommendation lists. Nodes represent artists, with size scaled by the number of associated tags, and links indicate item-set support values from the recommendation data. The code uses d3.forceSimulation to compute the physics-based layout, with d3.forceLink and d3.forceManyBody managing edge and repulsion forces. Artist tags are parsed from a CSV file to assign node colors via d3.scaleOrdinal, and hover interactions display artist images using d3.select and tooltip divs.

Jan 3, 2017

TP 6 : Vote à l'assemblée

The visualization shows a network of French National Assembly members and their voting positions on a specific ballot, grouped by political affiliation. It uses a force-directed graph layout where nodes represent individual legislators and links indicate shared voting behavior, with node colors encoding party groups. The graph is rendered as an SVG using D3.js v4, with the `d3.forceSimulation` API handling the physics-based layout (link forces, many-body repulsion, and centering). Data comes from the `scrutins.json` file, which contains the official roll-call vote records, detailing how each deputy voted.

Projet : Artists recommendation

This visualization presents a force-directed network of music artist recommendations, derived from association rule mining in `recommandations.csv`. Nodes represent individual artists, while weighted links depict the strength of their co-occurrence in recommendation rules. The network uses a physical simulation engine, combining `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces to arrange the graph. Upon hovering over a node, the code highlights that artist and all directly recommended artists by increasing their radius and changing their color, with a custom tooltip displaying the artist's name. The visualization is rendered as an SVG using D3 v4.

TP3

A line chart displays monthly values from a small JSON dataset, with circles marking each point. The visualization uses d3.svg.line and d3.scale.ordinal for positioning, while labels show abbreviated month names. Hovering over a circle highlights it in red, reveals its numeric value in black text, and draws a dashed vertical line beneath it; moving the mouse away restores the original grey and white styling. The chart is rendered as SVG with d3.v3.

TP4 : Grippe en France

This visualization shows the spread of influenza across French regions during the 2014 season, using a choropleth map where each region is colored according to the cumulative number of reported cases over five weeks in November. A tooltip displays the region name and its aggregated value on hover. The map is rendered using d3.geo.path with a conic conformal projection applied to GeoJSON data, while region values are calculated from a CSV file and mapped to a color scale using d3.scale.quantize.

TP 6 : Vote à l'assemblée

The visualization displays voting results from the French National Assembly, showing how members of parliament voted on a specific declaration regarding military intervention in Iraq. The code loads data from a JSON file and uses D3 v4's `d3.forceSimulation` to create a force-directed network layout, though the link and node rendering code is currently commented out, leaving only the simulation setup and drag interaction handlers in place. The data structure includes detailed vote tallies per parliamentary group.

Dec 20, 2016

Projet(test) : Artists recommendation

This visualization shows music artist recommendations as a force-directed network graph, where each node represents an artist and links indicate association rules derived from the dataset. The graph uses D3 v4’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while link stroke-width encodes support values from the CSV data. Circles have fixed radii based on a count value, and drag interactions are enabled via `d3.drag`. Data is loaded from a CSV file using `d3.csv`, and all elements are rendered as SVG.

Projet(test) : Artists recommendation

This interactive network visualization displays artist recommendations based on association rules mined from a CSV file of antecedent-consequent pairs, with link thickness scaled by the support value of each rule. The force-directed layout is computed using d3.forceSimulation with link, charge, and center forces, while nodes are draggable circles rendered in SVG. Artist names appear as tooltips on hover, and the graph is built using d3.csv to load the data and d3.schemeCategory20 for potential color encoding.

Artists recommendation

This example presents a minimal SVG canvas that displays the static text “Edit the code below to change me!”. Built with D3 v4, the visualization uses `d3.select` to append an SVG element and `svg.append("text")` to position the message with explicit x and y coordinates. The text is styled with a monospace font and a font size of 36 pixels. The code originates from a gist and is rendered entirely through D3’s SVG generation, offering a starting point for further customization.

TP 6 : Vote à l'assemblée

This example shows a force-directed network of character co-appearances from *Les Misérables*. Nodes represent characters, and links represent relationships, with link thickness proportional to the strength of the connection. The layout is computed using D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` APIs, with nodes colored by group using `d3.schemeCategory20`. The SVG visualization is interactive: users can drag nodes, which temporarily adjusts the simulation’s `alphaTarget` to restart movement.

TP5 : Grippe en France

This interactive map of metropolitan France displays the weekly number of flu cases per region from 2003 to 2014. A slider lets the viewer scrub through the weeks, and hovering over a region reveals its name and the count for that week via a tooltip. The visualization uses D3 v3 with the `d3.geo.conicConformal` projection to draw the geographic outlines from a GeoJSON file, while the `color` scale maps a region’s case count to a blue sequential palette. The CSV data is preprocessed to merge regional values into the GeoJSON features, and the map is redrawn on each slider update.

Dec 7, 2016

fresh block

A choropleth map of France visualizes the cumulative influenza cases per region for 2014, with a five-color quantized scale ranging from light blue to dark blue. The map shows regional totals, with uncolored regions in gray when data is absent. Built with D3.js v3, the visualization loads a CSV file and a GeoJSON file, then merges the data by region name before rendering the paths using the `d3.geo.path` projection with a conic conformal projection. The color scale uses `d3.scale.quantize` with a domain set from 0 to 2000.

Nov 24, 2016

Gist 877339b9886ef9a8b6db2fc0593bb61e

This example displays a map of the United States using the Albers USA projection, showing each state as a filled polygon. The code loads GeoJSON state boundary data from a local `us-states.json` file and renders it as SVG paths using `d3.geo.path()` with the projection. Built with D3 v3, the visualization sets a fixed canvas size and appends path elements to the SVG container for each feature in the dataset.

Nov 24, 2016

simple line chart from dataset

This example shows a simple line chart of monthly values from a local JSON dataset, with labeled date tick marks and a grey line connecting data points. Each data point is a semi-transparent grey circle that highlights in red with a black value label and connecting dashed line on mouseover, then reverts on mouseout. The chart uses D3 version 3 APIs including `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and `d3.svg.line` to create the line path. SVG elements are rendered directly via `d3.select("body").append("svg")`, and the data is loaded with `d3.json`.

Nov 17, 2016