Brushable bar chart - Horizontal - IV

100%

Brushable bar chart - Horizontal - IV

✓ Published0🌍 Public

Last edited Jan 6, 2018

Created on Jan 6, 2018

This example shows a brushable horizontal bar chart of the most-cited philosophers, with each bar representing an individual scholar and its length corresponding to citation count. The visualization pairs a detailed main chart with a smaller mini chart, where users can drag a brush to filter which portion of the ranked list is displayed. The chart uses D3 v3 with SVG rendering, employing `d3.behavior.zoom` for mouse-wheel scrolling and a brush for selection. Data, which includes citation counts from analytic and continental philosophy journals, is loaded from a CSV file and sorted by frequency.

AI-generated description

The sampling strategy to determine the journals used in my research on the continental/analytical split: Two analytic journals (mind, analysis) and two continental ones (review of Continental Philosophy, Journal of the British Society of Phenomenology) where selected. Citation-Data for the 500 hundred most cited articles of each journal was downloaded and evaluated. Every occurence of a journal name for each article was counted (Types, not Tokens were counted). Above are the top sixty journals and there frequencies, determined by this method.

For the visualization I am in debt to <a href='http://bl.ocks.org/nbremer/'>nbremer</a>'s block: <a href='http://bl.ocks.org/nbremer/326fb6de768e85261bfd47aa1f497863'>Brushable Horizontal Bar Chart - IV</a>

forked from <a href='http://bl.ocks.org/MNoichl/'>MNoichl</a>'s block: <a href='http://bl.ocks.org/MNoichl/6cb8731db2ef1b85aa689d84de131a32'>Top Philosophy Journals, Snowballsample</a>

Similar vizzes

Loading thumbnail…

Brushable bar chart - Horizontal - IV

This bar chart visualizes citation patterns in philosophy journals, showing how often each journal is mentioned across a snowball sample of highly cited articles. The visualization combines a main horizontal bar chart with a mini overview chart on the right; users can brush or scroll to zoom into specific portions of the data. The code uses d3.v3’s `d3.behavior.zoom` and brush components, with ordinal and linear scales mapping journal names to bar positions and mention counts. Data comes from a CSV file listing journal names, mention counts, and total citations.

MMNoichl

92% match

Loading thumbnail…

Brushable bar chart - Horizontal - V

This horizontal bar chart displays the gross counts of 48 philosophical publications. A main chart shows all values, while a smaller mini chart contains a brushable window. Users can drag this window, click to reposition it, or adjust its size with handles to control the visible range. The main chart updates its x-axis scale to fit the largest visible bar, ensuring optimal use of space. Built with D3 v3, it uses SVG for rendering and employs `d3.behavior.zoom` for mouse-wheel scrolling over the main chart for additional navigation.

MMNoichl

86% match

Loading thumbnail…

Brushable bar chart - Horizontal - V

This example shows a horizontal bar chart with a linked mini chart on the right that acts as a brushable overview. Dragging the brush box, scrolling the mouse wheel, or clicking in the mini chart changes which bars are visible in the main chart, while the x-axis scale dynamically updates to fit the largest visible bar. The visualization is built with D3 v3, using ordinal scales for the y-axis, linear scales for the x-axis, and the `d3.svg.brush` component. SVG is used for rendering, with the main chart clipped via a clip-path. The data consists of 40 randomly generated country names and numeric values sorted in descending order.

TThanaporn-sk

79% match

Loading thumbnail…

Brushable Horizontal Bar Chart - I

This example shows a brushable horizontal bar chart that lets viewers explore a large, randomly generated dataset by adjusting a selection box in a mini chart on the right. The main chart on the left displays the selected bars in detail, with the y-axis labels and bar lengths updating based on the brush extent. The chart uses D3 v3 with SVG rendering, employing `d3.svg.brush` for the interactive selection, `d3.scale.ordinal` and `d3.scale.linear` for scales, and an ordinal brush pattern adapted from an external example. Scrolling the mouse wheel also moves the brush, and resizing handles allow users to change the number of visible bars.

SSav10

79% match

Loading thumbnail…

Brushable bar chart - Horizontal - IV

This brushable bar chart displays 40 randomly generated data entries as horizontal bars. Users can adjust a brushable window in a mini chart to control which bars appear in the main chart, with mouse-wheel scrolling for navigation. The visualization is built with D3 v3 (d3.v3) using SVG rendering and ordinal scales, implementing a custom `d3.behavior.zoom` handler for scrolling that slides bars without transitions.

RRicCheng

79% match

Loading thumbnail…

a Barchart of brushes

Six horizontal bars form an editable bar chart, with each bar implemented as a draggable D3 v4 brush selection. The chart displays six numeric values between 0 and 20, rendered as blue bars on a light yellow background with a black axis. Users adjust a bar’s height by dragging its brush handle horizontally, which updates the underlying data and the white text label showing the value. The visualization uses `d3.brushX()` for interaction, `d3.scaleLinear()` for positioning, and SVG rendering, with the brush extent constrained to each bar’s row.

AAlainRo

74% match

Loading thumbnail…

Bar Chart with Brushing

This interactive bar chart demonstrates how brushing can reconcile the trade-off between a zero baseline and emphasizing small differences. The visualization displays two horizontal bars comparing scores across groups, rendered as SVG rectangles using React components. A linked brushing interface, implemented with d3.brushX, allows users to select a region on the top chart, which then dynamically updates the bottom chart’s x-scale domain via d3.scaleLinear. The data originates from a CSV file loaded with d3.csv, and React’s useState hook manages the brush extent state for responsive zooming.

WWaseem Medhat

72% match

Loading thumbnail…

Visualization

A zoomable scatterplot displays a Principal Component Analysis of citation data from 2,000 philosophy articles, with points colored by K-Means clusters. The visualization uses D3 v3’s linear scales, axes, and zoom behavior to explore the bidimensional projection. Points are rendered as SVG circles with tooltips via d3-tip, and a button switches the x-axis variable, triggering a transition on the dot transforms. Data is loaded from a CSV file, and the plot includes a categorical color legend.

MMNoichl

70% match