Rade-Mathis

TP4

This visualization shows the annual incidence of influenza across French regions in 2014, using a choropleth map with an orthographic projection. Regional totals are aggregated from weekly case counts and displayed as colored polygons, with a tooltip showing each region’s name and total. The map is rendered using `d3.geoOrthographic()` and `d3.geoPath`, with regions colored via a linear scale from white to green and hover interactions managed through D3 event handlers. Data is parsed from a CSV file and joined to GeoJSON features.

Dec 3, 2017

TP4

A choropleth map displays the annual sum of influenza cases across French regions in 2014, colored on a white-to-green scale. Hovering over a region reveals its name and total count via a tooltip. Built with d3.v4, it uses `d3.geoOrthographic` projection, `d3.geoPath` for rendering GeoJSON, and `d3.scaleLinear` for color mapping. Data comes from the GrippeFrance2014.csv file, merged with regional geometries from regions.json.

Dec 3, 2017

TP4

A placeholder visualization displays the static text "Edit the code below to change me!" in monospace type on a blank SVG canvas. The example uses d3.v4 to select the body element, append an SVG container sized 960 by 500 pixels, and add a single text element positioned at coordinates (120, 200). This minimal starter demonstrates basic D3 selection and SVG text rendering with the `attr` method, serving as a template for building interactive charts. No data is loaded or transformed in this code.

Nov 30, 2017

TP3-p3-5-backup

This example visualizes stock price trends for multiple symbols using several area chart variants: a basic filled area, a separated area plot, and stacked and centered area charts. The visualization cycles through these different representations, dynamically re-rendering the SVG with smooth transitions. Built with D3 v4, the code uses `d3.area`, `d3.curveBasis`, `d3.nest`, and time scales to process and plot data from a stocks CSV file. Each series is color-coded, and the animation highlights how different area chart layouts compare.

Nov 27, 2017

TP3-p3-5

This visualization compares four area-chart layouts for multivariate stock data, showing the same series as stacked, centered, and separated regions to highlight alternative encodings of cumulative change. It loads CSV data via `d3.text` and `d3.dsvFormat`, parses dates with `d3.timeParse`, and uses `d3.nest()` to group by symbol. SVG rendering employs `d3.area()` with `d3.curveBasis` for each variant, while scales and axes come from `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`. Animated transitions between layouts are driven by D3’s update pattern, though the code excerpts omit the final animation calls.

Nov 26, 2017

TP3-p3-4

This example visualizes stock market data from a CSV file as a stacked area chart, using an ordinal color scheme to distinguish between multiple time series. The chart is centered vertically so that the combined data fills the plot area, with a legend placed to the right. It uses d3.area with a basis curve, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal, all rendered as SVG paths. The data is first parsed with d3.dsvFormat, nested by symbol with d3.nest, and then processed to compute cumulative sums before plotting.

TP3-p3-3

This visualization displays a stacked area chart of stock prices over time, showing how each category contributes cumulatively to the total. It uses a time-scaled x-axis and a linear y-axis with gridlines, and includes a legend positioned at the right side. The code loads CSV data from a remote gist, parses dates, and nests the data by symbol. It computes the sum of other categories for each point to create the stacked effect, then renders the areas using `d3.area` with a basis curve, filling each series with a categorical color from `d3.schemeCategory10`.

TP3-p3-1

This visualization displays multiple time-series lines as filled areas, each representing a stock symbol over time, with overlapping semi-transparent regions stacked by date. It uses D3 v4 to fetch CSV data from an external gist, parse dates with `d3.timeParse`, and nest records by symbol. The chart draws smooth areas via `d3.area` with a basis curve, maps dates to an ordinal time scale, and values to a linear scale, including axes and a color-coded legend with opacity. A custom calculation sets each point’s lower price based on the maximum lower value among other symbols.

TP3-p3-2

This visualization displays a multi-series area chart showing stock price trends over time, with each series rendered as a filled area using a categorical color palette. The example uses D3 v4 with the `d3.area()` API, `d3.curveBasis` for smoothing, and `d3.scaleTime` and `d3.scaleLinear` for axes. Data is loaded from an external CSV file via `d3.text`, parsed with `d3.dsvFormat`, and grouped by symbol using `d3.nest()`. A legend showing series names is positioned on the right, with axes rendered using `d3.axisBottom` and `d3.axisLeft`.

TP3-p1

This chart displays multiple time series as an SVG line chart, with a legend identifying each series. It loads historical stock data from a remote CSV file, parses and nests it by symbol, and renders the lines with distinct colors. The code uses D3 v4 APIs including `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `d3.curveBasis`, `d3.axisBottom`, and `d3.axisLeft`, along with `d3.nest()` to group data, and applies a category color scheme via `d3.scaleOrdinal` and `d3.schemeCategory10`.

Nov 23, 2017

loading multiple stock data from dataset

The visualization displays monthly closing prices for multiple technology stocks—Microsoft, Amazon, and IBM—as a set of overlaid line charts, with each stock distinguished by a unique color and identified by a legend. It encodes the data from a CSV file containing symbol, date, and price fields, parsed using `d3.dsvFormat`. The code leverages d3.v4's syntax, including `d3.nest` to group by symbol, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with `d3.curveBasis` for smooth paths. A color scale via `d3.scaleOrdinal` applies the categorical palette, while axes are rendered with `d3.axisBottom` and `d3.axisLeft`.

Nov 23, 2017

simple line chart from dataset

This example displays a simple line chart of seven data points, each with a name, value, and date. The chart shows the trend of values over time from January to July 2016, with a line connecting the points and a label for the final value. It is rendered as an SVG using D3 v4, employing `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` for the path. The data is loaded from a local JSON file. Interactive tooltips appear on mouseover, using D3 selections to highlight the point and display its value.

fresh block

This example displays a static SVG canvas containing a single monospace text message that prompts the viewer to edit the code. A d3-selected SVG element is appended to the body, with width and height attributes set to 960 and 500 pixels. A text element is then added via `d3.append`, positioned at coordinates (120, 200) and styled with a font size of 36 and a monospace font family. The visualization simply renders the instruction in the browser using d3.v4’s selection and attribute methods.

fresh block

This example displays a static SVG scene with the text prompt "Edit the code below to toto me!" centered in monospace on a blank canvas. The code uses D3 v4 to select the body element, append an SVG container sized at 960 by 500 pixels, and add a single text element with specified x, y coordinates, font size, and family. The visualization serves as a minimal starting point for editing, with no dynamic data or interactions. It demonstrates basic D3 selections and SVG attribute manipulation.

fresh block

This example displays a single static text message in an SVG canvas. The text, "Edit the code below to squanch me!", is rendered in a monospace font and positioned near the center of the 960-by-500 pixel viewport. The code uses D3 v4’s `d3.select` and `d3.append` methods to create the SVG element and the text node. The visualization serves as a minimal starting template, likely intended for users to replace with their own custom D3 code.

D3 bar chart without data-binding

This example displays a simple bar chart of ten numeric values, with each bar labeled by its corresponding data point. The chart is rendered entirely as SVG elements, and the bars react to mouseover events by turning yellow. The code uses D3 v4 to select the body element and append an SVG canvas, then applies a linear scale to map the data values to bar heights. Each rectangle and text label is created through D3's selection and append methods, with positions calculated from the array index.