Naram22

projet vfinal

An interactive line chart visualizes player rankings from ATP tennis tournament match data. The visualization uses D3.js (v3) to parse CSV match results, track individual player progression through tournament rounds, and display the difference between player rankings and their opponents' rankings. Animated SVG paths with dashed and solid line styles represent player trajectories, while a reset button and tooltips provide interaction. The code also includes dataset files and uses the `d3.csv` function to load and process the external tennis tournament data.

Jan 10, 2017

projet v22

This visualization shows the ranking differences between winners and losers across the rounds of a Grand Slam tennis tournament, with each player represented as a line tracking their progress from the first round through the finals. The SVG chart uses two line styles—a solid steelblue line for wins and a dashed line for losses—and includes a reset button to reinitialize the animation. Built with D3 v3, the code loads ATP match data from a CSV file, parses player rankings, and constructs a parallel-coordinates-style plot with an interactive tooltip.

Jan 8, 2017

projet v20

This visualization tracks the progress of tennis players through a tournament, plotting the difference in their ranking against their opponents at each round. It shows the trajectory of individual players with lines, where wins and losses are marked, and a reset button allows the view to be refreshed. The visualization is built with D3 version 3 and uses SVG for rendering, with animation for interactive feedback. Data is loaded from CSV files containing tournament results, and the code uses D3's `d3.csv` function to parse the data, while custom logic calculates ranking differences.

Jan 8, 2017

projet v17_select line

This visualization tracks the progression of tennis players through the 2016 Australian Open, showing each player’s ranking difference against their opponent across seven rounds. The chart encodes wins and losses with solid versus dashed lines, using a custom dataset of player rankings extracted from the ATP match data. Built with D3 v3, the code parses the `test_atp.csv` file to construct per-player trajectories, then renders them as SVG line charts with grid lines and axes.

Jan 8, 2017

projet debug v2

This visualization explores the progression of a tennis player through a tournament bracket. It displays the ranking difference between the player and their opponent at each round, from the first round through to the finals. The chart uses a line graph to trace this difference, with a solid line for victories and a dashed line for losses. The code loads match data from a CSV file using `d3.csv`, processes it to extract player rankings and match outcomes, and builds a custom data structure to track each player's journey. It relies on the D3.js version 3 library for potential chart rendering, though the current implementation focuses on data parsing and manipulation. The visualization is designed to compare player performance across different Grand Slam tournaments and years.

Jan 7, 2017

projet debug v2

This visualization is a debugging tool for a line chart project, loading ATP tennis match data from a CSV file. It processes matches from a selected tournament and year to extract player rankings, building a structured dataset of match results and ranking differences. The interface includes a reset button, with styling for axes, grid lines, and two types of line series. The code uses D3.js v3 for data loading, DOM manipulation, and styling, though the actual chart rendering is incomplete and the visualization logic primarily exists in the JavaScript console output.

Jan 7, 2017

projet debug

This visualization shows the progression of ATP tennis players through a tournament, plotting the ranking difference against their opponents in each round. The code processes match data from a CSV file to extract player rankings and builds a custom dataset that tracks each player’s path through the bracket. A line chart with two line styles (solid and dashed) renders the results, while a reset button allows the view to be refreshed. The visualization uses D3 v3, including the `d3.csv` method for data loading and D3’s SVG axis and line generators.

Jan 7, 2017

projet v15_test

This visualization tracks the progression of tennis players’ ranking differences across seven tournament rounds, using a line chart built with D3 v3’s SVG utilities. The code parses a CSV dataset, assigns missing ranks to unranked players, and constructs a multiseries display where each line represents a player, with solid segments for wins and dashed segments for losses. The chart uses D3 scales, axes, and grid lines, with a steelblue stroke for the lines. The underlying data comes from the provided `test_atp.csv` file, and the visualization is rendered entirely in SVG.

Jan 6, 2017

projet v13

This visualization tracks the progression of tennis players through a Grand Slam tournament, showing the difference in ranking between each player and their opponents across seven rounds from the first round to the finals. The code processes match data from a CSV file to build a dataset of wins and losses for each player, then plots these ranking differences as lines on an SVG chart. It uses d3.v3 to parse the data, create scales, and render the line paths, with solid lines representing actual wins and dashed lines for predicted or simulated outcomes.

Jan 5, 2017

projet v11

This example visualizes the progression of 128 tennis players through the rounds of a tournament, showing the difference in ranking between each player and their opponent at each stage. The code loads match data from a CSV file, processes it to track each player's path, and renders multiple line charts using D3.js version 3 with SVG. The charts display ranking differences across the rounds, with blue lines connecting data points for each player on a shared axis.

projet v12

This visualization plots the ranking differences of 128 tennis players across seven tournament rounds, showing how each player's rank compares to their opponent's rank in each match. The SVG chart displays multiple line series, one per player, using blue strokes to trace the progression of ranking gaps from the first round through the finals. The code loads match data from a CSV file, calculates rank differences, and constructs a data array for each player before rendering the lines with d3.svg.line and d3.scale.ordinal for the x-axis.

projet v11

This example visualizes the progression of 128 tennis players through the seven rounds of a tournament, plotting the difference between each player’s ranking and their opponent’s ranking at each stage. The code builds player and result objects from a CSV file, tracking wins and losses by matching named winners and losers. It renders colored SVG line paths using d3.v3, with an ordinal x-axis for rounds and a linear y-axis for ranking differences. The dataset is loaded via `d3.csv`, and the visualization uses generic SVG elements and axes without any interaction.

projet v0

This visualization tracks the progress of a single ATP tennis player through seven tournament rounds, plotting the ranking difference between the player and each opponent as a line chart. The blue line uses `d3.svg.axis` and `d3.scale.ordinal` for the round labels, with a linear y-scale for ranking gaps. Data is loaded from `test_atp.csv` and processed into per-player match results, though only one indexed player’s path is displayed.

projet v2

This example visualizes the ranking differences of ATP tennis players across tournament rounds, tracking the change in rank against their opponents. It uses a line chart to show the progression for a selected player, with the x-axis representing the rounds from the first round to finals and the y-axis indicating the ranking difference. The code processes a CSV dataset of match results to calculate these differences, then renders the chart using the D3.js library with SVG, employing `d3.scale.ordinal()` for the x-axis, `d3.scale.linear()` for the y-axis, and `d3.svg.axis()` for the axes.

projet

This visualization displays the evolution of 32 tennis players' ranking differences from their opponents across seven tournament rounds, from the first round through the finals. Multiple colored lines trace each player’s path, showing the rank gap between the player and their opponent at each stage. Built with D3.js v3, it uses SVG for rendering, with an ordinal x-axis for rounds and a linear y-axis for rank differences. The data comes from a CSV file containing ATP match information, parsed using d3.csv.

Jan 3, 2017

projet

This visualization tracks individual tennis players’ ranking differences across tournament rounds at the 2016 Australian Open. It computes, for each player, the rank gap between them and their opponent for each match they played, marking wins and losses as V or L. The code uses d3.csv to load match data and builds a nested result object per player, iterating through rounds to append events. No chart is rendered; the example only processes and logs the structured data in the console.

Jan 1, 2017

projet

This example visualizes the progression of tennis players through the rounds of a tournament, tracking the ranking difference against each opponent. The code loads match data from a CSV file and constructs a player-by-player record of wins and losses across seven rounds. Using D3.js v3, it processes the data to compute ranking gaps and structure results in a JSON object containing round, difference, status, and opponent information for each player. The visualization is built with SVG, though the current implementation logs the processed data to the console without rendering a chart.

Jan 1, 2017

simple line chart from dataset

A simple line chart displays twelve monthly values from a small JSON dataset, with each month labeled on the x-axis and a bold numeric readout for the final data point. The chart uses d3.svg.line to draw the path, while d3.scale.ordinal positions the categorical months and d3.scale.linear maps values to the y-axis. Interactive circles respond to mouseover by turning red, enlarging, adding a dashed vertical guide, and showing the current value as text, with transitions on mouseout restoring the original appearance.

Dec 31, 2016

TP 6 DataViz v2

This visualization displays a force-directed network of French National Assembly members, with nodes representing individual representatives colored by their political group. Edges connect members who frequently voted together on legislative proposals during 2015, with thicker links indicating a higher number of shared votes. The data is parsed from a JSON file containing detailed voting records, and the chart is built using D3 v4’s `d3.forceSimulation` with link, charge, and center forces. Node dragging is enabled via `d3.drag`.

Dec 22, 2016

TP 6 DataViz v2

A force-directed graph shows voting coalitions among French National Assembly members, based on 213 roll-call votes from 2015. Nodes represent legislators, colored by their political group, while links connect those who voted together at least 20 times, with stroke width reflecting co-voting frequency. The visualization uses D3 v4's `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, processing JSON data from `scrutins_test.json` with SVG rendering and drag interaction.

Dec 22, 2016

TP 6 DataViz v2

This example visualizes voting patterns in the French National Assembly during 2015, showing links between deputies who voted together on the same side of a motion. The code processes JSON data from `scrutins_test.json`, extracting "pour" and "contre" votes for each scrutin and counting co-occurrences to build a weighted link network. It uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces, though the rendering code for nodes and links is commented out. The SVG output is prepared but no actual visualization is displayed in the provided version.

Dec 21, 2016

TP 6 DataViz v2

This example visualizes voting records from the French National Assembly, focusing on votes from 2015. It parses JSON data from `scrutins_test.json` to extract lists of legislators who voted for or against each motion. The visualization is built using D3 v4, setting up an SVG canvas and defining a force simulation with `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`. Although the code currently contains commented-out sections for rendering nodes and links, it prepares the data structures that would be used to draw a network graph.

Dec 21, 2016

Gist df3049cee654f94fee785b0655c7554f

This visualization shows the spread of influenza across French regions from 2003 to 2015, with a choropleth map colored by weekly case counts. A slider lets viewers scrub through time, updating the map and a label showing the current week. The code uses `d3.geo.conicConformal` for the map projection, a `d3.scale.quantize` color scale, and `queue()` to load both `regions.geojson` and the CSV dataset. Hovering over a region triggers a tooltip, and a legend displays the color-to-value ranges.

Dec 7, 2016

Gist e98de21095e9f9f84be064c579fab3cf

This interactive choropleth map displays weekly influenza rates across French regions from 2003 to 2015. A slider lets the user step through each epidemiological week, recoloring the map using a quantized color scale based on the global minimum and maximum incidence values. The visualization uses d3.v3, specifically the d3.geo.conicConformal projection and d3.geo.path to render the regions from a GeoJSON file, while CSV data is joined to region names. Hovering a region highlights it by reducing opacity and shows a tooltip with details. The color legend displays the numeric range for each color bin.

Dec 7, 2016

Gist 54a166aa937d8a64735d56db883dcc33

This example shows weekly influenza rates across French regions in 2014 on a choropleth map. A slider lets viewers scrub through the 52 weeks, updating the map’s color encoding and a displayed date label. The visualization loads region boundaries from `regions.geojson` and health data from `GrippeFrance2014.csv` using `queue()` and `d3.csv`. It projects the map with `d3.geo.conicConformal`, draws paths via `d3.geo.path`, and applies a `d3.scale.quantize` color scale based on the global minimum and maximum case counts.

Dec 6, 2016

Gist 8451fca4f10e880b32066b08ca934d3b

This choropleth map of French regions visualizes the total number of reported influenza cases for November 2014, coloring each region on a green scale from light to dark based on case counts. The visualization uses d3.geo.conicConformal projection and d3.geo.path to render the GeoJSON map, while a d3.scale.quantize maps data values to colors. Hovering over a region displays its name and case count via a tooltip. The data aggregates weekly flu statistics from the GrippeFrance2014.csv file specifically for the month of November.

Gist fdde3703c17e99c86fa4ab3f02a96302

A choropleth map of French administrative regions highlights the 2014 influenza season's November peak, with each region shaded by the summed weekly case counts from that month. Built with D3 v3, it uses a conic conformal projection and a quantized color scale, and merges CSV data with GeoJSON regions. Hovering over a region reveals its name and the computed value via a custom tooltip.

Gist 557a7c0474a7c20c0723b9ab166c105b

A choropleth map of French regions shows the cumulative reported influenza cases for November 2014, using a five-color quantize scale from green to dark green on a light gray base. The map is rendered with d3.v3’s geo path and a conic conformal projection, loading region boundaries from a GeoJSON file and joining them with CSV data. Hovering over a region displays a tooltip with its name and total case count for that period.

Gist bfc4fc4700e3d19007fa079cdb68d18a

A choropleth map of France shows the incidence of influenza across 22 regions for a five-week period in late 2014, with darker green fills marking higher case counts. The visualization merges weekly case data from a CSV file with regional boundaries from a GeoJSON file, using a conic conformal projection to render the map. Color values are assigned via `d3.scale.quantize()`, and interactive tooltips display the region name and summed case total on mouseover. The code relies on D3.js v3 for geospatial paths, data loading, and event handling.

Gist 7a670ce28de4fb296ed54dbff24bed19

A choropleth map of French regions colors each region by the sum of flu cases reported over five weeks in November 2014, using a green sequential scale from gray to dark green. It loads region boundaries from a GeoJSON file and joins them with CSV data containing weekly case counts per region. D3 v3’s `d3.geo.conicConformal` projection and `d3.geo.path` render the map, while a quantize color scale maps values to five color bins. Hovering over a region displays its name and total case count in a tooltip.

Gist baae6b15cf267f80467294f6cf1ab34b

A choropleth map of France shows the cumulative number of reported flu cases in 2014 for each region. The map uses a green color scale, with darker shades indicating higher totals; regions without data are gray. The visualization merges a CSV file of regional case sums with a GeoJSON of French administrative regions, using `d3.csv` and `d3.json` to load the data. It projects the geographic coordinates with `d3.geo.conicConformal` and renders the regions as SVG paths, coloring each polygon via a quantized color scale.

simple line chart from dataset

A simple line chart displays a time series of twelve monthly data points, labeled A through L, with a circle marker for each value and hover interactions that enlarge the point, reveal its numeric value, and draw a dashed guide line. The chart uses D3 v3 with an ordinal scale for the x-axis and a linear scale for the y-axis, rendered as SVG paths, circles, and text labels. Data is loaded from a local JSON file, and mouseover and mouseout events trigger transitions on the markers and supplementary text elements.

simple line chart from dataset

This example shows a simple line chart of monthly values from a small dataset, with points labeled by month and the most recent value highlighted numerically. The chart is built with D3 v3, using an ordinal x-scale for the named data points and a linear y-scale for values, rendered as an SVG path, circles, and text. Hovering a circle turns it red, enlarges it, shows the value directly, and draws a dashed guide line; moving the mouse away reverts these changes and removes the temporary elements. The data is loaded from a JSON file via `d3.json`.

simple line chart from dataset

A simple line chart plots twelve monthly values from a small JSON dataset, with a gray circle for each point and a black polyline connecting them. Hovering a circle turns it red, enlarges it, and increases the font size of the corresponding month label and the final value annotation. Built with D3 v3, the chart uses an ordinal x-scale and linear y-scale, `d3.svg.line` for the path geometry, and `d3.select` with event handlers for interactive feedback.

simple line chart from dataset

This example shows a simple line chart depicting twelve months of data, with circles marking each point and the final value displayed prominently near the end of the line. The chart uses an ordinal x-scale and a linear y-scale, with the line path generated by `d3.svg.line`. Interactive mouseover on a circle turns it red, enlarges it, and increases the font size of the corresponding date label, while a mouseout transitions these elements back to their original size and color over 500 milliseconds. The code loads data from a local `dataset.json` file and renders everything as SVG.