StephenMaturrin

@StephenMaturrin·14 public vizzes

TP4

This visualization shows the reported cases of influenza across French regions for 2014, with each region colored according to its total annual case count. A tooltip displays the region name and total cases on hover. The map is rendered using D3 v4's `d3.geoPath` with a `d3.geoConicConformal` projection, and region colors are mapped using `d3.scaleQuantize`. Data is loaded from a CSV file and joined to a GeoJSON file of French regions, with the total case count summed from the `somme2014` column.

Dec 9, 2017

Loading thumbnail…

TP4

A choropleth map of France colors each region according to the total reported influenza cases in 2014, drawn from a CSV dataset of weekly regional counts. The map projects French regions using `d3.geoConicConformal` and renders them with `d3.geoPath`, while a `d3.scaleQuantize` maps the summed annual values to a five-color green scale. Regions lacking matching data appear gray, with the color domain fixed between 0 and 3000 cases.

Nov 30, 2017

Loading thumbnail…

P6

A small-multiple chart displays monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, with each series drawn as a separate line plot. The visualization animates the lines drawing sequentially, then transforms each chart into a horizon graph that encodes the data using layered, color-filled areas. Built with D3 v3, the code uses `d3.svg.line`, `d3.svg.area`, `d3.time.scale`, and `d3.timer` to drive the animation, and `transition` to morph the display. The color of each symbol is assigned via a categorical scale.

Nov 29, 2017

Loading thumbnail…

P4

The visualization animates the stock prices of Microsoft, Amazon, and IBM from 2000 to 2010, first drawing line charts that sequentially reveal price movements over time, then transforming each chart into a series of stacked horizon areas. The animation uses `d3.timer` to progressively draw the lines, followed by `transition` to shift the line charts into layered horizon plots with varying fill opacities. The code relies on `d3.svg.line`, `d3.svg.area`, `d3.csv`, and `d3.nest` to parse and structure the dataset, while `d3.time.scale` and `d3.scale.linear` handle the axes.

Nov 29, 2017

Loading thumbnail…

P3

This interactive visualization animates the monthly stock prices of Microsoft, Amazon, and IBM from January 2000 to March 2010. It first draws each company's price line sequentially, then transforms the view into a horizon chart with stacked, colored areas. The SVG output uses `d3.svg.line`, `d3.svg.area`, and `d3.time.scale` to plot the data, with `d3.timer` controlling the animation and `d3.select` managing transitions between the two chart states.

Nov 29, 2017

Loading thumbnail…

P3

This example animates monthly stock prices for Microsoft, Amazon, and IBM, initially drawing lines by progressively revealing data points, then transitioning into filled area charts. The visualization uses the D3.js v3 library with SVG rendering, employing the `d3.svg.line` and `d3.svg.area` generators for line and area paths, and `d3.time.scale` and `d3.scale.linear` for axes. The animation leverages `d3.timer` to incrementally update the line, followed by clipping and transitions that convert the lines into stacked horizon charts.

Nov 29, 2017

Loading thumbnail…

P2

This example animates the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. It first draws each symbol’s price as a separate line chart, then morphs the lines into horizon charts by stacking and clipping translucent area fills. The code uses D3 v3 with SVG, `d3.svg.line` and `d3.svg.area` for geometry, and `d3.timer` for the animation. The dataset is loaded from a local CSV via `d3.csv`. Each symbol’s line and circle are repositioned frame-by-frame, then transitions shift the glyphs to the right edge while revealing the horizon bands.

Nov 29, 2017

Loading thumbnail…

P1

A stock chart demonstrates daily Microsoft price data with animated lines and labeled circles for each symbol. The visualization begins by drawing a line chart, then transitions into a horizon chart with layered, color-coded areas. Built with d3.v3, it uses d3.svg.line, d3.svg.area, and d3.nest to group data, with d3.timer driving the animation and SVG transitions handling the morphing effect.

Nov 29, 2017

Loading thumbnail…

P3

This visualization animates monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, first drawing each company’s price line in sequence, then transforming the chart into a horizon graph. The horizon technique uses stacked, clipped area bands with a color scale to compact multiple price ranges into a small vertical space. The code uses D3 v3 for SVG rendering, `d3.svg.line`, `d3.svg.area`, `d3.nest`, and `d3.timer` to drive the two-stage animation, with data loaded from a CSV file.

Nov 29, 2017

Loading thumbnail…

loading multiple stock data from dataset

This visualization displays the monthly closing stock prices for multiple companies from a local CSV dataset. The line chart plots the price trends over time for each company symbol, allowing for easy comparison of their performance and volatility. The code uses D3 v4 APIs such as `d3.timeParse`, `d3.dsvFormat`, `d3.nest`, `d3.line`, and `d3.axisBottom` to parse, group, and render the data as an SVG path for each symbol, with a color legend for identification.

Nov 23, 2017

Loading thumbnail…

TP1

Seven months of monthly values for items A through G appear as a red-dashed vertical bar chart, with a black polyline connecting each value point. The chart is built with D3 v4, using `d3.scaleTime` for the date axis and `d3.scaleLinear` for the value axis, and rendered as SVG. Each circle marks a data point and, when hovered, highlights its corresponding dashed line and value label via `d3.selectAll` filtering and mouse events. Labels show abbreviated month names and raw values from the JSON dataset.

Nov 15, 2017

Loading thumbnail…

D3 bar chart without data-binding

This example displays a time-series line chart with circular markers and value labels, rendered as an SVG. It plots a dataset loaded from `dataset.json` through `d3.json`, with dates parsed using `d3.timeParse` and formatted via `d3.timeFormat`. The chart uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, while `d3.line` generates the path. The code appends circles, text labels, and the final value using `d3.select` and `append` methods.

Nov 10, 2017

Loading thumbnail…

simple bar chat dataset

A simple bar chart displays ten categorical values from a semicolon-delimited CSV file. The SVG rendering uses D3 v4 scales, with a linear x-scale mapping index positions and a linear y-scale for value heights. Bars are drawn as empty rectangles with black strokes, while monospace text labels appear above the bars. The data is loaded asynchronously via `d3.text` and parsed with `d3.dsvFormat` before the domain is set.

Nov 9, 2017

Loading thumbnail…

simple line chart without dataset

This example shows a nearly empty SVG canvas with a single text element reading “Edit f” positioned through a transform. The code initializes an 960×500 SVG using d3.select and appends text with a translate transformation, but the main dataset and bar chart logic are commented out, leaving only the text rendering active. Built with D3 v4, the visualization demonstrates a minimal, incomplete line chart scaffold where the data-driven rendering is disabled.

Nov 9, 2017