Skip to main content
Log in
P

PabloReyesBetanzo

@PabloReyesBetanzo·24 public vizzes

Loading thumbnail…

Making a Bar Chart

This bar chart ranks the populations of twenty countries, with horizontal bars sorted from most to least populous. The chart loads data from a CSV file and uses D3 v5’s `csv`, `scaleLinear`, and `scaleBand` to compute the scales, then renders rectangles as SVG elements. Axes are drawn with `axisLeft` and `axisBottom`, and each bar’s fill color is set to steel blue via CSS.

Dec 27, 2018
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, with country names on the y-axis and population on the x-axis, using a red fill for each bar. It customizes the axes by removing domain lines and tick marks from the left axis, while the bottom axis uses a tick format that converts "G" (giga) to "B" (billion) via `d3.format`. The chart is rendered in SVG using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, with data loaded from a CSV file.

Dec 27, 2018
Loading thumbnail…

MultiLine Chart

This multi-line chart displays temperature measurements over time for multiple cities, with each city represented by a distinct colored line. The visualization uses d3.csv to load the dataset and d3.nest to group data by city, then renders smooth curves with d3.line and curveBasis. Axes are created using d3.axisLeft and d3.axisBottom, with scales from d3.scaleTime and d3.scaleLinear, while colors are assigned via d3.scaleOrdinal with schemeCategory10. SVG rendering with grid lines and axis labels completes the chart.

Dec 1, 2018
Loading thumbnail…

Line Chart

This example visualizes the temperature in San Francisco over time using a smooth, orange line chart generated with D3.js v5. The SVG rendering displays time on the x-axis and temperature on the y-axis, with styled axis labels and a title. The code fetches data from a CSV file, scales the axes with `scaleTime` and `scaleLinear`, creates grid lines via `axisBottom` and `axisLeft`, and draws the curve using the `line` and `curveBasis` functions.

Nov 23, 2018
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, with dropdown menus to select which columns to plot on the x and y axes. The visualization uses D3 v5's scaleLinear and extent functions to compute axes and transitions to animate circles smoothly to their new positions when the user changes the menu selection. SVG rendering with CSS-styled ticks, grid lines, and axis labels supports the clean presentation.

Nov 23, 2018
Loading thumbnail…

Car Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a collection of cars, with each vehicle represented by a semi-transparent red circle. The visualization uses a D3.js v5 SVG rendering pipeline, employing `scaleLinear` for coordinate mapping, `axisLeft` and `axisBottom` for the chart axes, and `extent` to determine the data domains. The underlying dataset is loaded via the `csv` function from auto-mpg data, and axis labels and a title are annotated using D3’s text elements.

Nov 23, 2018
Loading thumbnail…

[REDO] Interactive Filtering

A choropleth map of world countries colored by economic classification demonstrates an interactive filtering technique. Users can click a legend to highlight matching countries while dimming others, with a second click restoring full visibility. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render country boundaries, while a custom colorLegend component manages the categorical color scale. Input data comes from the world-atlas TopoJSON and TSV files, processed through the topojson feature API.

Nov 21, 2018
Loading thumbnail…

World Pop. Area Chart

This area chart depicts global population trends over time, using a smooth, curved line to fill the space beneath the data series. Built with D3 v5, the visualization encodes the year on a time-scaled x-axis and population on a linear y-axis, with the area filled in orange. The chart draws from a CSV dataset of world population by year, loaded via D3's `csv` function. The axes are rendered with `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom`, while the area path is generated using the `area` generator with `curveBasis`. The visualization labels its axes "Year" and "Population" and omits grid lines for clarity.

Nov 20, 2018
Loading thumbnail…

[TEST] Pie Chart

This pie chart displays the distribution of credit rating categories, sourced from local and international classifications, with "AAA Local" dominating at over 73%. Built with D3 v5, it uses the `pie` and `arc` APIs to generate SVG paths with an ordinal color scale. A legend, created with `scaleOrdinal`, lists each label and its corresponding percentage, formatted using `format`. The chart is rendered from `data.json`, with values converted to numbers before plotting.

Nov 20, 2018
Loading thumbnail…

Chropleth Map

This choropleth map visualizes countries colored by their economic group, using the `d3.geoPath` projection to render the world and a `d3.scaleOrdinal` color scale with `d3.schemeSpectral`. Country data comes from a TopoJSON world atlas, enriched with a TSV file for metadata. A custom legend component displays the color categories, and a `d3.zoom` interaction updates the map’s transform. Hovering over a country reveals its name and economic group via an SVG `title` element.

Nov 15, 2018
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom D3.js legend components rendered as SVG. A color legend uses `scaleOrdinal` with categorical domains to map fruit names to distinct colors, while a size legend uses `scaleSqrt` to map a numeric range to circle radii. Both legends are built by dynamically appending `g` groups with circle and text elements, using D3's enter/merge/exit pattern for updates. The code relies on D3 v5 selection methods and scale APIs to generate the visual encodings.

Nov 11, 2018
Loading thumbnail…

General Update Pattern / Nested

This example demonstrates the general update pattern for nested data structures by animating a bowl of fruit over time. The visualization renders a row of apples and lemons as SVG circles with labels, updating the scene through sequential JavaScript timeouts that remove, replace, and filter elements from the fruit array. The code uses d3’s selection methods such as `data()`, `enter()`, `merge()`, and `exit()` to manage the lifecycle of grouped elements, along with `scaleOrdinal` for mapping fruit types to colors and radii.

Nov 9, 2018
Loading thumbnail…

World Countries Tree

A hierarchical tree visualization displays the world’s countries grouped by continent and subregion, with each node labeled by name. The layout uses D3’s `d3.tree` and `d3.hierarchy` to position nodes, while `d3.linkHorizontal` generates curved connecting paths. Text size decreases with depth, and labels are anchored differently for parent versus child nodes. The SVG rendering supports interactive pan and zoom via D3’s `d3.zoom`, with styling provided by an external stylesheet using the Playfair Display font.

Nov 9, 2018
Loading thumbnail…

Blank Canvas

This visualization shows a blank, full-window SVG canvas with no data or elements rendered. The page simply adapts to the browser viewport by setting the SVG width and height to the body’s dimensions using the `d3.select` API and its `.attr` method. The code initializes an empty SVG element, relying on CSS for full-height layout, but does not draw anything or apply any interaction.

Nov 8, 2018
Loading thumbnail…

Let's Make a Map - Tricks

This interactive map uses a natural Earth projection to display world countries, with oceans rendered in dark blue and landmasses in light green that turn red on hover. Built with D3 v5 and the TopoJSON library, it loads geographic data from the world-atlas package, merging TopoJSON country features with a TSV file to attach country names as tooltips. The visualization supports zooming through D3’s zoom module, which updates the SVG group’s transform on pan and scale events.

Nov 8, 2018
Loading thumbnail…

Let's Make a Map

This example shows a world map rendered as a three-dimensional globe using an orthographic projection. The sphere is filled dark blue, while country boundaries appear in light green with subtle black strokes, all drawn as SVG paths. The code uses d3.geoOrthographic and d3.geoPath to project and trace the map, with data loaded from the world-atlas TopoJSON file. TopoJSON’s feature method extracts country geometries, and each is appended as an SVG path inside a fixed 960×500 canvas.

Nov 8, 2018
Loading thumbnail…

Bowl of Fruit - Hover to select

Five circles move into place as a bowl of fruit, alternating red apples and a yellow lemon, while hovering over any circle selects it with a black outline and animates its position and size. The example uses d3.v5’s scaleOrdinal for color and radius mappings, with circle transitions driven by the merge and transition API, and data updates via setTimeout that remove and replace elements, triggering enter, update, and exit animations.

Nov 8, 2018
Loading thumbnail…

Bowl of Fruit - Click to select

Five colored circles represent apples and lemons in a bowl. Clicking a fruit selects it with a black outline. The visualization animates changes, with new fruits growing from a radius of zero and removed fruits shrinking away. Built with D3 v5, the code uses `scaleOrdinal` for color and radius mapping, while SVG circle transitions handle the enter, update, and exit animations.

Nov 8, 2018
Loading thumbnail…

General Update Pattern

The example code demonstrates the general update pattern for dynamic data in D3.js, where elements are added, removed, and modified in a live visualization. It shows a collection of circles representing apples and lemons, which are inserted, deleted, and changed in place over time. The implementation uses `selection.selectAll`, `.enter()`, `.merge()`, and `.exit()` to manage the lifecycle of SVG circle elements. It leverages D3's `scaleOrdinal` for color and radius mapping, and applies animated transitions with a 1000-millisecond duration via `.transition()`. The data is generated randomly using `range` and `Math.random()`.

Nov 8, 2018
Loading thumbnail…

Area Chart

This chart visualizes temperature readings from San Francisco over time using an area fill beneath a smoothed curve. Temperature is plotted on the y-axis against timestamps on the x-axis, with the area colored orange and labeled axes for clarity. The visualization is rendered with SVG using D3 v5, leveraging `scaleTime` and `scaleLinear` for scaling, `area` with `curveBasis` for the smoothed area path, and `axisBottom`/`axisLeft` for the ticks. The data is loaded from a CSV file, with numeric temperature values and parsed dates.

Nov 5, 2018
Loading thumbnail…

Temp in SF Scatter Plot

This scatter plot visualizes temperature readings in San Francisco over time, with each orange circle representing a data point. The chart displays time on the x-axis and temperature on the y-axis, using D3.js v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and gridlines. The visualization is rendered as SVG, with the dataset fetched from a CSV file on VizHub. The code removes default axis domain lines and adds custom labels for both axes and a title, while circle elements are positioned using the computed scales.

Nov 4, 2018
Loading thumbnail…

Hello VizHub

A minimalist SVG showcase of basic geometric shapes, including circles, rectangles, lines, and a polyline path, demonstrates how SVG elements can be styled and grouped. The graphic uses nested `<g>` elements with transformations and explicit CSS classes to apply stroke, fill, and stroke-width properties. The first group scales the entire drawing by 1.25, while a second translated group adds blue fills with black outlines. The `.lines` class in the accompanying stylesheet defines black strokes for all contained elements, with the path specifically overridden to red and rounded line joins. This example illustrates fundamental SVG composition and CSS styling patterns without external libraries.

Nov 4, 2018
Loading thumbnail…

Let's Make a Face

This example builds a smiling face from basic SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a semi-circular mouth drawn with `d3.arc`. The eyebrows animate upward and back down using chained `transition().duration()` calls on a `<g>` element. The code uses D3 v5 selection methods and `d3.arc`, with the face centered via a translation transform. The animation runs once on load, and no data source is involved.

Nov 4, 2018
Loading thumbnail…

Scatter Plot

This scatter plot shows the population of eight countries, with each circle positioned vertically by country name and horizontally by population size on a linear scale. The visualization uses d3.csv to load data, d3.scaleLinear for the x-axis, d3.scalePoint for the y-axis, and d3.axisLeft and d3.axisBottom for ticks. Circles are appended as SVG elements with a fixed radius, and axes include custom tick formatting that converts values to billions using d3.format.

Nov 3, 2018