Just things

100%

✓ Published0🌍 Public

Last edited Oct 9, 2018

Created on Oct 9, 2018

A side-by-side comparison links a line chart and a grouped bar chart through shared data. The line chart plots 50 random values, with circle markers whose size and color correspond to a radius value, while the bar chart counts how many items fall into each radius group. Hovering a circle highlights the matching bar by reducing its opacity. The visualization uses D3 v5 with `d3.line`, `d3.scaleLinear`, `d3.scaleBand`, `d3.nest`, and `d3.axisBottom`, rendering to SVG with an ordinal color scale.

AI-generated description

forked from <a href='http://bl.ocks.org/AlexDaGr8/'>AlexDaGr8</a>'s block: <a href='http://bl.ocks.org/AlexDaGr8/0cee717029ec1fdec69c5bc15d39ef41'>Just things</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Just things

This example combines a line chart and a bar chart in a single SVG, using a shared random dataset of 50 items. The line chart plots each item’s index against a numeric value, with circles sized and colored by a third `radius` attribute. The bar chart aggregates counts of items per radius value, revealing the distribution. Both charts use D3 v5 scales and axes; the line chart employs a d3.line path, while the bar chart uses d3.nest to group data. Hovering over a line-chart circle highlights the corresponding bar via d3.selectAll.

AAlexDaGr8

90% match

Loading thumbnail…

Trying reusable

This example demonstrates a dual-chart comparison of a synthetic dataset containing 50 items with numeric indices, values, and a categorical radius attribute. The left line chart displays the value over index with white-filled circles scaled by radius, while the right bar chart aggregates counts by radius using d3.nest. The visualization also introduces a reusable chart pattern based on Mike Bostock’s approach, where a line_chart() function defines configurable accessors for x and y, rendered via D3 v4 with SVG and animation to update the y-axis domain after a delay.

AAlexDaGr8

79% match

Loading thumbnail…

Document

The visualization generates a random sequence of twenty charts, cycling through line charts, pie charts, and bar charts. Each line chart displays four smoothed monotone curves with colored dots, while the pie chart and bar chart render categorical and time-based data. Built with D3 v4, the code uses `d3.line`, `d3.arc`, and `d3.axisBottom`/`d3.axisLeft` to produce SVG output. Data is procedurally generated using `d3.randomUniform` and `d3.range`, with each chart styled via inline attributes and CSS classes.

DDabbar

77% match

Loading thumbnail…

Grouped bar chart v4

This grouped bar chart displays five series of ten random samples each, using color to distinguish the series and vertical bars to represent values. Built with D3 v4, it renders as SVG and uses `d3.scaleBand` for the categorical axes, `d3.scaleLinear` for the value axis, and `d3.scaleOrdinal` for color mapping, with data generated in JavaScript via `Math.random`.

BBaptisteL54

76% match

Loading thumbnail…

Grouped Bar Chart

This example presents a grouped bar chart with 20 samples across 4 series, rendered in SVG using D3 v3. The chart’s bars are positioned by two ordinal scales, `x0` for categories and `x1` for series, with a linear `y` scale mapping values from 0 to 1. Each series is assigned a distinct color via `d3.scale.category10`. Data is randomly generated, and axes are drawn using `d3.svg.axis`. The code emphasizes scale composition and grouped layouts rather than interactivity.

Mmbostock

76% match

Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged

76% match

Loading thumbnail…

D3: Linked charts

Two linked bar charts share the same dataset, visualizing grades and a second variable. Each chart uses its own linear scale and axis, while a single ordinal scale positions the bars. Animated transitions and sort buttons let users reorder the bars by ascending or descending values. The example demonstrates how to link two D3.js SVG visualizations built from the same data, enabling interactive comparison.

AAdlopez2016

75% match

Loading thumbnail…

Gist 95392bf4a37344793786

This interactive bar chart displays comparative proportions across four categories, rendered as vertical bars (SVG rectangles) with a rotated axis label. Using D3.js v3, users can click and drag on any bar to resize it, with a semi-transparent background bar indicating the current editing area. The visualization distinguishes major and minor gridlines through separate `d3.svg.axis` configurations, while mouse events (`mousedown`, `mousemove`, `mouseup`) update bar heights dynamically based on cursor position. Hardcoded data arrays provide initial values, and all styling is applied via CSS classes.

HHoffmannP

75% match