Rastignac

@Rastignac·8 public vizzes

TP5 Grippe Final

This animated choropleth map visualizes the spread of influenza across French regions from 2003 to 2015, using weekly case counts. The color scale ranges from light pink to dark red, with grey indicating missing data. A slider lets viewers scrub through time, updating both the map and a week label. Built with D3.js v3, it loads regional GeoJSON and CSV data asynchronously via the `queue()` API, then renders the map using `d3.geo.path` with a conic conformal projection. Regions are colored by querying each feature’s weekly value array.

Dec 7, 2016

Loading thumbnail…

TP4 suite (TP5)

This visualization displays the weekly incidence of influenza across French regions from 2003 to 2015. A choropleth map colors each region according to the reported case count for the selected week, with a slider controlling the time period. The code uses D3 v3’s `d3.geo.path` with a conic conformal projection, TopoJSON for region boundaries, and a quantized color scale. Data is loaded asynchronously with the `queue` library and merged with the geographical features.

Dec 7, 2016

Loading thumbnail…

TP4 suite (TP5)

A choropleth map of France displays the incidence of influenza across metropolitan regions for the 2014 season, using a green sequential color scale to encode the total weekly case counts. A slider allows the user to switch between different aggregated time periods, with a tooltip revealing each region’s name and value on hover. The visualization is built with D3 v3 and TopoJSON, using `d3.geo.conicConformal` for projection, `d3.geo.path` for rendering, and `d3.scale.quantize` for color mapping, while loading regional data from a CSV file and geographic boundaries from a US states JSON.

Dec 7, 2016

Loading thumbnail…

TP4

A choropleth map of France shades regions by aggregated influenza case counts from November 2014, using a green color scale. The code loads region-level data from a CSV and joins it to geographic shapes from GeoJSON via `d3.json`, then renders paths with `d3.geo.path` using a conic conformal projection. Tooltips display the region name and value on mouseover.

Nov 24, 2016

Loading thumbnail…

TP4

A choropleth map of France displays the cumulative influenza case counts for the last five weeks of 2014 across the country's regions. The visualization renders the geographic boundaries from a GeoJSON file using the D3.js `d3.geo.path()` and a conic conformal projection. Regional values are joined from the GrippeFrance2014.csv data, mapped through a five-color quantized scale, and displayed as tooltips on mouseover. The code uses D3 v3 and the TopoJSON library.

Nov 24, 2016

Loading thumbnail…

Poisson-Disc III

The visualization renders Van Gogh’s *The Starry Night* as a mosaic of Voronoi cells, with each cell’s fill color sampled from the corresponding pixel of the source image. It uses a Poisson-disc sampling algorithm to place 10,000 points evenly across the canvas, then applies `d3.geom.voronoi` with a clip extent to construct the cells. The image is loaded via an `Image` object and drawn to a 960×500 canvas, where `getImageData` extracts the color for each sample. The code relies on D3 v3 and Canvas 2D API.

Nov 17, 2016

Loading thumbnail…

simple line chart from dataset

This example displays a simple line chart of seven monthly data points, with categorical labels (A–G) on the x-axis and numeric values on the y-axis. The chart also shows the date of each point below the x-axis and the final value as a large annotation. Built with D3 v3, it uses `d3.scale.ordinal` for the x-axis, `d3.svg.line` for the path, and `d3.time.format` to parse and display dates. The data loads from a local `dataset.json` file and renders as SVG elements.

Nov 17, 2016

Loading thumbnail…

TP3 DataViz: Données, interaction et transition avec D3.js

This visualization displays a time-series dataset of monthly values as a line chart with interactive hover effects. The chart uses an ordinal x-axis for category names and a linear y-axis for values, with a path rendered via `d3.svg.line`. Users can hover over semi-transparent circles to highlight a data point, which triggers a red fill, increases the circle’s opacity, and reveals a corresponding value label and dashed rectangle outline. The code employs `d3.scale.ordinal`, `d3.scale.linear`, and `d3.time.format` for date parsing, with mouseover and mouseout events controlling transitions of opacity and font size.

Nov 17, 2016