BarbierJeremy

@BarbierJeremy·10 public vizzes

TP4_DataViz

This interactive choropleth map shows the number of flu cases per French region for each week of 2014, viewable via a slider. The visualization uses D3.js v4 to project GeoJSON regions with a conic conformal projection and color them using a quantized scale. Data is loaded from a CSV file, and the map displays a tooltip on mouseover, while a slider updates the week’s values.

Dec 10, 2017

Loading thumbnail…

TP3_Correction

This example presents a sequence of animated stock-price charts for Microsoft, Amazon, and IBM, cycling between area, multi-line, stacked, and streamgraph views. Built with D3 v4, it loads monthly price data from a CSV and uses `d3.nest()` to group values by company symbol, with `d3.area()` and `d3.line()` for the drawn shapes. An SVG canvas renders all charts, with timed transitions (`transition.duration`) and color-coded series via `d3.scaleOrdinal`. The animation loops automatically, highlighting how the same data can be reshaped dynamically across different visual encodings.

Nov 30, 2017

Loading thumbnail…

Area_Chart

This area chart compares monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010. It displays both filled areas and overlaid lines per symbol, using color to distinguish each company. The visualization is rendered with SVG, and the code uses d3.nest, d3.line, and d3.area with basis curves, plus d3.scaleTime and d3.scaleLinear for axes. Data is loaded from a CSV file and parsed with d3.dsvFormat.

Nov 29, 2017

Loading thumbnail…

Stream_Graph

The visualization shows monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010 as a stream graph, using filled areas to display price changes over time. The areas are stacked with the `d3.stack()` API and offset using `d3.stackOffsetWiggle` to create a flowing, layered effect. Data is loaded from a CSV file, parsed with `d3.dsvFormat`, and rendered as SVG paths using `d3.area` with basis curves. The x-axis uses `d3.scaleTime`, while colors are assigned via `d3.scaleOrdinal` with the category10 scheme.

Nov 29, 2017

Loading thumbnail…

Stack_Graph

This stacked area chart shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. The chart uses D3 v4’s `d3.stack()` to compute layered series and displays them as filled areas with `d3.area()`, using a basis curve for smoothing. Colored by `d3.schemeCategory10` and rendered as SVG, it includes time and linear axes via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV file and nested by symbol with `d3.nest()`.

Nov 29, 2017

Loading thumbnail…

Small_Multiple

Small multiples show a single time series per stock symbol from the provided stocks.csv data, with each chart displaying the price trend and its colored area fill. Each panel uses its own y-domain scaled to that symbol’s maximum price, while the x-axis uses a shared time scale across all charts. The visualization is rendered as SVG using d3.v4, with d3.nest grouping data by symbol, d3.area and d3.line generating the shapes, and d3.scaleOrdinal assigning distinct colors per stock.

Nov 29, 2017

Loading thumbnail…

TP3_DataViz

This visualization displays a line chart of stock prices over time, with data loaded from an external CSV file. The chart uses an SVG-based D3.js v3 layout, employing a time-scaled x-axis and a linear y-axis to map date and price values. The line itself is drawn using `d3.svg.line`, while axes are generated with `d3.svg.axis` (implied by `d3.axisBottom` and `d3.axisLeft`). Although the code references an area path and dataset.json, the visible rendering is a simple black line, suggesting a minimal line chart focused on temporal price trends.

Nov 23, 2017

Loading thumbnail…

TP2_RENDU

A simple line chart visualizes a small time series dataset, with each data point rendered as a grey circle. Hovering over a circle highlights it in red, displays the corresponding value as text, and draws a dashed vertical guide line. The chart is built with D3 v4, using `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`, with data loaded from a JSON file via `d3.json`. SVG elements and mouse event handlers drive the interactive annotations.

Nov 15, 2017

Loading thumbnail…

TP2_DataViz_Linechart

This example displays a simple line chart that plots seven data points, each labeled with a month abbreviation (e.g., "Jan 16") and a value. The chart uses a time-based x-axis and a linear y-axis, with the final value annotated in large text beside the line. Built with D3 v4, the visualization relies on `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`, reading data from a local JSON file, and renders the line and labels as SVG elements within a fixed-width canvas.

Nov 9, 2017

Loading thumbnail…

fresh block with data binding

This example displays a single SVG text element with the string "FNC" rendered in a large, orange, monospace font. The visualization uses a binding workflow: it selects the body element, appends an SVG canvas, and then applies the `data()` method to append the text element from a single-item array. Built with D3 v4, the code explicitly chains `.enter()` and `.append()` to create the graphical primitive, demonstrating a basic data-binding pattern for static SVG text placement. The chart is styled directly through attributes for positioning and font properties.

Nov 9, 2017