Skip to main content
Log in
M

Maeva B

@Boubie·16 public vizzes

Loading thumbnail…

Donut Chart - Version 6 - Test

A donut chart displays the number of songs by language, with nine main categories and all remaining languages aggregated into an "Others" slice. Clicking this slice zooms in to reveal the individual languages within that group. The visualization uses D3.js v6 with `d3.pie` and `d3.arc` to generate SVG paths, a `d3.scaleOrdinal` with the Tableau10 color scheme, and custom tooltips for hover interactions. Data is loaded via `d3.json` from a local file.

Nov 23, 2022
Loading thumbnail…

BACKUP - Donut Chart - Version 6

This donut chart shows the distribution of song counts by language, displaying the nine most common languages as individual slices and grouping all remaining languages into a single “Others” segment. Clicking the “Others” slice replaces the main view with a zoomed-in pie chart breaking down those secondary languages individually. Built with D3.js v6, the visualization uses `d3.pie()` for arc generation, `d3.arc()` for the donut shape, and a `d3.scaleOrdinal()` with the Tableau10 color scheme. Data is loaded via `d3.json()` from a local file, and hover interactions trigger a custom tooltip div.

Nov 16, 2022
Loading thumbnail…

TD2 - dboard - Version prof

This dashboard displays sales data from a CSV file across four coordinated visualizations. It shows a geographic map of state-level sales using `d3.geoAlbersUsa` and `d3.geoPath`, an animated bar chart, a time-series scatter plot, and a donut chart of sub-category sales. The bar and scatter plots use transitioned axes, while the pie chart uses `d3.pie` and `d3.arc`. Built with D3 v6 and Vue, it renders SVG with tooltip interactions on hover.

Nov 16, 2022
Loading thumbnail…

BACKUP - Donut Chart - Version 6

This donut chart visualizes the popularity of languages in song lyrics, grouping the top five languages individually and aggregating all others into a single "others" slice. The chart uses D3 v6’s `d3.pie` and `d3.arc` generators to compute and render the SVG paths, with a color scale from `d3.schemeDark2` distinguishing each category. Labels and polylines are positioned using an outer arc generator and angle-based logic, with text placed either left or right depending on the slice’s midpoint angle. Data is loaded from a local JSON file.

Nov 15, 2022
Loading thumbnail…

Donut Chart v2 - Le bon qui fonctionne

A donut chart displays the popularity of languages in a song dataset, aggregating all categories beyond the top five into an "others" slice. The visualization uses D3.js v4 to generate SVG paths for the pie slices, with labels and connecting polylines positioned using the `d3.arc` centroid functions. The chart colors slices via `d3.scaleOrdinal` with the `schemeDark2` palette. Data is loaded from a local JSON file, and the code computes the pie layout with `d3.pie`, limiting displayed categories to five before grouping the remainder.

Nov 15, 2022
Loading thumbnail…

TEST - TD2 - dboard

This example shows a zoomable choropleth map of world countries, where each country’s fill color encodes its population estimate on a scale from light to dark red. The visualization is built with D3 v5, using `d3.geoMercator` for projection, `d3.geoPath` to render country outlines from TopoJSON data sourced from the world-atlas package, and `d3.scaleLinear` for the color mapping. A `d3.zoom` handler applies transforms to all country paths, and hovering a country displays its name as a tooltip. Population data comes from a TSV file loaded via `d3.tsv`.

Oct 10, 2022
Loading thumbnail…

TEST2 - TD2 - dboard

This dashboard displays a bar chart of sales totals plotted against product sub-categories, using a dataset of individual orders. Each bar's height reflects the sales value for its sub-category, with the SVG canvas also showing rotated category labels on a time-series axis. The visualization is rendered via Vue using D3 v5, parsing data from a CSV file. Tooltips appear on hover, displaying the category and sales value, while the chart is drawn with `d3.scaleBand` and `d3.scaleLinear` for the axes.

Oct 10, 2022
Loading thumbnail…

TD2 - dboard

This dashboard displays four distinct D3.js v5 visualizations in a grid layout, each rendering data from untracked sources. It includes interactive plots that respond to user actions, with a tooltip showing values on hover. The code uses D3 selections and scales, along with Moment.js for date handling, to build the charts. A custom tooltip element appears dynamically, while the grid container organizes the plots responsively. The bundle.js file, built from an ES6 module, initializes all visualizations and manages the shared tooltip behavior across the four chart areas.

Oct 3, 2022
Loading thumbnail…

BACKUP - Donut Chart v2 - Le bon qui fonctionne

A donut chart displays the popularity distribution of song lyrics across languages, aggregating the five most frequent languages (English, Spanish, German, French, Italian) into individual slices and grouping all remaining languages into an "others" slice. The chart uses d3.pie to compute arc angles and d3.arc to generate donut paths, with labels connected via polylines positioned using a second outer arc generator. Colors come from d3.schemeDark2 applied through a d3.scaleOrdinal, while data loads from a local JSON file via d3.json.

Sep 30, 2022
Loading thumbnail…

Fork of Donut Chart v2

This donut chart displays proportional data from a JSON file (data.json) with country names and numeric sums, rendered as an SVG using D3.js v4. The visualization uses a pie layout with a half-radius inner hole and divergent color scheme from d3-scale-chromatic. Labels are positioned outside the arcs using polyline connectors and text elements, with the arc generator determining slice geometry and outerArc handling label placement. The example demonstrates D3’s modular approach to building interactive, data-driven graphics.

Sep 28, 2022
Loading thumbnail…

Donut Chart v2

A donut chart displays country-level aggregated values, ranking the United States highest, followed by the United Kingdom and Germany, with each slice labeled and connected via polylines. Built with D3 v4 and SVG, it uses `d3.pie()` for slice generation, `d3.arc()` for inner and outer radii, and `d3.scaleOrdinal()` for colors. Data is loaded from `data.json` via `d3.json()`, and labels are positioned dynamically based on slice angles.

Sep 28, 2022
Loading thumbnail…

Fork of Donut Chart

This visualization uses an arc diagram to display the hierarchical composition of the Observable Flare dataset as a donut chart. Each ring segment represents a node, colored by its top-level category, with labels for smaller divisions. The chart is built with D3 v5’s `d3.partition` layout and `d3.arc` generator, rendering SVG paths and text elements. It loads data from the `@observablehq/flare` module and uses `d3.scaleOrdinal` with an interpolated rainbow palette for coloring.

Sep 28, 2022
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays the hierarchical structure of the Flare dataset, with each ring segment representing a category or subcategory sized by value. Clicking any arc zooms into that node, smoothly animating the layout so the selected subtree expands to fill the view. The chart is built with D3 v5 using the `d3.partition` layout and custom `d3.arc` paths, rendered as SVG with transitions driven by `transition.attrTween` and `d3.interpolate`. Labels rotate and fade based on visibility thresholds, while a central circle resets the view to the root.

Sep 28, 2022
Loading thumbnail…

Untitled

A bar chart displays the 2022 population of countries from a CSV dataset, with each country represented as a vertical bar along a band scale. The chart uses D3 v4 to load the data, create SVG elements, and render axes. Hovering over a bar triggers a tooltip that shows the country name and population, using D3 event handling to position and populate the tooltip dynamically.

Sep 26, 2022
Loading thumbnail…

Fork of barGraph

This bar chart example loads population data from a CSV file with d3.csv and renders a static set of rectangles using D3’s selection and data-join methods. The code imports `select` and `csv` from D3 v5, appends a group element to an SVG, and binds the dataset to `rect` elements with fixed width and height attributes. The visualization displays each country’s population values from the 2022 column, though the chart does not scale the bars to the data values and only logs the country names and populations to the console.

Sep 19, 2022
Loading thumbnail…

Fork of MIAGE base

This example uses D3.v5 to render an interactive SVG scene with three circles and a clickable rectangle. It demonstrates importing D3’s `select` API and a custom ES6 module (`myMessage.js`) to display text. Circle interactions include a mouseover/mouseout fill change and a two-stage `transition()` animation triggered by clicking the rectangle, moving the green circle along a translated path. The chart is static data-less, with rendering handled through SVG attributes and CSS hover styles.

Sep 19, 2022