Trying reusable

100%

Trying reusable

✓ Published0🌍 Public

Last edited Feb 22, 2018

Created on Feb 22, 2018

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.

AI-generated description

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

80% match

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

79% match

Loading thumbnail…

Towards Reusable Charts

This example demonstrates a reusable bar chart component built with D3.js (v3) following Mike Bostock's "Reusable Charts" philosophy. The chart renders income data for five countries from an embedded CSV file, using SVG for output. The code defines `d3.svg.myBarchart` as a modular function with configurable properties like margins, scales, and axis settings, allowing the same chart to be instantiated multiple times without global variable contamination. It implements ordinal and linear scales, along with D3's axis components and a custom grid-line generator, all drawn within a fixed 600×400 viewport.

11Cr18Ni9

73% match

Loading thumbnail…

chartTest

This visualization displays multiple lines as a radial chart, using test data arrays to demonstrate the capabilities of D3.js. The chart employs `d3.lineRadial()` with cardinal curves to render the data, with each line represented in a different color from the `d3.schemeCategory10` palette. The visualization is rendered as an SVG element, created with D3's selection and append methods. The example includes code variants showing additional D3 features, such as time-scaled data, radial axes, grid lines, and axis labels, all within a React framework context.

JJesper Martinsson

73% match

Loading thumbnail…

Untitled

The chart demonstrates why mapping values linearly to circle radii distorts data, using four strategies in a horizontal dot plot. Groups with 10, 30, 50, and 100 show that linear radius scaling makes larger values appear disproportionately small, while a square-root-adjusted radius or linear area scaling preserves proportional perception. The visualization uses D3 v5 with `d3.scaleLinear`, `d3.scalePoint`, and `d3.axisTop` to compare encodings, highlighting area as the correct perceptual channel for bubbles.

YYuichi Yazaki

72% match

Loading thumbnail…

Reusable Bar Chart

This example demonstrates a reusable bar chart built with D3 v5, rendering a monthly price series (January 2000 through December 2010) as an SVG. The chart uses a band scale for the categorical date axis and a linear scale for the price values, with axes formatted using compact number notation. The `barChart` function returns a configurable closure that exposes chainable methods—width, height, x, y, padding, and title—allowing the chart to be customized and reused. While the data includes 132 monthly data points, the visible bars appear relatively few, suggesting the chart is intended to be resizable and may currently render a subset or need responsive adjustment.

AAlexDaGr8

72% match

Loading thumbnail…

Reusable Examples - Pie Chart

This example demonstrates a reusable pie chart built with D3.js v5, following the patterns from Mike Bostock's "Towards Reusable Charts" and the Pro D3.js methodology. It renders two separate pie charts within a single SVG container, using `d3.pie` and `d3.arc` to calculate and draw the slices with an inner radius for a donut effect. The chart includes a title and uses `d3.scaleOrdinal` with the category10 color scheme to distinguish data categories. The code shows a modular structure with separate functions for building the layout, shape, scales, and SVG, allowing the chart to be easily reused with different datasets.

JJimMaltby

72% match

Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.4.2

This example shows a reusable bar code chart exploring radial layout with hourly data groupings, displayed as five separate chart instances arranged horizontally. The implementation builds on Mike Bostock's reusable chart principles and the ProD3.js pattern, using d3.v5’s SVG rendering with `d3.arc`-based drawing and an interval-driven update mechanism. Each chart animates through four datasets sequentially, then calls `closeInterval()` to stop changes. The code loads data with timestamps, groups items by hour via `getHours()`, and visualizes counts using angle-based segments within a circular layout, demonstrating modular chart construction and dynamic data updates.

JJimMaltby

71% match