Skip to main content
SimilarExport ZIP
100%

Projet_DataViz_Matrice_Histogramme

✓ Published0🌍 Public
KKylaste
Last edited Jan 8, 2018
Created on Dec 29, 2017

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.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

Projet_DataViz_Matrice_Histogramme

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.

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
87% 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
75% match
Loading thumbnail…

Vizu_Part1_Map

This interactive map visualizes regional TER train flow quality across France from 2013 to 2017. Users adjust two sliders to select a specific month and year, and the map updates its choropleth coloring accordingly, with a legend and hover tooltips showing precise values. The visualization uses D3 v4's `d3.geoConicConformal` projection and `d3.geoPath` to render the regions, while a color scale (`d3.scaleQuantize`) encodes the data from the provided CSV file.

AAminaSGitHub
71% match
Loading thumbnail…

Dorling Cartogram

This interactive Dotting-style cartogram displays monthly regional train delays across French administrative regions from 2013 to 2017. A Dorling-style map replaces geographic polygons with circles sized by delay magnitude, with slider inputs to select month, year, and toggle between map and node views. The visualization uses d3.csv and d3.json to load data, d3.geoPath with a geoConicConformal projection, d3.scaleSqrt for circle radii, and d3.scaleQuantize for color encoding. Hovering reveals tooltips with precise values.

AAminaSGitHub
71% match