Just things

100%

✓ Published0🌍 Public

Last edited Aug 9, 2018

Created on Feb 16, 2018

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.

AI-generated description

mit Licensed

Similar vizzes

Loading thumbnail…

Just things

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.

663anp3ca

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

80% match

Loading thumbnail…

Creating SVG Bar Chart

This example demonstrates a simple SVG bar chart built with D3 version 6. It generates a random dataset of ten values using `d3.range` and `Math.random`, then renders each value as a `rect` element, with its height and vertical position proportional to the data. The chart also labels each bar with a `text` element showing its value. The code uses D3’s `select`, `selectAll`, `data`, and `enter` methods to bind data and create the SVG elements, with bars colored using an RGB fill based on each value.

DDasbach.EJ

77% match

Loading thumbnail…

Basic bar+line chart

This chart combines a bar chart and a line chart in a single SVG visualization, with bars representing one data series and a line overlaid for a second series. It is built as a reusable template driven by a CSV file, where column names for the x-axis, bar values, and line values are configured in the code. The x-axis uses a band scale for categorical years, while the y-axis is linear and shared by both series. Blue bars show the primary values, and a green line connects the secondary values, with a legend distinguishing the two. The chart includes axis labels, a title, and a hover effect on the bars.

EEleonore9

77% 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…

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

76% match

Loading thumbnail…

simple line chart

This example shows a simple line chart that visualizes a randomly generated dataset of thirty points, with each point’s y-value incrementing by a random offset from the previous point. The chart displays the overall trend of the series, with a final value label and x-axis tick labels for each data index. The code uses D3 v3 to append an SVG, create linear scales for the x and y axes, and draw the line via `d3.svg.line()`. The data is generated inline using JavaScript’s `Math.random()` within a `d3.range()` map, and the chart is rendered as an SVG path with a black stroke.

BBrunoDumas

76% match

Loading thumbnail…

First Gist... More to come

This example shows a simple scatter plot of ten randomly generated data points, with axis lines spanning the full width and height of the chart. The visualization uses D3 v3 to create SVG circles positioned by linear scales, while the x- and y-axes are drawn using `d3.svg.axis` with tick sizes matching the chart dimensions. The data is created inline with `Math.random()`, and the plot is centered on the page with a gray background and red circles.

AAlexDaGr8

76% match