Skip to main content
Log in
I

IzaskunLS

@IzaskunLS·12 public vizzes

Loading thumbnail…

RESIDUOS

This visualization displays the composition of waste found on beaches, using a bubble chart where each circle represents a specific item and its size corresponds to the count of that item found. The data is grouped and colored by its broader category, such as plastics, paper, or metal, and hovering over a bubble reveals its exact category, subcategory, and count. The chart is built with D3.js v4, using the `d3.pack()` API to create the circle-packing layout and scaling the radii from the data's `N_item` values. The visualization also includes interactive mouseover effects that enlarge the circle and display a tooltip with the waste details, all rendered as SVG elements with custom styling and transitions.

May 1, 2017
Loading thumbnail…

RESIDUOS

A bubble chart visualizes the数量和类型 of abandoned waste items found on beaches, sourced from the MARNOBA_Muestreos.csv dataset. Each bubble represents a specific item, color-coded by its broader category, such as plastic, metal, or paper. The visualization uses d3.pack and d3.hierarchy to compute the bubble layout, with hover events triggering a tooltip that displays the item's category, subcategory, and count. The SVG is styled with the Amatic SC font and an animated transition enlarges bubbles on mouseover.

May 1, 2017
Loading thumbnail…

RESIDUOS

A circular bubble chart displays the abundance of different litter categories found on beaches. Each bubble represents a specific item, with its size proportional to the count of objects collected and its color indicating the broader material category, such as plastic or metal. The visualization uses D3 v4's pack layout and hierarchy functions to arrange the circles. Hovering over a bubble triggers a tooltip that reveals the item's category, subcategory, and exact count, using D3 transitions to highlight the selected bubble. The source data is a CSV file of beach litter samples.

May 1, 2017
Loading thumbnail…

RESIDUOS

This visualization shows the different types of waste found on beaches, categorized by material and item, using a bubble chart. The size of each circle corresponds to the number of items found, and the color indicates the category (e.g., plastic, metal). The code uses the `d3.csv` and `d3.hierarchy` APIs to process the data, while the `d3.pack()` layout arranges the bubbles. Hovering over a circle triggers a tooltip that displays the specific category and count. The chart is rendered as an SVG with animated mouseover effects.

May 1, 2017
Loading thumbnail…

RESIDUOS

This visualization displays the composition of waste found on beaches, using a bubble chart where each circle represents a specific item and its size corresponds to the count of that item found. The data is grouped and colored by its broader category, such as plastics, paper, or metal, and hovering over a bubble reveals its exact category, subcategory, and count. The chart is built with D3.js v4, using the `d3.pack()` API to create the circle-packing layout and scaling the radii from the data's `N_item` values. The visualization also includes interactive mouseover effects that enlarge the circle and display a tooltip with the waste details, all rendered as SVG elements with custom styling and transitions.

May 1, 2017
Loading thumbnail…

RESIDUOS

This visualization shows what types of waste are abandoned on beaches, using a bubble chart where each circle represents a specific item category. The size of each circle corresponds to the number of items found, and colors distinguish waste categories such as plastic, metal, paper, and sanitary products. The code uses D3.js v4 with the `d3.pack` layout to create the circle packing, and `d3.scaleOrdinal` with `d3.schemeCategory20` for coloring. The data comes from a CSV file of beach sampling counts. Interactive mouseover effects enlarge circles and display a tooltip with the category, subcategory, and item count.

May 1, 2017
Loading thumbnail…

MARNOBA_practica4

A circular packing visualization displays the relative abundance of marine debris items collected from Spanish beaches, using encoded categorical colors and proportional circle sizes. The dataset, loaded from a CSV file with d3.csv, classifies each item by category such as Plastic/Polystyrene or Metal. The code uses d3.pack and d3.hierarchy to compute the layout, while circles enlarge and show tooltips on mouseover. Text labels are clipped inside each circle, and animation transitions highlight selected nodes. The visualization uses an ordinal color scale and SVG rendering.

May 1, 2017
Loading thumbnail…

mundo

This visualization presents a scatter plot of global development indicators, showing the relationship between literacy rates and internet usage across countries in 2015. Circle size encodes population, while color distinguishes the country’s region. The chart loads data from a CSV file using `d3.csv`, filters out missing values, and applies linear scales for the axes and a square-root scale for the radii. SVG circles are appended with `d3.selectAll` and styled with an ordinal color scale to group world regions.

Apr 30, 2017
Loading thumbnail…

mundo

This visualization presents a scatter plot of global development indicators, showing the relationship between literacy rates and internet usage across countries in 2015. Circle size encodes population, while color distinguishes the country’s region. The chart loads data from a CSV file using `d3.csv`, filters out missing values, and applies linear scales for the axes and a square-root scale for the radii. SVG circles are appended with `d3.selectAll` and styled with an ordinal color scale to group world regions.

Apr 30, 2017
Loading thumbnail…

marnoba

This example shows a bubble chart of fruit quantities, with each fruit represented as a colored circle sized by its amount and labeled with its name. The visualization loads data from a CSV file and renders it as an SVG using the D3.js v4 `d3.layout.pack` API to compute the circle packing layout. Each bubble’s fill color is assigned via the `d3.scale.category20b()` color scale, and text labels are positioned at each circle’s center. The entire chart is drawn within a 500-pixel square SVG element.

Apr 30, 2017
Loading thumbnail…

D3 Test

This example displays a simple SVG canvas with a single text message reading “Edit the code below to change me!” positioned near the top-left of a 960-by-500 pixel frame. The code uses d3.select to append an SVG element to the body, then chains an svg.append operation to create the text node. Styling is applied directly via .style attributes for font size and family. The script relies on D3 v4, loaded from the d3js.org CDN, and serves as a minimal starting point for interactive visualization development.

Apr 9, 2017
Loading thumbnail…

fresh block

This visualization displays a placeholder message on a blank canvas. It uses the D3.js version 4 library to select the body element, append an SVG container with fixed dimensions, and add a text element. The text is positioned using `attr("y")` and `attr("x")` and styled with a large monospace font. The code sets up a static text label as a starting point for editing, without any data binding or interactive features.

Apr 8, 2017