Skip to main content
Log in
B

bambaleq

@bambaleq·20 public vizzes

Loading thumbnail…

Unique countries map

A world map highlights countries frequented by travelers, coloring them green while leaving others gray. The visualization uses a Mercator projection rendered as SVG paths via `d3.geoPath`, with zoom and pan enabled through D3's `zoom` behavior. Geographic data comes from TopoJSON world-atlas, merged with country attributes from a TSV file and a custom list of ISO country codes to determine which nations receive the highlight.

Mar 5, 2020
Loading thumbnail…

Untitled

A choropleth map colors countries according to the number of students per country, with a sequential red color scale and a legend showing count ranges. The visualization uses D3 v5’s `d3.geoMercator` projection and `d3.geoPath` to render world topology from the World Atlas TopoJSON, while data from a TSV file is joined to country features. Country boundaries are styled with white strokes, and hovering highlights the selected country.

Mar 4, 2020
Loading thumbnail…

Let's make a map

This map visualizes country data, coloring each nation according to its economic classification. It uses a dark blue sphere background and interactive pan and zoom capabilities. The code loads geographic boundaries from `world-atlas` and enriches them with economic data from a TSV file, rendering everything as SVG paths. It relies on D3’s `geoPath`, `geoMercator`, and `scaleOrdinal` to project the map and color the countries.

Mar 4, 2020
Loading thumbnail…

Choropleth map

This choropleth map visualizes world countries using D3.js and the topojson library, rendering geographic boundaries as SVG paths. It displays country names as tooltips on hover, with countries filled red against a steel-blue ocean background. The visualization loads geographic data from the world-atlas package, combining 50m.tsv metadata with 50m.json topology, and processes it using D3’s file-loading utilities and TopoJSON’s feature conversion. The map uses a Mercator projection and includes pan and zoom functionality through D3’s zoom interaction handler.

Mar 3, 2020
Loading thumbnail…

Color and size legend

This example demonstrates two reusable legend components: a color legend mapping ordinal categories to distinct hues, and a size legend using a square-root scale to encode numeric values through circle radii. The color legend displays fruits with colored circles, while the size legend renders circular markers with labels positioned beyond each circle. Both legends use D3 v5 scales and SVG rendering, with React-styled selection/merge patterns for dynamic updates. The size legend uses `sizeScale.ticks()` to generate evenly spaced values for its circles.

Feb 24, 2020
Loading thumbnail…

World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, using a left-to-right node-link diagram. The d3.js library builds the tree layout, positions nodes with `tree()` and `hierarchy()`, and draws curved link paths via `linkHorizontal()`. Node labels are placed at varying font sizes based on their depth. The data is loaded from a local `data.json` file and rendered as an SVG, with zoom functionality enabled through a d3 zoom event handler.

Feb 23, 2020
Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the browser window, resizing to match the viewport’s width and height. Using d3-selection, the code selects the SVG element and appends a single rect with a 40-pixel corner radius. The visualization demonstrates a minimal setup with D3 v5 and an SVG rendering approach, outputting the page dimensions to the console.

Feb 23, 2020
Loading thumbnail…

Choropleth map

This choropleth map visualizes world countries using D3.js and the topojson library, rendering geographic boundaries as SVG paths. It displays country names as tooltips on hover, with countries filled red against a steel-blue ocean background. The visualization loads geographic data from the world-atlas package, combining 50m.tsv metadata with 50m.json topology, and processes it using D3’s file-loading utilities and TopoJSON’s feature conversion. The map uses a Mercator projection and includes pan and zoom functionality through D3’s zoom interaction handler.

Feb 3, 2020
Loading thumbnail…

Let's make a map

This example displays an interactive world map rendered as SVG, with countries shaded in light gray and oceans in steel blue. The visualization uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to draw geographic boundaries from TopoJSON data supplied by the world-atlas package. Country names are loaded from a TSV file and shown as tooltips using SVG `<title>` elements. The map supports pan and zoom through `d3.zoom`, which applies an SVG transform to the grouped map elements on interaction.

Jan 23, 2020
Loading thumbnail…

Bowl of fruit, general update Pattern

This example demonstrates the general update pattern in D3.js, showing a bowl of fruit as circles that change over time. Initially five apples appear, then one is removed, another changes to a lemon, and a second apple is eaten. The visualization uses d3.scaleOrdinal for color and radius mapping, with enter, merge, and exit selections to handle dynamic data updates. Rendered as SVG in a React framework with d3.v5, the code also includes a static bowl shape drawn as a rounded rectangle.

Jan 20, 2020
Loading thumbnail…

World Population Area Chart

This area chart depicts world population growth over time, with the x-axis showing years and the y-axis displaying population in billions. The chart uses a smooth curved area fill in maroon, drawn as an SVG path. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` to generate the visualization. Data comes from a CSV file loaded via `csv`, with population values parsed as numbers and years as JavaScript `Date` objects.

Jan 20, 2020
Loading thumbnail…

Customizing Axis

This example displays a horizontal bar chart of the top ten most populous countries, using a custom logarithmic-like axis that converts large numbers into abbreviated forms like "1.41B." The SVG visualization is built with D3 v5, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the population x-axis. It loads data from a CSV via `d3.csv`, and customizes both axes by removing default domain lines and applying a tick format that replaces "G" with "B" for billions. The chart includes labeled axes and a title.

Jan 20, 2020
Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes a week of temperature data in San Francisco, showing how temperatures fluctuate over time. The visualization uses an SVG rendered with D3 v5, employing `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to create a smooth filled path. Data is loaded from a CSV file and parsed with timestamps and numeric temperature values. The chart includes axis labels, gridlines, and a title, with the area fill and stroke rendered in maroon.

Jan 20, 2020
Loading thumbnail…

Temperature in San Franisco Line Chart

This line chart displays the weekly temperature variation in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` generator with `curveBasis`, and `axisLeft`/`axisBottom` to render the smooth path and labeled axes. Data is loaded asynchronously from a CSV file and parsed into `Date` objects before being passed to the render function. The SVG output includes gridlines and a title, with the line path styled in maroon.

Jan 20, 2020
Loading thumbnail…

Temperature in San Franisco Scatter Plot

This scatter plot displays a week of San Francisco temperature readings over time, with each circle representing a data point. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` to map timestamps and temperatures to SVG coordinates, while `axisBottom` and `axisLeft` generate the labeled axes. Data is loaded as CSV via D3’s `csv` method, with timestamps parsed into date objects and temperatures converted to numbers. Circle positions and radii are set directly on SVG elements, and margin-based scaling ensures the plot fits the 960x500 viewport.

Jan 20, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot from the auto-mpg dataset visualizes the relationship between car horsepower and weight. The graph uses a linear scale for both axes, with each vehicle represented as an orange circle. The chart includes axis labels, a title, and grid lines. The code employs d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to construct the scales and axes, and renders the plot as an SVG using the select and append methods.

Jan 20, 2020
Loading thumbnail…

Auto MPG Summary

This example summarizes the Auto MPG dataset from the UCI Machine Learning Repository by displaying the dataset’s row count, column count, and size in kilobytes, followed by the first 10 rows as JSON. The visualization uses D3 version 5 APIs including `select`, `csv`, and `csvFormat` to fetch and process the data, then appends text elements to the HTML body. The output is styled with monospace text on a black background, using green terminal-like aesthetics.

Jan 19, 2020
Loading thumbnail…

Customizing Axis

This example shows a horizontal dot plot of the top 10 most populous countries, with each circle’s position encoding population size and country name on the y-axis. The chart uses d3.scaleLinear, d3.scalePoint, d3.axisBottom, and d3.axisLeft, with custom tick formatting that abbreviates large numbers using d3.format and replaces “G” with “B”. Gridlines are created by negative tick sizes, and axis domains are removed. Data comes from a CSV file, rendered as SVG.

Jan 18, 2020
Loading thumbnail…

Bar Chart

This bar chart displays the populations of ten countries, from the most populous (China) to the least (Mexico). It uses D3 v5 with an SVG rendering, employing `scaleLinear` for the horizontal value axis and `scaleBand` for the categorical country axis. Data is loaded from a CSV file, and population values are multiplied by 1,000 for display. The chart includes axes generated via `axisLeft` and `axisBottom`.

Jan 18, 2020
Loading thumbnail…

Let's make a face

A cartoon face made of geometric shapes is drawn in an SVG canvas, with a yellow circle for the head, two circles for eyes, and an arc-based path for the mouth. The eyes and eyebrows are grouped and repositioned via chained D3 transitions, causing the eyebrows to animate up and down. The example uses the D3 v5 `select`, `arc`, and `.transition().attr()` APIs within a React framework to demonstrate simple SVG animation and attribute interpolation.

Jan 18, 2020