Skip to main content
SimilarExport ZIP
100%

Projet_DataViz_Matrice_Histogramme

✓ Published0🌍 Public
KKylaste
Last edited Dec 31, 2017
Created on Dec 31, 2017

This visualization combines a train-station adjacency matrix with a live histogram of journey regularity. It plots TGV and Intercités routes, where each matrix cell’s opacity encodes the percentage of on-time trips, and clicking a cell highlights its row and column. The histogram charts monthly regularity for selected routes using a dynamic bar chart. Built with Vue and D3 v4, the code applies `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`, while a slider filters data by year. Data comes from CSV files (`trajets_tgv.csv`, `trajets_intercites.csv`) and renders as SVG.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Kylaste/'>Kylaste</a>'s block: <a href='http://bl.ocks.org/Kylaste/3dd9d4211f788843330bede05e0fd98d'>Projet_DataViz_Matrice</a>

forked from <a href='http://bl.ocks.org/Kylaste/'>Kylaste</a>'s block: <a href='http://bl.ocks.org/Kylaste/7df228ca0804a143ba19e244ba992aa2'>Projet_DataViz_Matrice_Histogramme</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Projet_DataViz_Matrice_Histogramme

This visualization combines an adjacency matrix with a linked histogram to explore train punctuality. Users select a train type (TGV or Intercité) and click a matrix cell to see monthly regularity data for that route. The matrix uses a color scale to encode weight, while the histogram displays punctuality across months. Built with D3 v4 and Vue, it uses `d3.scaleBand`, `d3.axisTop`, `d3.axisLeft`, and `d3.scaleLinear`, with data loaded via `queue().defer(d3.csv, ...)`. A slider filters the histogram by year, and tooltips show details on hover.

KKylaste
95% match
Loading thumbnail…

Projet_DataViz_Matrice_Histogramme3

This block combines a monthly histogram with an adjacency matrix to visualize the punctuality of TGV and Intercité train routes in France. A slider selects the year, and radio buttons switch between train types. The code uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisTop` to render the SVG matrix and histograms. Data for stations and routes with punctuality weights is loaded from CSV files, and interacting with the controls re-renders the visualization.

KKylaste
92% match
Loading thumbnail…

Projet_DataViz_Histogramme

This example shows the monthly regularity of TGV trains on French routes, displayed as a bar chart of the number of delayed trains per month. It begins by filtering a CSV of train records (tgv_annees.csv) to a selected origin–destination pair and year, then renders the resulting monthly counts as labeled bars using SVG. The visualization is built with D3 v4, using `d3.csv` for loading, `d3.scaleLinear` and `d3.scaleBand` for axes, and `d3.axisBottom` for the month labels. The code follows a reusable chart module pattern, with the main chart logic in `histogram-chart.js`.

KKylaste
88% match
Loading thumbnail…

Projet_DataViz_Matrice

This example visualizes a network of train connections across France as an adjacency matrix, with each cell shaded to represent the frequency of service between station pairs. The view is built in Vue using SVG, with D3 v4’s `d3.csv` and `queue` loading the node and edge lists. A hover interaction highlights the row and column of a selected station, and the axes use `d3.axisTop` and `d3.axisLeft`.

KKylaste
85% match
Loading thumbnail…

Data Viz Course

This scatterplot displays the relationship between the number of trains that ran and the number of delayed trains across various TGV routes, colored by rail axis (e.g., Atlantique, Sud-Est). It uses a D3.js v4 SVG rendering with a Vue framework, featuring animated circles and a tooltip that reveals the monthly regularity percentage on hover, sourced from a semicolon-delimited CSV file.

CCernewein
79% match
Loading thumbnail…

projet_DataViz

The visualization shows the evolution of TER (regional express train) traffic quality across French regions from 2013 to 2017, mapping monthly percentage values onto a choropleth of France. The view is updated via a slider that changes the displayed month. The code uses D3 v4 with `d3.geoConicConformal` for the map projection, `d3.geoPath` to render region outlines, and a quantized color scale. Region values are loaded from the CSV file containing a row per region and columns for each month, then joined to the GeoJSON regions by matching region names.

AAminaSGitHub
76% match
Loading thumbnail…

SNCF_dataviz_corentin

This visualization compares two French railway stations by displaying their available on-site amenities, access modes, and traveler trip purposes side-by-side as small colored rectangles. The code uses D3 v4 (`d3.csv`, selections, and attribute manipulation) to load a dataset of SNCF station statistics, then renders SVG rectangles to encode each categorical variable for both selected stations. Station identifiers are defined in the script, and the tooltip and text elements display station names derived from the underlying CSV data.

CCtuauden
75% match
Loading thumbnail…

SNCF_dataviz_corentin

This visualization compares two SNCF train stations, selected by their UIC codes, showing their 2016 passenger counts, the percentage variation from 2015, and station names. It renders these metrics as static text labels on an SVG canvas using D3 v4. The code loads station data from a CSV file, calculates the year-over-year variation, and formats numbers with `d3.format`.

CCtuauden
74% match