D3 Example

D3 Example

This visualization displays sales data across product sub-categories, segmented by customer type (office, home, consumer) as three colored lines. The chart uses D3.js v3 with an SVG rendering approach, employing `d3.svg.line`, `d3.scale.linear`, and `d3.nest` to group data from the CSV file. Axes are formatted with a custom SI tick formatter, and a categorical color legend is generated using the d3-legend plugin. The interactive rendering responds to the loaded dataset, drawing one path per segment.

KKainatIqbal

83% match

MULTILINE CHART

This multiline chart compares profit across sub-categories for different regions, with each region represented by a distinct colored line. The visualization uses d3.nest() to group data by region and d3.line() with curveBasis to generate smooth paths, while d3.scaleOrdinal with schemeCategory10 assigns colors. A custom colorLegend component renders the region labels. Profit values are parsed from a CSV file containing sample sales data, and the chart includes axes with gridlines, a title, and axis labels.

82% match

MULTILINE CHART

This multiline chart compares profit across product sub-categories for different regions, using color to distinguish each region. Built with D3 v5, it renders an SVG with a time-scaled x-axis, linear y-axis, and a legend via the custom `colorLegend` function. Data is loaded from a CSV file and processed with `d3.nest()`, then lines are drawn using `d3.line()` with `curveBasis` smoothing.

80% match

Line Chart with Multiple Lines

This line chart compares profit by sub-category for different customer segments and regions. It shows multiple colored lines, each representing a region, plotted across sub-categories with profit values on the y-axis. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleOrdinal`, `nest`, `line`, and `curveBasis` to aggregate and smooth the data. A color legend, built with `colorLegend`, identifies each region. The data, sourced from Data Canvas - Sense Your City, is loaded from a CSV and rendered as an SVG.

Ssafdarawan

Multiline chart

This multiline chart displays profit trends across regions over time, with each line representing a region and colored via a categorical scale. Built with D3 v5, the visualization uses `d3.nest` to group data by region, `d3.line` with `d3.curveBasis` for smooth paths, and custom axis and legend components. The data, sourced from Data Canvas - Sense Your City, is loaded from a CSV and rendered as SVG.

Ii202081

Line chart with multiple lines

This visualization shows profit trends across product sub-categories over time, with multiple colored lines representing different states and a legend that filters lines by click. The chart uses d3.csv for data loading, d3.nest to group data by state, d3.scaleLinear for both axes, and d3.line with curveBasis for smooth line paths. A colorLegend component (built with D3 selections) enables interactive highlighting by dimming non-selected states. The SVG rendering includes axes with d3.axisLeft and d3.axisBottom, while the data comes from a CSV file with order details.

MULTILINE CHART

This example shows how profit evolved over time for different regions using a multiline chart. The visualization uses d3.line with curveBasis to generate smooth paths, and d3.scaleTime and d3.scaleLinear for the axes. Data is loaded from a CSV file and nested by region using d3.nest. A custom color legend is rendered alongside the chart, and the SVG display includes axis labels and a title.

D3 Example

This example presents a horizontal bar chart comparing revenue figures across named categories, with an additional vertical reference line and a separate bar strip on the right side. Built with D3.js (version 3.5.5) and rendered as SVG, it uses two CSV data files—one containing revenue and prior-year values, the other containing revenue and other metrics. The chart employs ordinal and linear scales, along with D3’s axis and selection APIs, to map category names to bar heights and revenue values to bar widths, while the standalone line and rectangles are placed manually via SVG coordinates.

RRatnar