Skip to main content
SimilarExport ZIP
100%

Funnel Chart with rCharts and Highcharts

✓ Published0🌍 Public
AAdlopez2016
Last edited Nov 9, 2016
Created on Nov 9, 2016

This funnel chart visualizes a five-stage conversion process, from visits to finalized deals, using a decreasing sequence of colored bands to represent the value drop-off at each step. Built with the R package rCharts and the Highcharts JavaScript library, the example constructs the chart by converting a simple R data frame into the required JSON array format via the `toJSONArray2` helper. The `Highcharts` object is configured with a `funnel` chart type, and the custom `funnel.js` module is loaded to enable the specific geometry, while the data itself is hardcoded in the R script. The resulting interactive graphic is rendered directly into an HTML page.

AI-generated description

forked from <a href='http://bl.ocks.org/ramnathv/'>ramnathv</a>'s block: <a href='http://bl.ocks.org/ramnathv/6895452'>Funnel Chart with rCharts and Highcharts</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Fork of Bar chart with D3.js

This fork of a D3.js bar chart visualizes funnel volumes across seven stages of a student admissions process, from inquiries to matriculants, based on data from Stack Overflow, 2019. The chart uses `d3.scaleLinear` for the y-axis, `d3.scaleBand` for the categorical x-axis, and `d3.axisLeft`/`d3.axisBottom` to render axes and gridlines. Hovering over a bar triggers an animated `transition` that highlights the bar, draws a dashed limit line, and displays the percentage divergence between each bar’s value and the hovered bar’s value.

Kkatebacon32
63% match
Loading thumbnail…

Sequence explorer - single chart (with JSON file)

This example demonstrates a single-chart sequence explorer visualization built with D3 v4, loaded from an external JSON file. The chart visualizes sequential event flows, with events ordered along the y-axis using the `eventOrder` method (home, product, search, account, other) and the x-axis labeled as "visit" via the `sequenceName` setting. The JSON data defines a directed graph of transitions between events, with values representing the volume of each step. The visualization is instantiated by calling `sequenceExplorer.chart("sequence1.json")` and rendered into a div in the body. This approach highlights the sequence explorer's ability to depict multi-step event pathways, similar to a sunburst but in a linear, flow-based layout, making it easy to compare pros and cons against alternative visualization methods for the same dataset. The data is derived from Kerry Rodden's sunburst example, and the chart is configured to reorder event categories on the y-axis and customize tooltip labels. The single chart version keeps all event sequences in one view, useful for tracking navigation flows or funnel analysis.This example demonstrates how to create a **single-chart sequence explorer** using D3 v4 and data loaded from an external JSON file. The chart visualizes sequential categorical data—here, sequences of website events such as "home", "product", "search", and "account"—as a Sankey-style flow diagram. Each row represents a step in the sequence, and the width of the links corresponds to the number of visits, making it easy to identify common paths and drop-off points. The code shows how to initialize the chart with a JSON file, customize the event order on the y-axis, and rename the x-axis for tooltips. The data is derived from Kerry Rodden’s sunburst example, allowing for a direct comparison between the two visualization approaches for the same dataset.

EEE2dev
60% match
Loading thumbnail…

Chandrakant Bharatkumar Thakkar

This example visualizes a multi-step process flow as a sequence of connected, color-coded circles arranged on a rectangular canvas. It shows nine distinct process stages, such as “Tech Spec Creation” and “Vendor Onboarding,” organized in a serpentine layout across multiple horizontal sections. The visualization uses D3.js v4 to generate SVG elements, with a custom `d3.arc` for curved connection paths and `d3.line` with a natural curve for the connectors between nodes. Each circle’s fill color reflects its phase (e.g., green, red, gray), and the layout adapts based on the number of process items, placing three activities per line. The chart renders in an HTML page with inline CSS for positioning and includes a Stack Overflow flair image as an external link.

CChandrakantThakkarDigiCorp
57% match
Loading thumbnail…

Funnel Points

This example displays the top 10 most populous countries as horizontal bars, with each bar’s length proportional to its student count. The chart uses React for component structure and d3.scaleBand and d3.scaleLinear for positioning, while d3.csv loads data from a GitHub gist. Axes are rendered as SVG elements with tick labels, and the bars include tooltips via SVG <title> tags.

Kkatebacon32
57% match
Loading thumbnail…

Linechart Version 5

This interactive visualization lets users explore temperature data over time through either a line chart or an area chart, with dropdown menus to select axes and a grouping variable that triggers a color legend. The charts are rendered as SVG with D3 v5, using scales like `scaleTime` and `scaleLinear`, axes from `axisBottom` and `axisLeft`, and a tooltip that updates on mouse movement. A slider adjusts point opacity, a number input changes line width, and a button toggles between chart types.

SSchmittYannic
57% match
Loading thumbnail…

LAB5FINAL

This interactive visualization displays grouped bar charts comparing profit and revenue across seven months, with each month split into colored bars representing revenue categories. Users can drag the top of any bar vertically to modify its value, which immediately updates the displayed profit number and bar height. Built with D3 v5, the example uses `scaleBand`, `scaleOrdinal`, and `scaleLinear` to position and color the bars, while `d3.drag()` handles the interactive manipulation. A color legend, generated by a custom `colorLegend` function, identifies the revenue series, and data comes from a local JSON file rendered as SVG with smooth transitions.

Llimeroc
56% match
Loading thumbnail…

Sequences sunburst

This sunburst chart visualizes hierarchical sequence data as an interactive radial layout, with each ring segment representing a step in a user journey. Built with D3 v4, it uses a partition layout and arcs sized by value. Hovering over any segment fades all non-ancestor paths and displays a breadcrumb trail above the chart, showing the sequence of steps leading to the hovered node along with the percentage of visits that follow that path. The visualization also includes a toggleable legend and a centered explanation text that updates dynamically. The data is loaded from a CSV file and converted into a hierarchical JSON structure for rendering. Animated transitions are not used; instead, interaction is driven by mouseover and mouseleave events. The example is adapted from Kerry Rodden's block and licensed under Apache 2.0.

EEE2dev
56% match
Loading thumbnail…

[04] Animated bar chart - Using React Hooks with D3

This example shows an interactive animated bar chart where users can increment, decrement, filter, or append values to a dataset, with bars flipping vertically and transitioning smoothly to new heights. Built with React Hooks and D3 v5, it uses `scaleBand` for the categorical x-axis, `scaleLinear` for y and color interpolation, and `selection.transition()` to animate bar heights and fill colors based on a clamped color scale. The SVG rendering uses `transform: scale(1, -1)` to flip bars, with axes positioned via `axisBottom` and `axisRight`.

Ggjonor
56% match