Skip to main content
Log in
B

BrunoDumas

@BrunoDumas·32 public vizzes

Loading thumbnail…

Motif

The visualization loads an external SVG line drawing, then cycles through a random color palette, recoloring the background, filled shapes, and open path strokes with smooth 4-second transitions. The author uses a golden-ratio-based color generator to create harmonious hues, and filters the SVG paths into closed and open sets to apply distinct fill and stroke treatments. This creates an ambient, slowly shifting color motif.

Jan 2, 2020
Loading thumbnail…

Motif - Test

The visualization shows a single large circular motif centered on a white background. The motif consists of three concentric circles, each drawn with thin black outlines. The outermost circle is surrounded by a larger, partially visible ring, and the innermost element is a small solid circle at the center. The code sets up an SVG canvas and defines functions for generating random colors, but the current output is purely the static motif.svg image—no dynamic coloring or animation is applied. The piece appears to explore geometric symmetry and minimalism, with the layered rings creating a sense of depth against the empty white space.

Jan 2, 2020
Loading thumbnail…

Narrative Charts

This example demonstrates a narrative chart built with the d3-layout-narrative plugin, visualizing the structure of a story by charting character appearances across scenes. It reads JSON data containing characters and scene descriptions, then renders an SVG with scenes as vertical bars, character introductions as labeled markers, and appearance nodes colored by affiliation (light/dark). The chart includes interactive tooltips that display scene descriptions on hover and highlight all characters appearing in a given scene, plus per-character highlighting when mousing over labels or links. The layout positions character labels along the left side with paths connecting their introductions and appearances, and the SVG resizes based on the computed layout extent.

Mar 2, 2019
Loading thumbnail…

TATUBAAR

TATUBAAR is a grid-based game map creator that renders an 8x8 tactical grid with colored cells and a character sprite. The visualization loads an external SVG character model, clips it to the sprite's bounding box, and positions it on the map with scaling, translation, and rotation. The code uses D3 v4 for SVG manipulation, including `d3.xml` to load the character asset and `d3.scaleOrdinal` for team colors. The map supports walkable cells, obstacles, holes, and spawn points, with a game logic layer handling entities, spells, and events.

Sep 3, 2018
Loading thumbnail…

week selector

The example shows a reusable week selector widget that displays a current week number and lets users navigate between weeks 1 and 52 using left and right arrows. It renders three selectors at different sizes and positions to demonstrate scalability. The code uses D3 v4 with SVG, appending text elements for arrows and the week label. The `change_week` function updates the week, clamping it within the valid range, and `refresh_week` rebinds the data to update the displayed text. The widget is styled with monospace font and a `noselect` class to prevent text highlighting.

Aug 27, 2018
Loading thumbnail…

Worktime

This stacked bar chart visualizes worktime patterns by day, using a CSV file of start and end timestamps. Each bar represents a day, and segments within the bar show the duration of activities (e.g., “slq,” “edm”) between 7:30 AM and 7:30 PM. The chart uses D3 v4 with SVG, employing d3-dsv to parse data, d3-scale for positioning and color encoding, d3-axis for the time-based y-axis, and d3-shape for stacking. Hovering over a segment highlights it and displays a tooltip.

Aug 27, 2018
Loading thumbnail…

Worktime_old

This example displays a static SVG canvas with a single text message reading “Edit the code below to change me!” in monospace font. It demonstrates a minimal D3 v4 setup, creating an SVG element sized 960 by 500 pixels and appending a text element at a fixed position using D3’s selection and attribute methods. The code uses d3.select, svg.append, and attribute setters to render the text, serving as a blank template from the blockbuilder.org environment.

Aug 20, 2018
Loading thumbnail…

Worktime

This example displays placeholder text in an SVG canvas, serving as a starting template for data visualization projects. The visualization renders a simple monospace message, "Edit the code below to change me!", using D3.js v4 to append a text element to an SVG container. The code demonstrates basic D3 selection and SVG attribute manipulation, setting the text position, font size, and font family. The chart is built from scratch within the HTML document, using d3.select to target the body element and append the SVG with fixed dimensions.

Aug 20, 2018
Loading thumbnail…

TATUBAAR - map thumbnail

This interactive map editor displays a grid-based game map, where colored cells represent character spawn points for different teams, grey cells are obstacles, black cells are holes, and white cells are walkable terrain. The visualization parses a plain-text string into a grid of cells and renders them using D3.js v4 with SVG rectangles, assigning colors from a categorical color scale. The map layout is defined by an eight-by-eight grid, and the interface includes a separate rendered character sprite with its own SVG definition.

Aug 13, 2018
Loading thumbnail…

TATUBAAR - map creator

This map creator lets users design a grid-based game board by clicking cells to cycle through terrain types: walkable, obstacle, hole, and character spawn. It uses D3 v4 to render the SVG grid and handles click events to update cell content. The code includes save functionality to export the map, and it visualizes spawn points by cloning a character icon from an SVG file loaded via `d3.xml`. Cell colors are mapped with a categorical color scale, and the interface includes a toolbar with instructions.

Aug 13, 2018
Loading thumbnail…

fresh block

This example shows four red circles of increasing size arranged diagonally on a blank SVG canvas. Each circle is scaled by a data value from the array [0.25, 0.5, 0.75, 1] using a translate and scale transform, producing a stepped progression. Built with D3 v4, the code uses `d3.select` to create the SVG, appends a base circle, then selects all circles with class "red" and applies the data-driven transforms. The data source is a simple inline array, with the rendering handled entirely through SVG attributes.

May 31, 2018
Loading thumbnail…

fresh block

Seven circles are plotted diagonally across a small SVG canvas. Each circle is drawn twice, with the second copy rendered in red and only for data values excluding 6, creating a simple visual comparison of data point positions. Built with D3 v4, the code uses `d3.select`, `svg.selectAll`, and `append` to generate SVG groups and circles, with coordinates computed directly from the data array values.

May 29, 2018
Loading thumbnail…

ants_garden

Two identical SVG ants wander randomly across the screen. The scene shows how D3 can import and duplicate vector graphics from an external XML file, using `d3.xml` to load the ant artwork and `document.importNode` to clone it. Each ant is a separate data object tracked with position, angle, and speed; a `d3.timer` drives their movement while `d3.selectAll` and `.attr("transform")` update the SVG transforms. Hovering over either ant pauses its motion, and moving the mouse away resumes it. The visualization relies on SVG animation and the MIT-licensed source from BrunoDumas.

May 15, 2017
Loading thumbnail…

MPDH

This example displays a static SVG canvas with a placeholder message, rendered using D3 v4. It shows how to set up an SVG container with defined margins and dimensions, then appends a text element at a fixed position. The code uses D3’s selection and append methods to add the text node, styling it with monospace font and a large size. The visualization demonstrates basic SVG creation and text placement without data binding or interactivity.

Feb 16, 2017
Loading thumbnail…

Projet_test3

This example visualizes a network of music artist recommendations, showing connections between artists based on association rule mining. An interactive force-directed graph places artists as nodes, with links representing the strength of their co-occurrence. Hovering over a node highlights it, and a tooltip appears; the code also implements a function to dynamically generate a list of five recommended artists for each selected node. The visualization uses D3.js v4 APIs including `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, with data loaded from CSV files (`recommandations.csv` and `artists_tags_count.csv`). Artist images and top five tags are integrated from the latter source, enhancing node details.

Jan 8, 2017
Loading thumbnail…

test multi-effect

This interactive network diagram displays the character relationships from Les Misérables using a force-directed layout, with nodes colored by group and link thickness encoding connection weight. Hovering over a node highlights it and all its direct neighbors with a black stroke, making local connections immediately visible. Built with d3.v4, the visualization uses `d3.forceSimulation` with link, charge, and center forces, `d3.drag` for node repositioning, and SVG circles and lines for rendering. The data comes from the bundled `miserables.json` file, while the hover effect is implemented by querying SVG elements by their generated `id` attributes.

Jan 7, 2017
Loading thumbnail…

fresh block

This circular packing diagram visualizes the hierarchical structure of the Flare codebase, with each circle’s area encoding the relative size of its corresponding code module. The animation smoothly expands and contracts the circles in response to user interaction, as hovering over a parent circle brings its child nodes into focus while dimming the rest. Built with D3 v3 and a flare.json dataset, the visualization uses translucent blue parent circles with gray leaves and interactive hover states to explore the nested software architecture.

Dec 31, 2016
Loading thumbnail…

pack layout

This visualization uses a packed circle layout to display the hierarchical structure of the Flare codebase. Each circle represents a node in the tree, with circle size encoding the node's numeric value and color mapping to depth in the hierarchy. The visualization is built using D3 v4, leveraging the `d3.stratify` and `d3.pack` APIs. The data comes from a CSV file containing file IDs and values, and interactive hover highlighting is implemented via SVG elements and mouse events.

Dec 31, 2016
Loading thumbnail…

TP 6

This example visualizes voting patterns among French parliamentary actors during 2015, showing a network of lawmakers connected by shared votes. It uses a force-directed graph built with `d3.forceSimulation` and SVG rendering, where nodes represent individual actors and links indicate pairs who voted identically on a given scrutin. The code processes `scrutins.json` data, counting co-votes for both "pour" and "contre" positions, then filters links to include only those with more than 20 shared votes. Node colors are assigned via `d3.scaleOrdinal` with `d3.schemeCategory20`.

Dec 18, 2016
Loading thumbnail…

TP4.2-grippe-france

This visualization presents a weekly time series of influenza-like illness incidence across French regions from 2003 to 2015, using a multi-line chart. Each region is plotted as a separate line, with the x-axis spanning consecutive weeks (from late September 2003 through mid-2015) and the y-axis representing case counts. The chart is built with D3 v3, with each region's line rendered in a distinct color, allowing viewers to compare the seasonal spikes of flu cases across different parts of France. The visualization highlights the recurring winter peaks and the relative amplitude of outbreaks across regions, with the data sourced from a public gist and formatted in CSV. A legend distinguishes regional lines, and the time axis uses date formatting for readability, making the seasonal cycles and regional variations easy to compare.

Dec 9, 2016
Loading thumbnail…

TP4.2-grippe-france_FORK

A choropleth map of French regions displays influenza case counts per week from 2003 to 2015, with a slider to step through time and hover tooltips revealing regional names and values. The visualization loads CSV data and a GeoJSON outline, using `d3.geo.conicConformal` for projection, `d3.geo.path` for rendering, and a `d3.scale.quantile` color scale to encode intensity. Regions without data appear gray.

Dec 6, 2016
Loading thumbnail…

TP4-grippe-france

This choropleth map visualizes the weekly incidence of influenza across French regions for 2014, using the GeoSJON file `regions.geojson` to render the regional boundaries. The map shows the cumulative number of reported cases for November 2014, with regions colored on a five-step sequential scale from light to dark red based on the total for that month. The visualization is built with D3 v3, using `d3.geo.path()` with a conic conformal projection and `d3.geo.json()` to load the geographic data. The CSV `GrippeFrance2014.csv` provides the weekly case numbers, which are summed for November and joined to the regional geometries. Hovering over a region displays a tooltip with its name and the summed value, and the color scale is computed from the minimum and maximum of these November totals.

Dec 1, 2016
Loading thumbnail…

TP4-grippe-france

A choropleth map of France displays the total number of influenza cases in 2014 for each region on a conic conformal projection. The visualization uses a five-color quantized scale to encode the cumulative case count (`somme2014`) for each region from a CSV file. The geographic boundaries are loaded from a GeoJSON file and merged with the data, with the fill color for each path computed via `d3.scale.quantize()` and `d3.geo.path()`. Regions without matching data appear in gray.

Nov 24, 2016
Loading thumbnail…

TP4-grippe-france

A choropleth map of France displays the total number of influenza cases in 2014 for each region on a conic conformal projection. The visualization uses a five-color quantized scale to encode the cumulative case count (`somme2014`) for each region from a CSV file. The geographic boundaries are loaded from a GeoJSON file and merged with the data, with the fill color for each path computed via `d3.scale.quantize()` and `d3.geo.path()`. Regions without matching data appear in gray.

Nov 24, 2016
Loading thumbnail…

TP4-grippe

This visualization shows the weekly incidence rate of influenza-like illnesses per 100,000 inhabitants across 14 French regions from January to December 2014. Each region is represented by a colored line, plotted over time, with the y-axis showing the number of cases and the x-axis showing the epidemiological weeks. The data, sourced from a gist by BrunoDumas, is rendered using D3.v3. The line chart reveals the seasonal epidemic curve, with a clear peak in February/March 2014, particularly visible in Languedoc-Roussillon, Nord-Pas-de-Calais, and Alsace, while regions like Midi-Pyrenees and Haute-Normandie show lower overall rates. The visualization allows for comparison of regional influenza activity throughout the 2014 season, highlighting the variation in timing and intensity of the epidemic across French regions.

Nov 24, 2016
Loading thumbnail…

Gist ff32d4f709edccc02ac9a9fb4e244008

This choropleth map visualizes U.S. agricultural productivity by state for 2004, using a green sequential color scale to represent productivity values. The visualization loads US state boundaries from a GeoJSON file and joins them with productivity data from a CSV file. A quantize color scale maps productivity values to five shades of green, from light (low productivity) to dark green (high productivity). States without data are rendered in gray. The map uses the Albers USA projection and is built with D3 v3, following a pattern forked from several prior blocks.

Nov 24, 2016
Loading thumbnail…

Gist 5e61b60f44bcf4875764ebf11683377c

This choropleth map visualizes agricultural productivity across the United States in 2004, with each state colored according to its productivity value. The visualization uses D3 v3's Albers USA projection to render the map and a quantized color scale ranging from light green (low values) to dark green (high values). States are colored by joining CSV data with GeoJSON features by state name; states without data appear gray. A simple legend is absent, but the color scale is defined by the minimum and maximum productivity values in the dataset.

Nov 24, 2016
Loading thumbnail…

test overflow

A short red sidebar hosts a vertical list of repeated French words, demonstrating how SVG text elements render beyond their container. The visualization uses D3 v4 to bind an array of string values to text elements inside a fixed-width SVG group, with each label positioned at increasing y-coordinates. The code explicitly sets the sidebar’s height to 100%, yet the appended texts overflow visually, showing that D3 does not clip or wrap text by default. This example illustrates basic data binding and manual text placement via the `attr` method without layout constraints.

Nov 20, 2016
Loading thumbnail…

fresh block

A small multiple line chart shows monthly values for a single series across twelve months, with grey circles marking each data point. Hovering over a circle highlights it in red, brings it to the front, draws a dashed vertical guide line to the baseline, and animates a large value label near the point. Built with D3 v3, the visualization uses an ordinal x-scale for month names, a linear y-scale for values, and SVG paths, circles, and text elements. The data comes from a local JSON file with name, value, and date fields, parsed via `d3.time.format`.

Nov 17, 2016
Loading thumbnail…

fresh block

A monthly time-series line chart displays a dataset of twelve alphabetical categories (A–L) with associated values. The visualization uses an SVG line and red circular markers to trace value changes over time. Built with D3.js v3, it employs ordinal and linear scales, a line generator, and custom mouseover/mouseout interactions that highlight data points with blue fills, dashed vertical guide lines, and enlarged value labels. The chart reads from an external JSON file, rendering axis labels as text elements and supporting smooth transitions during hover effects.

Nov 17, 2016
Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of twelve monthly data points, where each point is marked by a red circle. The chart highlights the final value with a large number label and allows interactive exploration: hovering over a point turns it blue and draws a temporary vertical dashed line to the x-axis with the corresponding value displayed. The visualization is built with D3.js v3, using an ordinal scale for the x-axis (categories A–L) and a linear scale for the y-axis. Data is loaded from an external JSON file via `d3.json`, and the line, circles, and text are rendered as SVG elements with CSS transitions for hover effects.

Nov 17, 2016
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.

Nov 10, 2016