Skip to main content
100%

etape3

✓ Published0🌍 Public
Aanojoual
Last edited Nov 29, 2017
Created on Nov 29, 2017

The visualization displays monthly stock prices for Microsoft from 2000 to 2004 as a small-multiple bar chart, with each row representing a different group. The chart uses a stacked layout where bars are positioned along a time axis, with the height of each bar encoding the stock price. Groups are labeled on the left, and the visualization includes an animated transition triggered after a delay, stacking the bars by shifting their y-positions according to their value offsets. The chart uses D3 v3 with SVG rendering, an ordinal x-scale for dates, a linear y-scale for prices, and a color scale for group identification. A radio button for "Stacked" mode is included but appears to have no functional effect. The visualization is built with Blockbuilder.org and released under the MIT license.This example, titled "etape3", demonstrates a stacked bar chart visualization of stock price data using D3.js v3. It displays monthly closing prices for multiple stock symbols (e.g., MSFT) from January 2000 through February 2004, organized into groups. The chart uses an ordinal x-axis for dates, a linear y-axis for prices, and a color-coded category scale to distinguish groups. A radio button for "Stacked" mode is included, though it appears inert. The visualization features a stacked layout where each group is represented as a horizontal band, with individual price values shown as colored bars. Animated transitions are implemented to smoothly reposition elements, and the chart includes axes with group labels. The design is minimal and clean, with the rendered output using SVG and animation for interactive presentation.This visualization, titled "etape3", displays stock price data over time using a stacked bar chart layout. It groups stock symbols (such as MSFT) into categories and visualizes monthly prices from 2000 to 2004 using colored rectangles arranged in horizontal bands. The chart includes labeled axes for dates and price scales, with each group labeled and color-coded. A stacked mode is implemented, where bars are layered with an animation transition, and the view is built with D3.js v3 using SVG rendering. The layout is clean and minimal, with a focus on comparing price changes across groups and time periods. Source: gist by anojoual, MIT license. Built with Blockbuilder.org.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Travail : Stacked bar chart v4

This stacked bar chart, built with D3 v4, visualizes monthly closing prices for a single stock symbol (MSFT) over time, with each bar segmented by category. The visualization uses an SVG canvas and loads its data from a CSV file containing 216 monthly price observations spanning January 2000 through December 2008. The chart employs a linear y-scale and a band x-scale with 10 evenly spaced groups, while a categorical ordinal color scale assigns distinct colors to up to seven stacked series. The data is processed using d3.nest() to structure the records by symbol, then passed to d3.stack() to compute the cumulative y-positions for each bar segment. Although the code is written generically for multiple series and symbols, the included data contains only one symbol (MSFT), so the resulting chart displays stacked bars representing monthly price values, with the x-axis representing time samples and the y-axis representing the accumulated stock price. The visualization uses a muted color palette and SVG rendering, with axes that omit the domain line for a cleaner look.

4456lumen
88% match
Loading thumbnail…

Travail : Stacked bar chart v4

This stacked bar chart visualizes stock price data for Microsoft (MSFT) from January 2000 to December 2008, using D3 v4 to render an SVG. The x-axis uses a band scale to position 10 bar groups, while a linear y-axis maps the cumulative price ranges. Each bar is segmented into 5 stacked series, colored via an ordinal scale with a muted palette. The chart reads the `stocks.csv` dataset, nests records by symbol, and applies d3.stack to compute the stacking. Axes and bars are drawn without a visible domain line, giving the chart a cleaner appearance.

4456lumen
87% match
Loading thumbnail…

etape4

This visualization is a streamgraph showing monthly stock price changes for Microsoft (MSFT) from January 2000 to December 2007. The data is loaded from a CSV file and processed with D3's stack layout using a "silhouette" offset, creating a symmetric area chart. The single series is rendered as a smooth cardinal-interpolated area path, colored with a blue sequential palette. The chart includes a time-based x-axis with yearly ticks and a y-axis on the right, displaying the stock price range. The visualization uses an SVG rendering with D3 v2, and the area chart is styled with a white background and minimal axis lines.

Aanojoual
87% match
Loading thumbnail…

Stocks transition_1

This visualization attempts to display stock prices over time using D3 v4, with data from a CSV file containing monthly price records for Microsoft (MSFT). The code sets up scales for years and stock symbols, and prepares nested data structures to compute mean prices by year and by symbol. Although the visualization is incomplete—the main rendering logic is commented out—the intended design appears to be a grouped bar chart comparing average stock prices across years and symbols. The visualization uses an ordinal color scale with a palette of purple, blue, orange, and related hues, and an SVG canvas of 960 by 500 pixels. The title "Stocks transition_1" suggests it may have been an early experiment in transitioning between different data views. The code includes commented-out sections for stacked bar layouts, indicating the author was exploring multiple chart types. The current version loads stock price data from a CSV file, parses dates into years, and prepares nested data structures for both year-then-symbol and symbol-then-year groupings, though the final rendering logic is incomplete.

Aadurivault
86% match
Loading thumbnail…

etape3

This example shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 as animated, stacked area charts. Each symbol is rendered in its own horizontal band, with a dark line tracing the price over time. The code uses d3.csv to load data, d3.nest to group by symbol, and d3.svg.area and d3.svg.line with basis interpolation to draw the shapes. A d3.timer drives the sequential reveal of data points, while d3.layout.stack computes the stacked offsets.

NNaamaNaa
85% match
Loading thumbnail…

Stocks - Grouped to stacked bars

This example visualizes monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, allowing users to toggle between grouped and stacked bar charts. The grouped view shows each company’s price side-by-side, while the stacked view displays cumulative prices per month. Built with D3 v4, the visualization uses SVG for rendering and transitions to animate between the two modes. Data is loaded from a CSV file, processed with `d3.nest`, and mapped with `d3.scaleBand` and `d3.stack` to generate the bars.

JJboulery
85% match
Loading thumbnail…

etape5

This interactive visualization animates the monthly stock prices of multiple companies, letting users toggle between three display modes—multiples, stacked, and stream—via radio buttons. Using D3 v3 with SVG, the chart renders price-over-time series for each symbol as colored areas. In the initial "multiples" view, each group is shown in its own small-multiple band with a shared ordinal time axis. Clicking "stacked" vertically offsets the series using a stack layout, and selecting "stream" centers them around a baseline for a streamgraph effect. The transitions between modes are animated, smoothly updating the y-positions of the areas and their group labels.

Aanojoual
84% match
Loading thumbnail…

Tp3_DV_Rendu5

This visualization compares the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010, showing both individual time series and a stacked area chart. The animation transitions through three views: individual line charts, horizon-style areas for each symbol, and finally a stacked layout. The code uses D3 v3 with SVG rendering, employing d3.svg.line, d3.svg.area, and d3.layout.stack for the layouts, while d3.time.scale handles the date axis. Data comes from a CSV file grouped by stock symbol via d3.nest.

AAminaSGitHub
84% match