Kylaste

@Kylaste·14 public vizzes

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.

Jan 8, 2018

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.

Jan 8, 2018

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.

Dec 31, 2017

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`.

Dec 29, 2017

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`.

Dec 21, 2017

Loading thumbnail…

DataVizTP4

This interactive choropleth map visualizes weekly influenza case counts across French administrative regions for the year 2014. A slider lets users scrub through 52 weeks, updating the region colors in real time using a quantized color scale. The visualization loads CSV data and GeoJSON boundaries, projecting the map with `d3.geoConicConformal` and rendering shapes via `d3.geoPath`. Hovering over a region reveals its name and the week’s count through a tooltip, colored according to a five-step green gradient.

Dec 5, 2017

Loading thumbnail…

DataVizTP4

This visualization maps influenza case counts across French regions for 2014, using a conic conformal projection to render regional boundaries from a GeoJSON file. The map is drawn with `d3.geoPath` and filled based on annual totals from a CSV dataset, though the color scale and data-joining logic remain commented out. The code includes commented examples for merging CSV values with GeoJSON features and computing monthly sums, but only the unfilled geographic outlines are actually displayed on screen.

Nov 30, 2017

Loading thumbnail…

DataVizTP3_StackedArea

This stacked area chart visualizes monthly stock prices for multiple companies (MSFT, AMZN, IBM, AAPL) from 2000 to 2010, using a dataset loaded from a CSV file. The chart shows how each company’s price contributes to the total across time, with colored layers and a legend identifying each symbol. Built with D3 v4, it uses `d3.stack()`, `d3.area()`, and `d3.nest()` to structure the data, while `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.scaleOrdinal()` handle scaling and colors. SVG paths render the areas, and axes are added with `d3.axisBottom()` and `d3.axisLeft()`.

Nov 29, 2017

Loading thumbnail…

DataVizTP3_SmallMultiple

The visualization displays monthly stock price trends for Microsoft, Amazon, and IBM as small multiples, with each company shown in its own mini chart panel. The code uses D3 v4 with SVG rendering, employing `d3.nest()`, `d3.csvParse`, and `d3.area()` with `d3.curveBasis`. Each panel applies its own y-domain scaled to the company’s maximum price, showing colored area and line paths. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with data sourced from a local CSV file.

Nov 29, 2017

Loading thumbnail…

DataVizTP3_AreaChart

An area chart displays monthly closing stock prices for Microsoft, Amazon, and IBM from January 2000 through March 2010. Three semi-transparent filled regions, one per company, use color to distinguish the symbols, with a legend identifying each. Built with D3 v4 and rendered as SVG, the code uses `d3.area` and `d3.line` with basis curves, `d3.nest` to group the CSV data by symbol, and `d3.timeParse` for date handling. The y-axis is scaled to the maximum price across all series.

Nov 29, 2017

Loading thumbnail…

explication multi-lignes

A multi-line chart displays monthly stock price trends for Microsoft, Amazon, and IBM, with each company’s series drawn as a smooth, colored path. The visualization uses nested data from a CSV file, parsed with `d3.csvParse` and organized by symbol via `d3.nest`. Time and linear scales map dates and prices, while `d3.line` with `d3.curveBasis` generates the paths in SVG. A legend identifies each series, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`.

Nov 27, 2017

Loading thumbnail…

loading multiple stock data from dataset

This example displays multiple stock price time series from a CSV dataset, with one line per company symbol (MSFT, AMZN, IBM) plotted over time. A legend identifies each series by color. The visualization uses D3 v4 with SVG rendering, loading data via `d3.text` and `d3.dsvFormat`, nesting records by symbol with `d3.nest`, and drawing paths with `d3.line` and `curveBasis`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`.

Nov 23, 2017

Loading thumbnail…

fresh block

A line chart displays monthly values for twelve categories labeled A through L, with circles marking each data point and dashed vertical guides from the baseline. Hovering a circle highlights it in red, fades in the corresponding value label and guide line, then restores them on mouseout. The visualization uses d3.line, d3.scaleTime, and d3.scaleLinear to position marks, with transitions on opacity for interactive feedback. Data comes from a local JSON file, and rendering occurs in SVG with a monospace font for numeric labels.

Nov 9, 2017

Loading thumbnail…

fresh block with data binding

A line chart shows monthly values for categories A through L from a JSON dataset, with a visible trend line, labeled x-axis dates, and value annotations. Hovering over a semi-transparent circle highlights the corresponding data point in red, reveals its numeric value, and displays a dashed vertical guide line. The visualization uses D3 v4’s `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.timeParse` for the SVG rendering, with mouseover and mouseout transitions controlling opacity and styling.

Nov 9, 2017