Renaud-D-Harreville

@Renaud-D-Harreville·13 public vizzes

fresh block

A force-directed network diagram visualizes a set of physiological and clinical monitoring parameters (like CVP, PAP, and SAO2) as linked nodes, with directed arrows and label paths showing relationships. The D3.js v4 code builds the SVG with `d3.forceSimulation` for layout, `d3.forceLink` for edges, and `d3.forceManyBody` for repulsion, using a drag interaction to reposition nodes. Each node is a colored circle with a text label, and edge labels align to the path direction. Data comes from the included `graph.json` file.

Jan 20, 2020

Loading thumbnail…

alarm graph

An interactive force-directed network graph displays the relationships between medical and physiological alarm codes. Nodes represent alarm identifiers such as FIO2, CVP, and PAP, while directed links with arrowheads indicate dependencies between them. The visualization uses d3.forceSimulation with forceLink and forceManyBody to compute the layout, while HTML5 drag and drop operations let users manipulate nodes in real time. The data originates from a JSON file loaded via d3.json, and the graph is rendered as an SVG with nodes as circles and labels.

Apr 11, 2018

Loading thumbnail…

TP4 Data viz france ESSAI UCBL 2017

This interactive choropleth map visualizes regional influenza case data across France. It uses D3 v4 to project geographic boundaries with `d3.geoConicConformal` and render them via `d3.geoPath`, while a slider allows users to scrub through weekly data, recoloring each region based on its proportion of total cases. The color scale is a `d3.scaleQuantize` ranging from light to dark green, applied to regional values calculated from the provided grippe.csv dataset. The map is built on a GeoJSON of French regions, with regions colored dynamically as the selected week changes.

Dec 2, 2017

Loading thumbnail…

TP4 Data viz UCBL 2017

A choropleth map of France displays the regional distribution of influenza cases from the 2014 epidemic, with darker green hues indicating higher total case counts. The visualization merges CSV data on weekly reported cases per region with a GeoJSON map of French regions. Using d3.v4, the code loads both datasets, calculates each region's relative share of the total, and applies a quantized color scale to the geographic paths via the `d3.geoPath` and `d3.geoConicConformal` projection.

Dec 1, 2017

Loading thumbnail…

TP4 Data viz france ESSAI UCBL 2017

This interactive choropleth map displays the weekly incidence of influenza across French regions for the 2014 season, using data from the `grippe.csv` file. A slider allows users to step through 52 weeks, updating the color-coded regions based on that week’s reported cases relative to the regional annual total. The map is rendered using D3 v4 with `d3.geoConicConformal` for projection, `d3.geoPath` to draw the regions from the `france.json` GeoJSON, and a `d3.scaleQuantize` color scale. The update function recalculates ratios and reapplies fill colors on each slider input.

Dec 1, 2017

Loading thumbnail…

TP4 Data viz UCBL 2017

This visualization displays a map of France, showing the spread of influenza across its regions over time. It uses data from the `grippe.csv` file, which contains weekly flu case counts for each region during the 2014 season. The code merges this tabular data with geographic boundaries from `france.json`, a GeoJSON file, and renders the map using D3.js v4. The map is projected using the `d3.geoConicConformal` projection, and paths are created with the `d3.geoPath` function. A categorical color scheme, `d3.scaleOrdinal(d3.schemeCategory10)`, colors the regions.

Nov 30, 2017

Loading thumbnail…

essai

This visualization displays the monthly stock prices of technology companies (MSFT, AMZN, IBM) as overlapping line charts with a semi-transparent area fill beneath each line. The data is parsed from a CSV file using `d3.dsvFormat`, with dates formatted via `d3.timeParse`. The chart uses `d3.line` and `d3.area` with a basis curve for smoothing, while `d3.axisBottom` and `d3.axisLeft` render the axes. Each company is color-coded using `d3.schemeCategory10` and labeled at the lower-right corner of the SVG canvas.

Nov 28, 2017

Loading thumbnail…

TP2 data viz final UCBL 2017

This interactive visualization compares the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. It first animates line charts for each company sequentially, then transforms them into stacked horizon graphs to highlight price trends and relative magnitudes. Built with D3 v4, it uses `d3.csv` to load the dataset and `d3.timeParse` for date handling, while SVG paths and animated transitions via `d3.timer` and `transition` methods drive the visual evolution. The horizon chart technique uses clipped, overlapping areas to encode values across multiple bands.

Nov 28, 2017

Loading thumbnail…

TP2 Data viz stacked UCBL 2017

This stacked area chart visualizes the monthly closing prices of three technology stocks—Microsoft, Amazon, and IBM—from 2000 to 2010. The chart uses a time-scaled x-axis and a linear y-axis, with each stock represented as a colored layer using the d3.stack layout. The code parses a tab-separated dataset with d3.tsv, nests the data by symbol, and renders the areas with d3.area, applying a category10 color scale. Axis labels and final values appear at the right edge of each layer.

Nov 28, 2017

Loading thumbnail…

TP2 Data viz areas UCBL 2017

This example displays a multi-series line and area chart of stock price changes over time. The visualization compares the monthly closing prices of three technology companies, using the provided dataset of Microsoft, Amazon, and IBM stock values. Each symbol is nested and rendered as a separate colored line with a semi-transparent area beneath it, allowing for quick visual comparison of price trends. The chart is built with d3.v4, using the `d3.line`, `d3.area`, and `d3.nest` APIs to process and draw the time-series data.

Nov 28, 2017

Loading thumbnail…

TP2 Data viz small multiples UCBL 2017

This example displays multiple small-multiple line charts, each representing the monthly stock price of a different company (MSFT, AMZN, IBM) from the dataset.csv file. Each chart includes an area fill and a line, with the y-axis scaled to the maximum price of that specific symbol. The code uses d3.nest() to group data by symbol, d3.timeParse to parse dates, and d3.axisBottom and d3.axisLeft to render axes. A d3.scaleOrdinal with d3.schemeCategory10 assigns a distinct color to each company’s chart.

Nov 28, 2017

Loading thumbnail…

TP2 Data viz small multiples UCBL 2017

This visualization displays stock price trends for multiple companies (MSFT, AMZN, IBM) as a series of small multiples, with each symbol rendered in its own chart panel. Each panel shows a line and an area chart, with y-axis scaled per-panel to that company’s maximum price, and a label for the symbol name. Built with D3 v4, it parses the CSV data using `d3.dsvFormat`, nests by symbol, and uses `d3.area` and `d3.line` for the geometric paths. The SVG renderings are created with appended `<text>` labels and axes via `d3.axisBottom` and `d3.axisLeft`.

Nov 28, 2017

Loading thumbnail…

TP2 Data viz UCBL 2017

This example visualizes monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010. The chart shows multiple colored area and line series, each symbol assigned a distinct color from the d3.scaleOrdinal category scheme, with a legend identifying each company. Data is loaded from a CSV file and nested by symbol using d3.nest, with dates parsed via d3.timeParse and scales constructed with d3.scaleTime and d3.scaleLinear. Lines and areas are rendered as SVG paths using d3.line and d3.area with a curveBasis interpolation, alongside d3.axisBottom and d3.axisLeft for the time and price axes.

Nov 28, 2017