L

LRobergeon

@LRobergeon·22 public vizzes

Loading thumbnail…

TP4 DataViz France Couleurs

This example shows a choropleth map of metropolitan France displaying regional influenza case counts per week in 2014. It visualizes the sum of five weeks in November 2014 using a quantized color scale ranging from light to dark green, with a slider to explore other weeks and a tooltip showing the region's total. The code uses d3.geoConicConformal for projection, d3.geoPath to draw regions from a TopoJSON file, and d3.scaleQuantize to map data values to colors. Data comes from the GrippeFrance2014.csv file, which contains weekly counts by region.

Loading thumbnail…

fresh block

A minimal starter template shows the text "Edit the code below to change me!" rendered as an SVG element. The example demonstrates the basic setup for a D3 v4 visualization, creating an SVG container with fixed dimensions and appending a styled text element. The code uses `d3.select` and `svg.append` to build the scene, setting attributes for font size and family directly on the text node. This serves as a blank canvas for users to modify and expand into a full visualization.

Loading thumbnail…

Gist 4e41c1aff0542afcfd9252cfee96b106

This visualization displays weekly influenza case counts across French regions for 2014, encoded as colored shapes on a map. The geographic outlines are drawn using d3.geoPath with a conic conformal projection from the regions.json file. Each region’s fill color is intended to reflect its cumulative 2014 total from GrippeFrance2014.csv, though the current code only establishes the color domain and does not yet bind the data to the paths. The map is rendered with D3 v4, with the GeoJSON loaded via d3.json and styling applied through SVG path elements.

Loading thumbnail…

TP3 animation

This visualization animates the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010 using an animated line chart. It first draws each company’s price line progressively, then transforms the view into a horizon chart by stacking three colored area bands per symbol. The code relies on D3 v3’s `d3.svg.line`, `d3.svg.area`, `d3.time.scale`, `d3.nest`, and `d3.timer` to build the SVG animation, reading data from a CSV file.

Loading thumbnail…

TP3 animation

The visualization animates monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It initially plots each company's price line individually, then transforms all three into a stacked horizon chart. The code uses d3.svg.line and d3.area generators with basis interpolation, d3.time.scale for the date axis, and d3.timer for the animation sequence. The final view uses d3.scale.ordinal colors and a clipPath to create the layered horizon effect. Data comes from the bundled dataset.csv file.

Loading thumbnail…

TP3 multiple line

This visualization displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010, using a small multiple layout with one chart per company. Each chart contains a gray area path and a line path rendered as SVG, with the y-axis scaled independently to each stock’s maximum price. The code uses d3.csv to load the dataset, d3.nest to group by symbol, and d3.time.scale, d3.svg.area, and d3.svg.line to construct the charts. Data comes from a local CSV file.

Loading thumbnail…

loading multiple stock data from dataset

The visualization displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 through March 2010, with each company represented by a distinct colored line. A steel-blue area chart overlays the entire dataset, showing the combined price distribution across all symbols. The code loads the comma-separated dataset using `d3.dsvFormat`, nests entries by symbol with `d3.nest`, and applies a basis curve smoothing via `d3.line().curve(d3.curveBasis)`. Time and linear scales position the data, while `d3.axisBottom` and `d3.axisLeft` render the axes. A legend identifies each stock symbol using the ordinal color scheme from `d3.schemeCategory10`.

Loading thumbnail…

TP3 area simple line chart

This area chart visualizes a simple dataset of monthly values using a blue filled region beneath a black line. Built with D3 v4, it uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.area` and `d3.line` generating the SVG paths. Data is loaded from a local `dataset.json` file, parsed with `d3.timeParse`, and labeled with formatted month-year strings. The chart also highlights the final value’s numeric label beside the line’s end.

Loading thumbnail…

TP3 DataViz

This example animates a multi-series line chart showing the monthly closing prices of Microsoft, Amazon, and IBM from 2000 to 2010. It first draws the lines progressively, then transitions to a horizon chart, using stacked, semi-transparent bands to encode price magnitude. Built with D3 v3, it relies on `d3.svg.line`, `d3.svg.area`, `d3.time.scale`, and `d3.timer` for the animation, with data loaded from a CSV file via `d3.csv`. The final view clips each band with a `clipPath` and uses a color scale to differentiate the series.

Loading thumbnail…

TP3 area chart

A small multiples area chart visualizes monthly closing prices for Microsoft, Amazon, and IBM from January 2000 through March 2010, with each symbol’s time series drawn as a filled steelblue region. The D3 v4 code uses `d3.text`, `d3.dsvFormat`, `d3.nest`, `d3.scaleTime`, `d3.scaleLinear`, `d3.curveBasis`, and `d3.axisBottom`/`d3.axisLeft` to parse the CSV, group by symbol, and render the SVG paths. A categorical color legend labels each stock.

Loading thumbnail…

loading multiple stock data from dataset

A multi-line chart displays the monthly closing prices of three technology stocks (MSFT, AMZN, IBM) from January 2000 through March 2010, sourced from a local CSV file. The visualization distinguishes each stock with a distinct color via `d3.scaleOrdinal` and `d3.schemeCategory10`. The chart is rendered as an SVG canvas using D3 v4, with price data nested by symbol via `d3.nest`, dates parsed with `d3.timeParse`, and paths drawn using `d3.line` and `d3.curveBasis`. Axes, including a bottom x-axis and a left y-axis with 20 ticks, are generated using `d3.axisBottom` and `d3.axisLeft`. A legend maps each color to its stock symbol.

Loading thumbnail…

TP3 simple line chart

This example shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 as a single black line chart. The visualization uses D3 v4 with an SVG rendering approach, employing `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. The `d3.line` generator creates the path, while `d3.timeParse` and `d3.timeFormat` handle date conversion and label formatting. Data is loaded from a JSON dataset, with the last value displayed as text annotation.

Loading thumbnail…

fresh block

This example displays a single line of text, "Edit the code below to change me!", placed within a blank SVG canvas. It is a minimal starter template that demonstrates the basic structure for a D3.js visualization using d3.v4. The code selects the body element, appends an SVG container with a fixed width and height, and then uses `svg.append` to add a text element with specified positioning, font size, and font family. It serves as a simple, empty foundation for users to begin building their own custom D3 projects.

Loading thumbnail…

fresh block

A minimal starter template shows the text "Edit the code below to change me!" rendered as an SVG element. The example demonstrates the basic setup for a D3 v4 visualization, creating an SVG container with fixed dimensions and appending a styled text element. The code uses `d3.select` and `svg.append` to build the scene, setting attributes for font size and family directly on the text node. This serves as a blank canvas for users to modify and expand into a full visualization.

Loading thumbnail…

TP2

This visualization shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 using multi-line time series. The data comes from a CSV file parsed with the `d3.dsvFormat` API. Each stock’s price trend is drawn as a colored line using `d3.line` with a basis curve, within an SVG rendered by D3 v4. The chart includes axes generated by `d3.axisBottom` and `d3.axisLeft`, plus a legend built with `d3.scaleOrdinal` and category colors. The code also computes per-symbol maximum and total prices via `d3.max` and `d3.sum`, though these values are not directly displayed.

Loading thumbnail…

Rendu TP2

A simple line chart displays monthly values from a small JSON dataset, with time parsed via `d3.timeParse` and formatted with `d3.timeFormat`. An ordinal scale maps dates to x-positions, while a linear scale handles the y-axis. Semi-transparent gray circles mark each data point, and hovering over a circle turns it red, adds a dashed vertical guide line, and shows the numeric value as text. The chart also includes a final value label on the right edge.

Loading thumbnail…

simple line chart from dataset

This visualization displays a simple line chart plotting seven monthly data points from a JSON dataset, with each point labeled by its abbreviated month and numeric value. The SVG chart includes a black polyline, small circles at each data point that turn red and fill on mouseover, and a large text label showing the final value. Built with D3 v4, it uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, `d3.line` to generate the path, and `d3.timeParse` to convert date strings.

Loading thumbnail…

simple line chart from dataset

This example displays a simple line chart of seven monthly data points, with each point labeled by its date and value. It uses d3.v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to map the dataset to SVG paths and circles. The chart animates circle color on mouseover via `transition().duration(500)`, and the final value is appended as a text label. Data comes from an external `dataset.json` file containing name, value, and date fields.

Loading thumbnail…

Exo TP 2

This example shows a simple time-series line chart of seven monthly data points from a JSON dataset, with each date labeled beneath the line and the final value displayed to the right. The chart uses a black polyline rendered as an SVG path, with a time scale for the x-axis and a linear scale for the y-axis. The code relies on D3 v4’s `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to process dates, map values, and draw the path. A circle element is prepared for potential interaction but is not shown.

Loading thumbnail…

fresh block

A minimal starter template shows the text "Edit the code below to change me!" rendered as an SVG element. The example demonstrates the basic setup for a D3 v4 visualization, creating an SVG container with fixed dimensions and appending a styled text element. The code uses `d3.select` and `svg.append` to build the scene, setting attributes for font size and family directly on the text node. This serves as a blank canvas for users to modify and expand into a full visualization.

Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes a small dataset of seven monthly values from January to July 2016. The chart shows a fluctuating trend, with values rising from 10 to 50 before dropping back to 10. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to construct the path, while `d3.json` loads the data from `dataset.json`. Axis labels display formatted dates, and the final value is annotated with a text element.

Loading thumbnail…

simple line chart from dataset

This line chart visualizes a small dataset of monthly values, mapping dates on the x-axis and numeric values on the y-axis, with a steelblue stroke for the line. It also includes an interactive tooltip: moving the mouse over the chart reveals a focus circle and a label showing the price formatted as currency. The visualization uses D3 v3 with `d3.time.scale`, `d3.svg.line`, `d3.svg.axis`, and `d3.bisector` for mouse-based lookup. Data is loaded via `d3.tsv` from a local JSON file, and the rendering is SVG-based.