Guillamon

@Guillamon·14 public vizzes

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 with special cases for handling data changes. It shows a bowl of fruit rendered as SVG circles and text labels, where apples and lemons are added, removed, and modified over time. The code uses `selection.enter()`, `selection.merge()`, and `selection.exit()` to manage entering and exiting elements, with `d3.scaleOrdinal` mapping fruit types to colors and radii. A timed sequence updates the data array, triggering re-renders that add, replace, or remove fruit items.

Apr 22, 2020

Loading thumbnail…

STOCK EXPIRATION (MODIFYING TOOLTIP)

This treemap visualizes stock inventory by product category, brand, and lot, with rectangle sizes proportional to remaining quantities. The tooltip displays detailed lot information, including expiration dates and remaining days. Built with D3 v4, the visualization uses the `d3.nest` and `d3.hierarchy` APIs to structure hierarchical data, `d3.treemap` for layout, and custom scales for color-coding items by alert level. SVG rendering and interactive hover effects are implemented through CSS transitions.

Mar 31, 2020

Loading thumbnail…

STOCK EXPIRATION (SIMPLIFYING)

A hierarchical treemap visualizes stock expiration data, grouping products by brand, category, and lot, with rectangle size reflecting quantity. The view is interactive, allowing users to click parent nodes to drill down into subcategories. Built with D3.js v4, it uses `d3.treemap`, `d3.hierarchy`, and `d3.nest` to structure the data. Color scales encode alert levels and expiration urgency. SVG rendering with hover tooltips displays details. The hierarchy is derived from a CSV with dimensions like item name and expiration days.

Mar 30, 2020

Loading thumbnail…

STOCK EXPIRATION (MODIFYING TOOLTIP)

This interactive treemap visualizes stock expiration data from a CSV, using rectangle size to represent quantities and color to encode alert levels. The hierarchical layout, built with `d3.hierarchy` and `d3.treemap`, lets users click through levels from brand to item to lot. A custom tooltip, styled with CSS and shown on hover, displays detailed metrics like remaining days and lot percentages. The chart uses SVG rendering and smooth transitions via D3’s animation capabilities, with color scales defined per hierarchy level.

Mar 30, 2020

Loading thumbnail…

Untitled

This zoomable treemap visualizes hierarchical data with interactive drill-down navigation. The chart renders rectangles sized by a primary measure, with a grandparent breadcrumb bar at the top for navigating back through levels. Hovering highlights child rects and displays a custom light-blue tooltip with additional metrics. The implementation uses `d3.hierarchy`, `d3.treemap`, and SVG animations, while the data is preprocessed through `d3.nest` to build the nested structure from flat records.

Mar 28, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the top ten most populous countries, based on 2018 estimates from the United Nations’ World Population Prospects. The visualization uses D3 v5 to draw SVG rectangles, with a linear scale mapping population values to bar widths and a band scale positioning countries along the vertical axis. It customizes the axis components using `axisLeft` and `axisBottom`, and applies D3’s `scaleLinear`, `max`, and `csv` data-loading methods.

Mar 13, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City dataset. It displays temperature in degrees Celsius over time, using a smoothed line curve to show trends. The visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis`. Data is loaded via `csv` and rendered as an SVG, with gridlines, axis labels, and a title.

Mar 12, 2020

Loading thumbnail…

EXPLORING BAR CHART

This interactive bar chart visualizes population data for ten countries, displaying values horizontally with a logarithmic scale. The chart uses D3 v5 to render SVG graphics, with mouseover effects that display tooltips showing country names and population figures. Users can click bars to select them, changing their color from green to pink, while the entire visualization updates with smooth transitions. The code references D3's scaleLinear, scaleBand, and axis functions, along with custom mouse event handlers adapted from a Medium tutorial.

Mar 11, 2020

Loading thumbnail…

Untitled

This interactive treemap visualizes a hierarchical dataset with nested rectangles sized by a primary numeric measure and colored by a secondary metric. Users can hover over nodes to see tooltips with additional data, while clicking parent and grandparent rectangles zooms into deeper levels of the hierarchy. Built with D3 v4, the implementation uses `d3.hierarchy`, `d3.treemap`, and `d3.nest` to aggregate data, with SVG rendering and smooth transitions between zoom states. The hover effects and tooltip functionality are implemented with CSS and JavaScript event handlers.

Nov 25, 2019

Loading thumbnail…

Untitled

Nov 25, 2019

Loading thumbnail…

STOCK EXPIRATION

This visualization displays the expiration of stock items as an interactive treemap, showing hierarchical relationships across product levels with rectangle sizes scaled by a chosen measure such as budget. Users can zoom into different levels, with each level assigned its own color scale to encode a secondary metric like remaining days. Built with d3.v4, the example uses `d3.hierarchy`, `d3.treemap`, and `d3.nest` to structure the data, while SVG elements and animations support the zoom transitions. Hovering reveals tooltips with detailed information about each item.

Nov 25, 2019

Loading thumbnail…

EXPLORING BAR CHART (tooltip with foreignobject)

This bar chart visualizes the population of the ten most populous countries using D3.v5 with SVG rendering and animation. It displays a horizontal bar chart with a green fill, showing population values on the x-axis and country names on the y-axis. Hovering over a bar triggers a tooltip rendered through a `foreignObject` with HTML content, displaying the country name and its population. The tooltip appears near the cursor, and the chart also includes gridlines with dashed styling. Data comes from a static CSV file.

Nov 20, 2019

Loading thumbnail…

EXPLORING BAR CHART v3

This bar chart displays population estimates for ten countries, using a horizontal layout with a linear x-scale and a band y-scale. A tooltip appears on mouseover, showing each country’s name and population, positioned dynamically near the cursor. The chart also includes formatted tick labels and dashed gridlines. Built with d3.v5, the visualization uses SVG rendering, d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft, with mouseover and mouseout event handlers to control tooltip opacity and positioning.

Nov 19, 2019

Loading thumbnail…

EXPLORING BAR CHART v2

A sorted horizontal bar chart compares population counts for ten countries from a CSV file. Bars render in SVG with a green fill, and hovering highlights a bar while a tooltip div shows the country name and population. A click toggles bar color between green and magenta, and the chart calculates and displays a sum of all selected populations in a separate box. The visualization uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and d3.axisBottom with dashed gridlines. Tooltip and selection logic rely on D3’s `.on('mouseover')`, `.on('mouseout')`, and `.on('click')` event handlers, with transitions animating the color changes.

Nov 18, 2019