C

ChandrakantThakkarDigiCorp

@ChandrakantThakkarDigiCorp·33 public vizzes

Loading thumbnail…

Bollinger Bands Charts in d3

This example displays a Bollinger Bands chart for time-series data, plotting a central value line alongside upper and lower range boundaries. The visualization uses D3.js within a React framework, rendering SVG elements with animation support. Data appears to be daily measurements over a period of months, with the chart focusing on the relationship between the central value and its expanding/contracting bands. The implementation selects an SVG element, sets dimensions and margins, and maps the date and value pairs from the provided dataset. The D3 library v6.7.0 is used to construct the chart elements.

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.

Loading thumbnail…

Chandrakant Bharatkumar Thakkar

This example displays a randomized scatterplot of orange circles layered over several smoothly curved lines, each line representing a set of data points mapped across six month labels from January to June. The visualization uses D3.js v4 to generate SVG elements, with scales for positioning and axes for reference. It also includes an interactive reset button that triggers animated transitions, moving all circles to new random positions over one second.

Loading thumbnail…

Chandrakant Bharatkumar Thakkar

A self-updating scatterplot-style chart plots five monotone-smoothed line series of random values against six categorical month labels on shared axes, with twenty randomly placed circles scattered across the same coordinate space. Every second, the animation regenerates all random y-values for every line and repositions every circle, using jQuery to trigger the updates and D3’s transition system to animate the changes smoothly. The SVG rendering uses D3’s scalePoint, scaleLinear, axisBottom, and axisLeft for the axes.

Loading thumbnail…

Chandrakant Bharatkumar Thakkar

A multi-line chart tracks daily total COVID-19 cases for Delhi, Mumbai, and Ahmedabad across April 2020. A draggable jQuery UI slider filters the time range, with a translucent overlay highlighting the selected portion of the axis. D3 v4 scales and axes render the SVG line series and tick labels, while the helper `getTicksCalculation` generates custom date ticks for the slider.

Loading thumbnail…

Chandrakant Bharatkumar Thakkar

This example shows a stacked bar chart of daily values over two weeks in March 2020, with annotations on select bars and an interactive tooltip revealing current and past values. Rendered as SVG, it uses d3.v4’s `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and the `d3.stack` API with `stackOffsetDiverging` to layer the two value series. A custom axis function adds data-tip labels, while hover interactions trigger a jQuery-based tooltip. The data is embedded in `constant.js`.

Loading thumbnail…

Chandrakant Bharatkumar Thakkar

This example shows a stacked bar chart comparing current and historical values over time, with data tips that appear on hover to reveal percentage changes. Built with D3 v4, the visualization uses SVG rendering and animation to display a diverging stack of two series (`value` and `pastValue`) across daily ticks. The chart calculates axis ranges and tick intervals through custom helper functions, while jQuery is used for tooltip positioning and interaction. The data source is a hardcoded JavaScript array containing daily values with optional annotations, rendered as a cumulative trend with a custom legend and axis styling.

Loading thumbnail…

Vertical Area Chart D3 V4

This example shows a vertical area chart comparing the cumulative runs scored by two teams across 20 overs, using a filled area for Team A and a line for Team B. It renders to SVG with D3 v4 and jQuery, using `d3.scaleLinear` for both axes, `d3.area()` for the filled region, and `d3.line()` for the second series. The x-axis represents runs, the y-axis shows overs, and axes are drawn with `d3.axisBottom` and `d3.axisLeft`. Data is hardcoded in the script, with null values filtered to stop line drawing at the final over.

Loading thumbnail…

Simple Area Chart D3 V4

This example uses D3 v4 to draw a simple area chart comparing the cumulative runs of two teams across 20 overs. Data is plotted as filled areas beneath polylines on an SVG canvas, with axes for “Overs” and “Runs.” The code applies `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, then defines line and area paths using a custom `d3.area` function, while a Stack Overflow flair image appears in the corner.

Loading thumbnail…

Range Slider D3 V4

This example shows an interactive range slider built with D3 v4, where a user can brush along a band scale to select a subset of values from a fixed array of numbers 1 through 10. The visualization displays the current selection as an orange arrow and a label showing the selected range. The slider includes adjustable step size, slider size, and initial index via HTML inputs, with an "Apply" button to update the scale dynamically. The code relies on `d3.scaleBand`, `d3.brushX`, and SVG element manipulation to compute snapped positions and render the selection handle.

Loading thumbnail…

Text Path example d3 v4

This example demonstrates interactive text along a draggable path using D3 v4 and SVG. It shows how text can follow a curved path defined by a `d3.line` with a `d3.curveBasis` curve, while the path itself is editable through drag events. The initial path is a circular arc, and users can modify the text via an input field. The code uses D3’s `drag` behavior, `path.attr("d")`, and `textPath` to update both the curve and the text position dynamically.

Loading thumbnail…

Free Hand Line D3 v4

This example demonstrates freehand line drawing in an SVG canvas. The visualization begins with a pre-generated curve and prompts the user to drag the mouse anywhere to create additional paths. It uses D3 v4's drag behavior and line generator with a basis curve to smoothly interpolate the points collected during the drag. The rendered path is styled as a tomato-colored dashed stroke, and the code creates the SVG container dynamically on the page.

Loading thumbnail…

Multi-Series Line Chart Version 1.0

This multi-series line chart compares the cumulative scores of Team A and Team B across 20 overs in a cricket match, using two lines to reveal performance trends over time. The D3 v4 code renders the visualization as SVG with custom axes, tick marks, and a legend, using the `d3.scaleLinear` and `d3.scaleOrdinal` APIs for scaling and color assignment. The data comes from a hardcoded array in the script, and the chart includes a resize handler that redraws the visualization on window resize.

Loading thumbnail…

Chandrakant Bharatkumar Thakkar

A dual-stacked area chart compares planned versus actual production of computer hardware components (RAM, keyboards, monitors, etc.) across monthly intervals from June 2017 to April 2018. The visualization uses a diverging offset to separate the two datasets, with an animated legend that toggles between the series. Built with D3 v4, the chart relies on `d3.stack` and `d3.scaleBand` for grouped, offset bars, rendering interactive SVG elements that respond to user clicks. Data is embedded directly in JavaScript arrays within the page.

Loading thumbnail…

Chandrakant Bharatkumar Thakkar

This example shows planned versus actual production quantities for seven computer component types across eleven months. Two series are visualized with a D3.js chart, each using a distinct color from a custom ordinal scale. The rendered SVG is accompanied by a legend and an external Stack Overflow profile link. The data is embedded directly in the code, and the chart employs D3 v4 for time formatting and scale management, with SVG as the rendering output.

Loading thumbnail…

Chandrakant Thakkar

This visualization displays a Gantt-style timeline of process steps—cleaning, batch, and waiting—over several weeks in September and October 2017. It renders horizontal line segments as step charts, with batch processes positioned on an upper line and other types on a lower line. The code uses D3 v4 with SVG, employing `d3.scaleLinear` for the time axis and `d3.scaleOrdinal` with `schemeCategory20` for legend colors. A tooltip provides start and end dates and process type for each segment, and the chart redraws on window resize.

Loading thumbnail…

Multi-Series Line Chart With Two Y-axis

A multi-series line chart compares Product A and Product B sales over dates in September 2017, using two separate y-axes to accommodate their differing scales. The chart renders with SVG, animates on window resize, and includes a legend and tooltip. It is built with D3 v4, using `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft`, alongside jQuery for DOM manipulation. Data comes from a static JavaScript array with daily sales figures.

Loading thumbnail…

Candle Stick Chart d3 v4

This example renders a candle stick chart using D3 v4 and SVG, displaying product data with minimum, maximum, and average value ranges for each item. The chart uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, drawing semi-transparent filled rectangles to represent each product’s value span. Interactive tooltips appear on mouseover, showing details like product name and numeric values in lacks. The visualization includes a resize event handler that redraws the chart using jQuery and D3 selection methods.

Loading thumbnail…

Chandrakant Thakkar D3 Nest Examples

This example demonstrates how to use D3’s `d3.nest()` function to group a CSV dataset of project tasks by person, status, and other criteria. It shows single- and multi-level nesting, rollups that count leaves or sum numeric time values, and sorting of keys and leaf values, including a custom order for status categories. The rendered output is displayed in text areas as JSON, with a final example populating an HTML select list from the nested data. The code uses D3 v4 and loads data from a local `data.csv` file.

Loading thumbnail…

Bar Chart with D3 V4

This example presents a grouped bar chart that displays the number of runs scored per over for a single team across ten overs. The chart uses D3 v4 with an SVG rendering, dynamically creating bars whose heights correspond to the run values. It includes an automatically generated legend, interactive tooltips on mouseover, and a responsive resize handler that redraws the visualization. The bar chart leverages `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for positioning and coloring, with data provided as an array of JavaScript objects.

Loading thumbnail…

Chandrakant Bharatkumar Thakkar

This example shows a stacked diverging bar chart that visualizes monthly sales data for three product categories: Laptops, Processor, and Ram, from June 2017 through April 2018. The chart uses a horizontal layout with time on the y-axis and numeric values on the x-axis, rendered as animated SVG rectangles. It builds the chart with d3.stack() using the stackOffsetDiverging offset, and employs d3.scaleOrdinal with d3.schemeCategory10 for categorical coloring. A custom legend is generated dynamically above the chart using jQuery, and the data is loaded from a hardcoded array within the script.

Loading thumbnail…

Chandrakant Bharatkumar Thakkar

This example shows monthly sales data for Laptops, Processors, and RAM as a diverging stacked bar chart, with a legend generated dynamically above the SVG. The chart uses D3 v4’s `d3.stack()` with `d3.stackOffsetDiverging` to layer the three categories across dates from June 2017 to April 2018, with the y-axis scaled to include both positive and negative stacked values. Each series is colored using `d3.scaleOrdinal` with `d3.schemeCategory10`, and the bars are rendered as SVG rectangles with an animated enter transition. The data is hardcoded in the script, and jQuery is used to inject the legend markup.

Loading thumbnail…

Grouped Horizontal Bar Chart with D3 V4

This example shows a grouped horizontal bar chart comparing two teams’ runs across ten overs, with each group’s bars colored distinctly and a legend identifying the teams. Built with D3 v4 and jQuery, it uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis, rendering SVG rectangles that update on window resize. Tooltips are attached via a custom `horBarTooltip` module to reveal exact values on hover.

Loading thumbnail…

Horizontal Bar Chart with D3 V4

A grouped horizontal bar chart displays runs scored per over for a single team, with each bar’s length mapped to the value and color from a categorical scale. Built with D3 v4, it uses `d3.scaleBand` for the y-axis grouping and `d3.scaleLinear` for the x-axis, while `d3.scaleOrdinal` assigns colors. The SVG chart animates on window resize by clearing and redrawing, with a legend generated via jQuery. Data comes from an inline array, and the rendering uses SVG rectangles.

Loading thumbnail…

Group Bar Chart D3 V4

This grouped bar chart visualizes runs scored by two teams across ten overs, with each over on the x-axis and the number of runs on the y-axis. The chart uses D3 v4’s `d3.scaleBand` for grouped positioning and `d3.scaleOrdinal` for color assignment. SVG rectangles and an axis generate the rendering, and a custom legend displays team names. The bars respond to mouseover, mouseout, and mousemove events to show tooltips, while a resize event triggers a full redraw of the chart within the designated HTML div.

Loading thumbnail…

Chandrakant Bharatkumar Thakkar

This example demonstrates D3.js axis formatting by displaying multiple y-axes side by side, each using a different tick format for the same ordinal scale. The first three axes show simple numbers, floating-point numbers with two decimals, and SI-prefix notation (e.g., "1k"), while a fourth axis switches to a time scale parsing date strings with `d3.timeParse`. The visualization uses SVG rendering with `d3.axisLeft`, `d3.scaleBand`, `d3.scaleTime`, and custom `tickFormat` functions to illustrate how data values and labels change across formats.

Loading thumbnail…

Chandrakant Bharatkumar Thakkar

The visualization demonstrates various D3.js v4 axis tick formats by displaying multiple horizontal axes stacked vertically within a single SVG chart. It shows numeric and date-based data using different formatting methods, including simple numbers, floating-point precision, SI units, and custom date formats. The chart builds several `d3.axisBottom` axes at incremental vertical positions, applying tick formats via `d3.format` and `d3.timeFormat`. Data is hardcoded in the script, with numeric values ranging from 1 to 10 and dates parsed using `d3.timeParse`. The example relies on jQuery for DOM selection and D3's scaling functions like `d3.scaleBand` and `d3.scaleTime`.

Loading thumbnail…

Partnership Chart D3 V4

This visualization presents cricket partnership data as a diverging horizontal bar chart, with each wicket showing runs scored by two players extending left and right from a central axis. The SVG chart uses D3 v4 scales including `d3.scaleLinear`, `d3.scaleBand`, and `d3.scaleOrdinal` to position bars and assign colors from a two-color range. Player names and run totals appear as text labels beside each bar segment. The example uses hardcoded sample data and supports window resizing through jQuery event listeners that redraw the chart.

Loading thumbnail…

Multi-Series Line Chart

Two teams’ cumulative run totals are tracked across twenty overs, with each team rendered as a distinct colored line. The chart uses D3.js v4 to build an SVG scene, mapping overs to the x-axis and runs to the y-axis. The data is drawn from a hardcoded array, and an animated redraw on window resize re-renders the entire visualization. A legend identifies each team, and the code leverages d3.scaleOrdinal, d3.line, and d3.axisBottom to construct the graphic.

Loading thumbnail…

Worm Chart D3 V4

This chart displays cricket match progress by plotting cumulative runs for two teams across 20 overs. It uses d3.v4 and jQuery to render an SVG multi-series line chart, with each team’s scoring trend shown in a distinct color. Animated resize handling redraws the chart, and optional legend labels identify the teams. The data includes per-over scores and wicket events, though circles for wicket markers are not enabled in the current configuration.

Loading thumbnail…

Donult Chart D3 V4

This donut chart visualizes the distribution of a "beautiful ratio" metric across five cities, with each arc segment sized proportionally and colored by city. The chart is built with D3 v4, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths with rounded corners and an inner radius. Hovering over a segment triggers a temporary opacity change and displays a tooltip showing the exact percentage, computed from the arc’s start and end angles. The visualization also includes a window-resize handler that redraws the chart after a 500ms delay.

Loading thumbnail…

Pie Chart D3 V4

This example shows a pie chart using D3 v4 to visualize the distribution of a “beautifulRatio” value across several cities. Hovering over a slice highlights it and displays a tooltip with the city’s percentage. The chart is rendered as SVG and includes a corner radius on the arcs, with colors assigned via a ordinal scale. It uses `d3.pie`, `d3.arc`, and jQuery for resizing, recalculating the chart on window resize.

Loading thumbnail…

Manhattan Chart D3 V4

This example shows a grouped bar chart comparing runs scored by two teams across 20 overs in a cricket match, with each bar colored by team and animated tooltips revealing detailed commentary on wickets and player performance. The visualization is built with D3 v4, using `d3.scaleBand` and `d3.scaleOrdinal` for layout and color, while a custom `barTooltip` handles mouseover events. Rendered as SVG within a resizable container, the chart updates on window resize and includes a legend generated from team metadata, with data sourced from an array of per-over statistics.