M

MNoichl

@MNoichl·54 public vizzes

Loading thumbnail…

OpenAlex-url to pyalex-query

This example shows how to convert an OpenAlex search URL into a query object and parameters for the pyalex API, then counts the matching works. The Python script parses the URL string with `urlparse` and `parse_qs`, extracting filters, sort orders, and pagination options. It builds the query by chaining methods on the `Works` object from pyalex, handling fields like `default.search` and `title_and_abstract.search`, and applies sort directions as asc or desc. Finally, it calls `query.count()` to return the total number of works that match the converted query.

Loading thumbnail…

Small function to add a coordinate system indicator without visible axes to a umap-plot

This example shows how to add a compact UMAP-X and UMAP-Y coordinate indicator to an existing Matplotlib plot, providing spatial orientation without visible axes. The code defines a function that uses `fig.add_axes` to create a transparent inset axis with an equal aspect ratio, then draws the coordinate lines via `ax_inset.plot` and `ax_inset.vlines`, with bold labels added through `ax_inset.text` for each axis. The inset is positioned relative to the base axes using figure-space coordinates, and the line length is scaled by a ratio parameter. The example demonstrates a reusable Matplotlib technique for overlaying minimal directional cues on dimensionality-reduction scatter plots from any source.

Loading thumbnail…

Proposed way to set label-sizes for datamapplot with pylabeladjust.

This example shows a proposed method for scaling label text size and weight in a datamapplot visualization. It first wraps long labels using `textwrap.fill` for readability, then maps a count column to font sizes between 3 and 28 points using `MinMaxScaler` from scikit-learn, applying a 0.9 power rescaling to compress the range. Additionally, it sets labels to bold when their count exceeds the 80th percentile, using NumPy's `percentile`. The code relies on pandas for DataFrame manipulation and requires a pre-existing data frame with 'label' and 'count' columns.

Loading thumbnail…

economist net

This network visualization maps the citation relationships between academic papers in clinical psychology. The view uses a force-directed simulation where nodes represent papers, with their vertical position locked to their publication year and their size scaled by citation count. The code builds this using `d3.forceSimulation`, `d3.forceLink`, and a custom `ticked` function that fixes the y-coordinate based on the paper’s `PY` attribute. Hovering a circle reveals a tooltip with the paper’s full title, author, and source.

Loading thumbnail…

economists' network

A network graph of 19th-century economists, clustered by intellectual community and positioned vertically by birth year, displays citation relationships between scholars like Wilhelm Roscher and Leopold von Ranke. Nodes scale by citation count and change color by cluster, while hovering reveals a tooltip with each economist’s name and publication details. Built with d3.v4, the visualization uses `d3.forceSimulation` with link, charge, and center forces, plus custom drag and tick handlers to fix y-coordinates to the timeline. A left axis marks the date range, and a JSON data source supplies node attributes and links.

Loading thumbnail…

philosophy phd_advisor_network

A force-directed graph displays a network of philosophy PhD advisors and their academic relationships, with nodes representing individuals and links indicating advisor-student connections. The visualization uses d3.forceSimulation with charge and center forces to position related philosophers in proximity, while link stroke-width encodes connection strength. Data originates from a JSON file of philosopher pairings, rendered as SVG circles and lines with drag interaction support via d3.drag.

Loading thumbnail…

Interactive D3 view of sklearn decision tree

This interactive visualization displays a decision tree trained on cocktail recipe data, showing the ingredient-based rules that classify drinks. Each node represents a threshold test on an ingredient quantity, with leaf nodes listing predicted cocktail categories. Users can click nodes to expand or collapse branches, revealing the tree’s hierarchical structure. The code uses D3.js v3 with its `d3.layout.tree` for the Reingold-Tilford layout and `d3.svg.diagonal` for curved links, rendering nodes as SVG circles and text with smooth animated transitions between states.

Loading thumbnail…

Interactive D3 view of sklearn decision tree

This interactive visualization displays the decision rules of a scikit-learn decision tree as a collapsible Reingold-Tilford tree. Users click nodes to expand or collapse branches, revealing classification outcomes for a dataset with products like bread and cognac. Built with D3 v3, it uses `d3.layout.tree` for layout, `d3.svg.diagonal` for curved links, and `d3.json` to load the tree structure. Node positions transition smoothly via `node.transition().duration(750)`, with collapsed children stored in `_children`. The SVG rendering uses white and light-steelblue circles to indicate leaf versus internal nodes.

Loading thumbnail…

tSNE + Tensorflow

This example uses a TensorFlow-based t-SNE optimizer within a webpage to reduce 200 random 10-dimensional points to a 2D embedding. The code initializes a `tf.randomUniform` tensor, passes it to `tsne.tsne()`, and calls `compute()` to produce coordinates, which are printed to the console. The visualization relies on the TensorFlow.js and tfjs-tsne libraries, with D3 v4 loaded but not actively used for rendering in this minimal setup.

Loading thumbnail…

fresh block

This example visualizes a high-dimensional random dataset by projecting it into two-dimensional space. The visualization uses TensorFlow.js and its `tfjs-tsne` library to compute a t-SNE embedding, which is then printed as coordinates. The code generates 200 data points with 10 features each via `tf.randomUniform`, runs the embedding computation asynchronously, and outputs the resulting x, y coordinates using the optimizer's `coordinates()` method. The visualization is built with d3.v4 for page layout, though no graphical rendering is implemented; the output is numeric coordinate data.

Loading thumbnail…

Clusterdistances Phil

A heatmap displays pairwise distances between thirteen philosophy subfields, using a color gradient from pale yellow to deep blue to indicate similarity. The matrix is symmetrical, with each subfield listed along both axes and a dark diagonal representing zero distance. The visualization uses D3.js version 3.5.6, employing scales and SVG rectangles to render the grid. Data comes from a JavaScript file containing precomputed distance values, and the layout includes rotated text labels and a linear color legend.

Loading thumbnail…

Heatmap (2D Histogram, CSV)

This heatmap visualizes the relationship between date (day), value, and hour from a CSV file. It displays the data as a 2D histogram, with the x-axis representing dates and the y-axis representing values, while a blue color scale indicates the count. The visualization uses d3.csv to load the data, then leverages d3.time.scale, d3.scale.linear, and d3.svg.axis to construct the plot and axes. Each tile is a rect element with its fill color mapped to the count value. The code also includes a legend showing the color-to-count mapping.

Loading thumbnail…

Heatmap of philosophy clusters

This heatmap visualizes 13 philosophy subfields on both axes, with cell colors encoding a similarity or co-occurrence value. The code uses `d3.tsv` to parse tab-separated data, then constructs a quantile color scale via `d3.scale.quantile()` mapping values to a nine-color sequential palette. The chart is built with the `d3.compose` framework, combining an ordinal x/y scale and a custom `Heatmap` layer that draws rounded rectangles, with hover-free static rendering.

Loading thumbnail…

tsne world

The visualization maps the 800 largest cities worldwide by computing pairwise geodesic distances and reducing them to two dimensions with t-SNE, producing a derived "world" where proximity reflects spatial similarity rather than actual geography. Each city appears as a colored dot, with size scaled by population and color assigned by country using `d3.scaleOrdinal`. The t-SNE algorithm runs iteratively within a `d3.forceSimulation`, stepping the model and interpolating positions toward the latest solution. Custom canvas rendering draws the animated nodes, while data loads from a local CSV via `d3.csv`.

Loading thumbnail…

test-tsne

This example demonstrates how to project high-dimensional data onto a two-dimensional plane using t-SNE (t-Distributed Stochastic Neighbor Embedding). The visualization displays the resulting coordinates as small circles within an SVG canvas, with each point representing an item from a small dataset of twelve samples. The t-SNE algorithm is implemented through the custom `tsnejs` library, which processes pairwise distances calculated from the input data. The rendering uses D3.js v4 to create the SVG elements and position them according to the computed embedding coordinates.

Loading thumbnail…

graph annotation - draggable clusters

This example demonstrates how to dynamically update graph annotations on a network diagram. Three groups of nodes in the network are highlighted with encircling callout circles that carry labels. The visualization uses D3.js v4, the d3-annotation library, and d3.forceSimulation for physics-based layout, with a node-dragging interaction. The underlying data is a character network from *Les Misérables*, provided in a `graph.json` file. The annotations' positions and circle radii are recalculated during the simulation's tick, and the annotation subjects are made non-interactive to allow dragging of the nodes beneath.

Loading thumbnail…

timed graph v2

This visualization maps a citation network of psychology publications as an animated force-directed graph. Nodes represent papers, sized by citation count and colored by cluster, while links connect citing works. The y-axis is fixed to publication year, and an animated simulation from d3.forceSimulation positions nodes using link, charge, and center forces. Hovering reveals paper details via a tooltip. Data comes from a local JSON file, rendered as SVG with D3 v4.

Loading thumbnail…

timed graph v2

This interactive network visualization displays citation relationships between academic papers in clinical psychology, with publications positioned along a timeline based on publication year. Circles represent individual papers, with size corresponding to citation count and color indicating cluster membership, while connecting lines show citation links and their temporal gaps. Users can hover over nodes to view detailed paper information and drag nodes to rearrange the layout. The visualization uses d3.forceSimulation for the physics-based layout, d3.scaleTime for the chronological axis, and d3.scaleOrdinal for cluster coloring, rendering as animated SVG elements with tooltip interactions.

Loading thumbnail…

Scatterplot scientific output

A scatterplot of scientific output, showing the log of total references against year from 1650 to 1982. The visualization uses a brushed region that allows users to zoom into a selected area of the plot; double-clicking the background resets the view. Implemented with d3.v4, the chart renders circles via SVG and animates axis and point transitions using `d3.transition`. Data is loaded from a CSV file containing year and value columns.

Loading thumbnail…

Journalsample over time

This line chart shows the number of journal publications per year from 1951 to 2017, with a peak around 2007 followed by a decline. The visualization uses the D3.js v3 library to render an SVG path, with a time scale for the x-axis and a linear scale for the y-axis. Data is loaded from a local CSV file via `d3.csv`, and axes are generated using `d3.svg.axis`. The line itself is constructed with `d3.svg.line`, mapping parsed year values to x-coordinates and publication counts to y-coordinates.

Loading thumbnail…

Wuerde Project

This interactive scatterplot maps the semantic contexts of the word "Würde" across roughly 5,000 German news articles. Using t-SNE coordinates from a CSV file, each dot represents a usage, with hovering a dot revealing a text excerpt as a tooltip. The visualization is built with D3.js v4, employing `d3.scaleLinear` for axes and the `d3-scale-chromatic` library for potential color cues. The SVG renderer displays data on principal component axes, allowing users to explore thematic clusters.

Loading thumbnail…

Wuerde Project

This visualization displays a t-SNE projection of approximately 5,000 ZEIT articles, mapping the semantic structure of the word "Würde" (dignity). Each point represents a contextual usage, with axes labeled as principal components. Built with Vue and D3.js, it renders points as an SVG scatterplot using `d3.scaleLinear` for coordinates. Hovering reveals the original article excerpt in a tooltip, encoding the embedding’s relationships. The visualization uses `d3-scale-chromatic`, `d3.axisBottom`, and `d3.brush` for potential interaction, while data is loaded from a CSV file via `d3.csv`.

Loading thumbnail…

Scatterplot basic

This example shows an interactive scatterplot of clustered data points, where users can brush a rectangular region to zoom into that area and double-click to zoom back out. As the view changes, the x and y axes smoothly transition to the new domain. Built with D3.js v4, it uses `d3.brush` for selection, `d3.scaleLinear` for axes, and SVG transitions to animate the rescaling of circles. The data comes from a CSV file containing x, y coordinates and cluster labels, with colors assigned via `d3.scaleOrdinal`.

Loading thumbnail…

Random Graph Generator

This interactive visualization generates a random graph with 80 nodes and 80 links each time the user clicks the canvas. The nodes are sized and colored according to their degree (number of neighbors), using an ordinal color scale mapped from a blue-to-red gradient. The graph is laid out using the d3.layout.force force-directed algorithm, which animates the nodes and links as they settle into position. The implementation uses D3.js (v3) with SVG circles and lines, and each new graph replaces the previous one through transitions that adjust node radius, fill color, and opacity over 800 milliseconds.

Loading thumbnail…

Graph for picture taking

This force-directed graph visualizes character co-occurrence in *Les Misérables*, showing how often pairs of characters appear together. The D3 `d3.forceSimulation` API positions related characters closer together while repelling unrelated ones, with link stroke width reflecting co-occurrence frequency. Nodes are colored by cluster and rendered as SVG circles, with tooltips showing character names. The layout uses D3 v4 forces including `forceManyBody`, `forceLink`, and `forceCenter`, with drag interactions enabled via `d3.drag`. Data comes from Donald Knuth’s compiled character co-appearances.

Loading thumbnail…

some ks

This example displays two lines on a single graph, using data from a CSV file with columns for the x-axis and two distinct y-value series. The first series is omitted from rendering, while the second is drawn as a red path. Built with d3.js v4, it uses `d3.line` to generate the path and `d3.scaleLinear` for both axes, with `d3.axisBottom` and `d3.axisLeft` providing the tick marks. The SVG output is positioned using margin conventions.

Loading thumbnail…

tsne world with labels

A map of the world’s 800 largest cities, repositioned by t-SNE so that geographic proximity becomes visual proximity based on geodesic distances. Each city appears as a colored dot sized by population, with its name labeled in black text. The visualization runs on a Canvas, using `d3.forceSimulation` to integrate the t-SNE step and a collision force, while `d3.scaleOrdinal` assigns country colors and `d3.geoDistance` computes the pairwise distances from the cities.csv dataset.

Loading thumbnail…

Force-Directed Graph

A force-directed graph shows citation relationships among academic papers on intelligence and race, with nodes representing publications and links indicating citations. The visualization uses D3 v4's `d3.forceSimulation` with link, charge, and centering forces, and renders continuously to a Canvas 2D context. Node positions update on each simulation tick, drawing links as gray lines and nodes as white-stroked circles. Data comes from the embedded `miserables.json` file, which includes paper metadata like authors, year, and citation scores.

Loading thumbnail…

timed graph, psychology on race

A timed force-directed graph visualizes the temporal unfolding of a controversial debate on race and IQ in psychology. Nodes, colored by cluster, burst outward from a horizontal time axis, their vertical position fixed by publication year while the simulation, driven by `d3.forceSimulation` with link, charge, and center forces, positions them horizontally. Hovering a node reveals a tooltip with its label, title, source, and year. The visualization renders as an animated SVG using data from `race.json`.

Loading thumbnail…

Simple line graph in d3.js

This simple line graph visualizes a small dataset of numeric date-value pairs loaded from a CSV file. It shows a single steel-blue polyline plotted against linear x and y axes, with five ticks per axis. The example uses d3.js v3 to parse the CSV, apply linear scales, and render the chart as SVG. It defines axes with d3.svg.axis and constructs the line path with d3.svg.line, demonstrating core D3 data-binding and scaling techniques for teaching purposes. The graph focuses on the essential structure of a D3 chart without additional interactivity or annotations.

Loading thumbnail…

Visualization

This visualization plots the Davies-Bouldin index against the number of clusters for a k-means analysis of philosophy papers, revealing how clustering quality varies with cluster count. The code uses d3.v3 with SVG circles positioned via linear scales, reading data from a CSV file that tracks citation patterns across analytical and continental philosophy journals. A d3.tip tooltip displays exact values on hover, while d3.behavior.zoom enables interactive panning and zooming of the scatterplot. The animation and transitions are handled through d3's built-in transition methods.

Loading thumbnail…

Scatterplot basic

This scatterplot displays clustered data from a CSV file, using color to distinguish clusters. Users can brush a region to zoom in, and double-click to reset the view. The visualization is built with D3 v4, using `d3.scaleLinear` for axes, `d3.brush` for selection, and SVG transitions for smooth animations. It renders data points as circles, with a legend for cluster identification.

Loading thumbnail…

Multi-dimensional D3 force simulation

This interactive visualization demonstrates force-directed graph layouts across one, two, or three dimensions, using the Three.js WebGL renderer. It cycles through three datasets: the co-occurrence network of *Les Miserables* characters, a citation network of philosophy papers, and the dependency hierarchy of the D3.js library. The layout uses the `3d-force-graph` component, which extends `d3-force` with an octree for 3D space or a binarytree for 1D, while node color and size encode cluster membership or data weight.

Loading thumbnail…

Journalsample over time

This line chart displays the number of publications in philosophy from 1951 to 2017, using a CSV file with date and close columns. The visualization shows a steady increase in publications peaking around 2007, followed by a decline through 2017. Built with D3 v3, the code loads data via `d3.csv`, parses years with `d3.time.format`, and renders a single path using `d3.svg.line`. Axes are generated with `d3.svg.axis`, and the SVG canvas is sized using margin conventions.

Loading thumbnail…

Brushable bar chart - Horizontal - IV

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.

Loading thumbnail…

Phil Journals i

A horizontal bar chart shows the percentage of modifier usage in selected works across sixteen philosophy journals, with values ranging from 28 to 122. The chart animates bar growth on load and highlights each bar in orange on mouseover. It uses d3.v3 with an ordinal y-scale and linear x-scale, parsing CSV data from Project Gutenberg texts, and renders SVG rectangles with axes.

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.

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.

Loading thumbnail…

Timelines Chart

This timelines chart shows multiple parallel time-series, grouped into distinct sections, with each segment colored to represent a value. The visualization supports both heatmap-style continuous coloring and categorical qualitative coloring. Users can explore the data by zooming and panning, or scrubbing through a timeline brush at the bottom. The example uses the `timelines-chart` D3 component, populating it with randomly generated data via the `getRandomData` function, which constructs groups, labels, and time ranges.

Loading thumbnail…

Visualization

This visualization displays a principal component analysis of citation data from 2,000 philosophy articles, projecting each article into a 2D scatterplot where points are colored by K-Means cluster assignment. The chart, built with D3 v3 and rendered as SVG, supports zooming and panning through the d3.behavior.zoom API. Each dot represents an article, with mouseover tooltips provided by the d3-tip library. The visualization includes an interactive button that switches the x-axis to display carbohydrate values, demonstrating a data-viewing alternative, though the primary dataset remains the citation components.

Loading thumbnail…

Visualization

This interactive scatterplot visualizes a Principal Component Analysis of citation data from 2,000 philosophy articles from the 1990s, with points colored by K-Means clusters. Users can zoom and pan the plot using d3.behavior.zoom and hover over points to see tooltips generated by d3.tip. The visualization is built with D3 v3, rendering SVG circles, and includes a button that switches the x-axis to display carbohydrate values, triggering a transition that updates the axis and dot positions.

Loading thumbnail…

Visualization

This visualization plots the Davies-Bouldin Index against the number of clusters (k) for clustered citation data from philosophy journals, showing that 7 clusters yield the lowest index and thus the best clustering. The scatterplot uses d3.svg.axis, d3.scale.linear, and d3.behavior.zoom for panning and zooming, with circles colored by cluster and tooltips via d3.tip. Data comes from a CSV file containing clustering results from the author's analysis.

Loading thumbnail…

Visualization

This interactive scatter plot displays the Davies-Bouldin index (y-axis) against the number of clusters k (x-axis) for K-means clustering results on citation data from philosophy journals. It visualizes how clustering quality changes from 2 to 10 clusters, showing a minimum at k=7. The visualization uses D3 v3 with `d3.scale.linear`, `d3.svg.axis`, and `d3.scale.category20`, rendering circles in SVG. A button switches the x-axis to a different (unused) data column, while the underlying data comes from a CSV file loaded via `d3.csv`, with tooltips via the d3-tip library and zoom/pan through `d3.behavior.zoom`.

Loading thumbnail…

Small multiple bar charts with tooltips

Small multiple bar charts show two text-analysis measures, Analytic and Continental, across four categories: self mentions, words per sentence, STTR, and directives. Each chart uses horizontal bars to display percentages, with a color scale from red to blue mapping value magnitude. The visualization, built with D3 v3, loads data from a TSV file and nests it by country. Hovering over a bar triggers a tooltip via the `d3.tip` library, revealing the exact country, year, and percentage value.

Loading thumbnail…

Visualization

This visualization shows the Davies-Bouldin Index values for K-Means clustering of citation data from the top 2000 papers of the 1990s, with each point representing a different cluster count. A lower DB index indicates better clustering, revealing that 15 clusters achieve a notably better score (5.9) than 2 clusters (9.2). The scatter plot uses d3.svg.axis for axes, d3.scale.linear for positioning, and d3.tip for tooltips, with d3.behavior.zoom enabling interactive panning and zooming. Data comes from a CSV file containing K values and their corresponding DB and W metrics.

Loading thumbnail…

Visualization

This interactive scatterplot visualizes a principal component analysis of citation data from 2,000 philosophy articles, with k-means clustering applied to reveal groupings. The D3.js (v3) visualization uses SVG circles positioned via a zoomable, panning coordinate system, with color encoding cluster membership and tooltips showing exact coordinates. Users can click a button to switch the x-axis variable, triggering animated transitions of the data points. The code leverages `d3.scale.linear`, `d3.svg.axis`, `d3.behavior.zoom`, and the `d3.tip` library for interactivity, with data loaded from a CSV file.

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.

Loading thumbnail…

D3V4 Scatterplot

A D3V4 scatterplot visualizes iris flower dimensions, plotting sepal width on the x-axis and sepal length on the y-axis, with each point colored by species and a legend. The chart uses a TSV data file, parsed with `d3.tsv`, and encodes positions via `d3.scaleLinear`, color via `d3.scaleOrdinal`, and axes via `d3.axisBottom` and `d3.axisLeft`. The SVG rendering employs circles for data points and standard margins, adhering to D3 conventions.

Loading thumbnail…

Publications in philosophy over time

A line chart displays the number of philosophy publications per year from 1906 to 2017, with a gradual rise and a sharp increase after 1975, peaking near 4000 in 2015. The visualization uses D3 v3 to load a CSV file, parse years as time values, and render an SVG path with axes. It applies `d3.time.scale`, `d3.svg.axis`, and `d3.svg.line` to map dates to x-positions and publication counts to y-positions, with the steel-blue line showing the trend over time.

Loading thumbnail…

Bounded Force Layout - Columns by Depth

This example visualizes energy flows between sources and uses as a bounded force-directed layout, with nodes arranged in vertical columns based on a cluster depth value. The graph shows citation relationships among publications on race and IQ, using circle nodes and connecting lines rendered in SVG. Built with D3 v3 and Vue, the code uses `d3.layout.force` with a custom tick function that constrains node positions within the SVG bounds and adjusts vertical placement by cluster. A simple D3 tooltip appears on mouseover, and the data comes from a local `graph.json` file.

Loading thumbnail…

Philosophers use of modifiers

A horizontal bar chart shows the percentage of modifiers (adjectives and adverbs) in selected works of eight philosophers, revealing that Nietzsche uses the highest proportion. The chart is built with D3 v3, using `d3.scale.linear`, `d3.scale.ordinal`, `d3.svg.axis`, and `d3.xhr` to parse a CSV file. Data comes from Project Gutenberg’s Philosophy bookshelf, and the bars change color on mouseover.

Loading thumbnail…

Bounded Columns : Creating Reusable Charts

This interactive network diagram displays energy flows between sources, conversions, and end-use sectors using a bounded force-directed layout. Built with D3.js (v3) and SVG, it supports real-time parameter adjustments via sliders, letting users modify node radius, gravity, and charge to reposition elements. The chart includes a tooltip and color-coding by depth, while its modular configuration object demonstrates a reusable pattern for customizing charts through public APIs.

Loading thumbnail…

fresh block

This example shows a force-directed network graph of character interactions from *Les Misérables*, rendered as SVG circles and curved links. The code uses d3.forceSimulation with link, charge, and centering forces to position nodes, and a custom d3.hypergraph function to transform hyperedges (links connecting more than two nodes) into intermediate connection nodes with smaller gray circles. Zoom and drag interactions are enabled via d3.zoom and d3.drag.

Loading thumbnail…

Force-Directed Graph

A force-directed graph visualizes character co-occurrence in *Les Misérables*, with nodes positioned so related characters cluster together. The simulation uses d3.forceSimulation with link, charge, and center forces, while nodes are draggable circles colored by cluster and links are lines with stroke-width scaled by co-occurrence value. The code loads data from a JSON file and renders everything as SVG.