Skip to main content
SimilarExport ZIP
100%

Marimekko Chart

✓ Published0🌍 Public
Mmbostock
Last edited Feb 26, 2019
Created on Jun 2, 2011

This Marimekko chart visualizes product sales across US markets, using a mosaic layout where each column represents a market segment with width proportional to total sales and stacked rectangles showing market-specific values. The visualization employs D3's linear scales for x and y axes, with color encoding via the category10 palette. Data is loaded from a JSON file and processed through D3's nest and reduce functions to calculate segment offsets and proportional dimensions, while SVG rects are rendered with crisp edges for precise boundaries.

AI-generated description

A Marimekko Chart, inspired by Freakalytics. Thanks to Noah Iliinsky for the suggestion. Jason Davies has published an even-simpler interactive implementation using the “slice-dice” treemap layout algorithm!

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Stack Chart Template

This stacked bar chart compares sales across consumer, corporate, and home office segments for multiple sub-categories. It uses D3.js (v3) with an SVG renderer and animated transitions to toggle between absolute counts and percentage-share views via a form input. Data is loaded from a CSV file and sorted by category, with segments color-coded using a categorical scale. The chart includes a legend and tooltip, and the axes update dynamically during transitions.

Aaruba-haroon
68% match
Loading thumbnail…

Visualization 1 (Stacked Bars)

This interactive stacked bar chart compares sales across market segments and product sub-categories, with each bar segmented by sub-category and colored by segment. The visualization uses D3.js version 3.5.5 with the SVG rendering and animation APIs, featuring hover tooltips via d3-tip and a color legend that filters foreground bars when hovered. Data is loaded from CSV files showing sales figures for Consumer, Corporate, and Home Office segments across seventeen sub-categories, displayed with formatted axis labels and a custom SI tick formatter using the `d3.format` API.

Ssndcaldgafz
68% match
Loading thumbnail…

ice7 part4

This interactive area chart visualizes monthly sales data for a product category, with a gradient-filled area beneath a smoothed line and circular markers for each data point. Hovering over a point reveals a tooltip displaying the month and sales value. Built with D3.js v7, it uses `d3.area` and `d3.line` generators with `d3.scaleBand` and `d3.scaleLinear` for axes, rendered as SVG. The code defines a linear gradient via `linearGradient` and attaches mouseover/mouseout handlers for interactivity.

Jjammigumpula.priyanka193@gmail.com
67% match
Loading thumbnail…

Line Chart for sales

This line chart visualizes total sales across product categories, with the y-axis representing sales figures and the x-axis categorizing products. The chart uses D3.js v7, loading CSV data from a GitHub gist. The code converts string sales values to numbers, defines an SVG canvas, and constructs scales with `d3.scaleBand` and `d3.scaleLinear`. It renders axes via `d3.axisBottom` and `d3.axisLeft`, and draws the line using D3's `d3.line` generator, styled with a steelblue stroke. The SVG output includes labels for both axes.

Ssreeramyamini@gmail.com
67% match
Loading thumbnail…

Area chart for electronic sales

This area chart displays total sales across product categories, using a steel-blue filled region beneath a line to emphasize the magnitude of sales for each category. The visualization is built with D3.js v7 and rendered as an SVG. It loads CSV data via `d3.csv`, converts the sales strings to numbers, and uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The area and line paths are drawn with `d3.area` and `d3.line`, respectively, and axes are labeled using `d3.axisBottom` and `d3.axisLeft`.

Ssreeramyamini@gmail.com
67% match
Loading thumbnail…

area chart

This area chart displays yearly sales data loaded from an external CSV file, with the x-axis representing years and the y-axis representing sales figures. Using D3 v7, the visualization generates an SVG area path filled in steel blue, with axes and labels for both dimensions. The code employs `d3.area()` to create the filled region, `d3.scaleLinear()` for both scales, and `d3.axisBottom` and `d3.axisLeft` to render the axes, all appended to a single SVG element sized at 800 by 400 pixels.

Rr79162810@gmail.com
67% match
Loading thumbnail…

Line chart for electronic sales

This line chart visualizes total sales across product categories, using a filled area beneath a steel-blue line to emphasize the trend. Built with D3 v7 and rendered as an SVG, the chart loads CSV data from a GitHub gist and converts sales values from currency strings to numbers. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` and `d3.area` to generate the paths.

Ssreeramyamini@gmail.com
67% match
Loading thumbnail…

Marign Convention

A horizontal bar chart displays population estimates for the ten most populous countries, using data from the UN Population 2019 dataset loaded via D3’s `csv` utility. React manages the component state and renders SVG elements, while D3’s `scaleBand` positions the categorical y-axis and `scaleLinear` maps population values to bar widths. Axis ticks are generated with `xScale.ticks()` and rendered as SVG lines with yellow strokes, and country labels appear along the y-axis. The visualization uses fixed margins and an inner chart area of 960 by 500 pixels.

Jjth500
66% match