Skip to main content
SimilarExport ZIP
100%

Quantiles Chart

✓ Published0🌍 Public
CCSmileska
Last edited Jun 2, 2018
Created on Jun 2, 2018

A quantile chart visualizes the distribution of a single category, "Residential," by displaying its quantile values as stacked horizontal bars. The chart overlays upward- and downward-pointing triangles and diamonds to mark additional summary statistics, such as minimum, maximum, and effective values, using distinct red and green colors. The visualization is built with D3 v4, using SVG rendering and scales like `d3.scaleBand` and `d3.scaleLinear` to position the elements. Data is hardcoded in the script, and the axes are styled with custom tick formatting and gridlines.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Stacked Density and Quantile Graphs

Two paired charts compare product groups: a stacked density graph on the left and its derived quantile graph on the right, where the density is divided into equal-area segments resized to equal width. This reveals which segments contribute more to the tail than to the middle, a distinction harder to see in the density view. Hovering a legend item filters the display to a single segment. The visualization is built with d3.v3 APIs including `d3.svg.area`, `d3.layout.stack`, and `d3.scale.linear`, rendering to SVG with animation, using data from the provided `data.js` file.

NNPashaP
75% match
Loading thumbnail…

Q2

A horizontal stacked bar chart displays age-group categories (0–10 through 41–50) in a CSV, with each bar divided into four colored segments representing Category1 through Category4. The chart uses D3 v7’s `scaleBand` for vertical positioning, `scaleLinear` for the value axis, and `stack()` to compute segment offsets, with `axisBottom` and `axisLeft` for axes. SVG rectangles render each segment, and mouseover events show tooltip values via `d3.select`. A legend identifies the four category colors.

Ssindhuja27b@gmail.com
71% match
Loading thumbnail…

D3 scales() scaleQuantile() in action

This example demonstrates how D3’s `scaleQuantile()` maps a numeric dataset to a categorical color scale, while `scaleLinear()` positions the data points horizontally. Fifteen circles are rendered in an SVG, each colored lightblue, orange, or lightgreen based on its quantile bucket. The visualization uses `d3.scaleLinear()` and `d3.scaleQuantile()` to transform the data array, and `d3.select("#wrapper").join()` to bind values to circle attributes. The source data is a hardcoded array of numbers, and the rendering is SVG-based.

SSubhendu Karmakar
70% match
Loading thumbnail…

Act6_Qu2

Act6_Qu2 visualizes how sales performance categories (Electronics, Clothing, Home Decor, Books, Toys, Groceries) distribute across five percentage bands, from “Below 100” to “Above 5000.” Each stacked bar shows the proportion of sales falling into each band, with the total normalized to 100%. Built with d3.v7, it uses `d3.stack` to generate the layered series and `d3.scaleOrdinal` for color mapping. Hovering over a segment highlights it and displays the exact percentage via a tooltip. The SVG chart includes labeled axes and a legend derived from the provided CSV data.

Nnumitha
69% match
Loading thumbnail…

first boxplot

This example demonstrates a classic boxplot visualization of a numeric dataset, highlighting the median, interquartile range, whiskers, and any potential outliers. The chart computes the five-number summary using `d3.quantile` and draws the box, median line, and whiskers as SVG shapes, with circles marking values beyond 1.5 times the interquartile range. The y-axis is rendered with `d3.axisLeft`, and the scaling is handled by `d3.scaleLinear`. The dataset is hardcoded in the script, and the entire visualization is built with React and D3 v5, outputting to SVG.

SSchmittYannic
69% match
Loading thumbnail…

Quantile Choropleth

This choropleth map shows 2023 median home prices across New York State counties, colored with a quantile scale divided into five classes using `d3.scaleQuantile` and `d3.schemeBlues`. County polygons are rendered with `d3.geoPath` and a Mercator projection fitted to the state, with tooltips revealing median prices and sales counts. The visualization loads TopoJSON geography and CSV housing data, and includes a legend displaying threshold values. It uses D3 v7 for all data binding, map rendering, and interaction.

CCurran Kelleher
68% match
Loading thumbnail…

vertical boxplot

This example shows a vertical boxplot for each day in a small dataset, displaying the minimum, maximum, median, and quartile values as distinct graphical elements. The chart uses a green color scheme with rounded rectangles for the interquartile range, thin lines for the range, and white circles for the median. The visualization is built with D3.js (version 3.5.5) using an SVG rendering, with scales for the x-axis (day) and y-axis (values from -2 to 2). The data is loaded from an external CSV file, and the code defines custom scales, axes, and shapes to construct the plot.

AA6Brgeuka
68% match
Loading thumbnail…

Large number of points

A scatterplot displays 50,000 generated points, with color and radius encoding each point’s position in the lower, core, or upper quartile range. Built with D3 v4, the visualization uses SVG circles and an animated transition to update the points when the user edits the quantile, color, or radius values. The x-axis maps the point index, while the y-axis shows the generated normal distribution values, with scales recalculated via the `d3.scaleLinear` and `d3.quantile` APIs.

CCJKraenzle
68% match