Skip to main content
Log in
J

JuanmaBV

@juanmabv·20 public vizzes

Loading thumbnail…

area plot population 3d

This visualization displays the growth of world population from 1960 to 2018 using a smooth area chart. The graphic encodes time on the x-axis and population count on the y-axis, with the filled area beneath the curve emphasizing the overall upward trend. The chart is rendered as an SVG using D3 v7, employing `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth path. Data comes from a CSV file containing annual global population figures, with axis labels and a title in Spanish.

Feb 14, 2023
Loading thumbnail…

area plot 3d

This area plot visualizes hourly temperature readings in San Francisco over a week, with the filled area beneath a smooth curve showing temperature fluctuations. Built with D3 v7, the code loads data from a CSV file, uses `scaleTime` and `scaleLinear` for axes, and renders the area via the `area` generator with a `curveBasis` smoothing function. The SVG output includes labeled axes and a title.

Feb 13, 2023
Loading thumbnail…

line and bar plot 3d

This visualization shows the temperature in San Francisco over a week using a combined line and bar chart. The data, sourced from a CSV file, is plotted over time with the line tracing temperature trends and maroon bars indicating individual readings. The D3.js code uses `scaleTime` and `scaleLinear` to map data, with `line` and `curveBasis` for the path, and `axisBottom` and `axisLeft` for labeled axes. Rendered as SVG, the chart includes a title, axis labels, and grid lines.

Feb 13, 2023
Loading thumbnail…

line plot 3d

This example visualizes the temperature in San Francisco over a week using a 3D line plot rendered with SVG. It shows the temperature fluctuations over time, with the line path smoothed using a basis curve. The visualization is built with D3.js v7, utilizing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs. The data is loaded from a CSV file containing timestamps and temperature readings, and the plot includes labeled axes for date and temperature.

Feb 13, 2023
Loading thumbnail…

Scatter plot date 3d

This example visualizes temperature readings in San Francisco over a week using a scatter plot. The x-axis shows the date and time, while the y-axis displays the temperature in degrees, with each point representing an hourly measurement. The visualization is rendered using D3 v7, employing `scaleTime` and `scaleLinear` for the axes, and `axisBottom` and `axisLeft` for the grid lines. The data is loaded from the `week_temperature_sf.csv` file, and the points are drawn as circles with a fixed radius.

Feb 13, 2023
Loading thumbnail…

Scatter plot 3d (2)

This scatter plot, created with D3.js (v7), visualizes the relationship between fuel efficiency (mpg) and horsepower for a dataset of cars from the UCI Machine Learning Repository's Auto MPG dataset. Each car is represented as a red circle, with its position determined by these two variables. The visualization uses D3's `scaleLinear` for both axes, `axisBottom` and `axisLeft` for the chart's axes, and `extent` to compute the data domains. The graphic is rendered as an SVG, with the code parsing the CSV data and displaying the plot with a title and axis labels.

Feb 13, 2023
Loading thumbnail…

Scatter plot 3d (1)

This example shows the population sizes of the world’s ten most populous countries in 2018, plotted as circles along a horizontal linear scale and a vertical point scale. Data comes from the World Population Prospects 2017 dataset. Using D3 v7, the code loads a CSV, formats population values, and renders an SVG with `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`. Circle radii are fixed, while tick lines extend across the chart to create a grid-like layout.

Dec 30, 2022
Loading thumbnail…

D3.js

A static bar chart displays four values by region, with the tallest bar representing China (12) and the shortest Germany (6). The visualization uses D3.js v5, loading data from a local JSON file via `fetch()` while also referencing a hardcoded `DUMMY_DATA` array. Scales are constructed with `d3.scaleBand` for x-axis positioning and `d3.scaleLinear` for y-axis values, rendering SVG rectangles with purple fill in a bordered container.

Dec 30, 2022
Loading thumbnail…

Customizing axes d3

This example shows a horizontal bar chart ranking the ten most populous countries in 2018 by population. The chart uses D3.js v7's `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with bars rendered as SVG `rect` elements. The x-axis employs `tickFormat` with the `.3s` format specifier, converting values into compact notation and replacing 'G' with 'B' for billions. Grid lines extend across the plot via `tickSize(-innerHeight)`, while the y-axis labels omit their domain line. Data comes from the World Population Prospects 2017 dataset, loaded as CSV with populations multiplied by 1000.

Dec 30, 2022
Loading thumbnail…

Bar chart d3

A horizontal bar chart displays the populations of the world's ten most populous countries for 2018, with data from World Population Prospects 2017. Built with D3 v7 and rendered as SVG, it uses `scaleLinear` for the population axis and `scaleBand` for the categorical country axis. Bars are drawn as SVG rectangles within a margin group, with `axisLeft` and `axisBottom` providing the chart's axes.

Dec 14, 2022
Loading thumbnail…

d3 course 1

This example renders a cartoon smiley face using D3.js v7 within an SVG canvas. The face is built from basic shapes—a yellow circle, black eyes, eyebrows, and an arc-based mouth—all positioned relative to the SVG's center. An animated transition moves the eyebrows vertically in a two-step sequence, using `transition().duration()` to create a blinking effect. The code imports `select` and `arc` from D3, and leverages SVG attributes like `cx`, `cy`, and `d` to construct the visual.

Dec 5, 2022
Loading thumbnail…

Fork of D3 animated Scatter Plot with menus

This example presents the Iris Dataset as an animated scatter plot, visualizing relationships between sepal and petal measurements across three flower species. Users can dynamically switch the X and Y axes via dropdown menus, triggering smooth transitions of data points and axis labels. The visualization uses D3.js (version 6.7.0) with a reusable chart module, SVG rendering, and a 1000-millisecond transition duration to animate positional changes. The species are encoded through distinct symbol types from D3's symbol scale, while the menu system leverages D3's dispatch API for event handling.

Dec 5, 2022
Loading thumbnail…

D3 animated Scatter Plot with menus

This interactive visualization displays the Iris dataset through an animated scatter plot where users can dynamically select which attributes appear on the X and Y axes using dropdown menus. Each species is represented by a distinct symbol and color. The scatter plot is built with D3 version 6, using a modular reusable chart pattern for the scatterPlot and menu components. Changing menu selections triggers transitions with a 1000ms duration, smoothly animating the data points and axes to their new positions.

Dec 5, 2022
Loading thumbnail…

Reusable D3 Scatter Plot with symbols

This example presents a reusable scatter plot of the Iris Dataset, with each species represented by a distinct D3 symbol (circle, square, or triangle) and color. Users can cycle through different x-axis variables—petal width, sepal width, petal length, or sepal length—by clicking a button, triggering a smooth transition on all marks using `d3.transition`. The chart is built with D3 v6, using `scaleLinear` for axes, `scaleOrdinal` for symbol mapping, and `axisBottom`/`axisLeft` for rendering. Data is loaded via `d3.csv` from a GitHub Gist, and the SVG output animates axis and symbol updates over one second.

Oct 27, 2022
Loading thumbnail…

Idempotent D3 Scatter Plot

This scatter plot visualizes the Iris dataset with SVG circles representing flowers, animated via `transition()`. A reusable chart function built with D3 v6 scales axes using `scaleLinear` and `extent`, rendering axes with `axisLeft` and `axisBottom`. Clicking the button cycles the x-axis variable among petal width, sepal width, petal length, and sepal length, updating the plot idempotently through `selection.call()`. Data loads from a remote CSV, with parsing for numeric values.

Oct 27, 2022
Loading thumbnail…

Fork of D3.js

A fork of D3.js renders a simple bar chart of regional values using SVG rectangles styled with a purple fill. The chart fetches data from a local JSON file via the Fetch API, while also parsing a second dataset embedded as a global variable through a script tag. It uses d3.scaleBand for the x-axis positioning and d3.scaleLinear for the y-axis, with padding applied to separate the bars. The visualization demonstrates a basic data-binding workflow with D3 v5, though the chart shows no axes or labels beyond the bar heights.

Oct 27, 2022
Loading thumbnail…

jmbv Fork of Hello VizHub

This example demonstrates D3.js SVG masking by drawing two sets of overlapping horizontal and vertical rectangles, each clipped by circular masks to reveal a central circular window. The code uses `d3.select` and `d3.range` to generate 100 rectangles per axis, with one mask using a black background and white circle, the other inverted. The visualization fills the browser viewport using `window.innerWidth` and `window.innerHeight`, producing a dynamic grid-like pattern visible only within the overlapping masked region.

Oct 26, 2022
Loading thumbnail…

JavaScript Arrayds

This example presents a minimal demonstration of JavaScript array manipulation in a web page. It creates an array containing the strings "a" and "b", appends the number 3 using the `push` method, and logs the resulting array to the browser console via `console.log`. The page uses no external libraries, relying solely on native JavaScript within an HTML document. A large styled message area is defined but left empty, while the actual visualization occurs in the developer console output.

Oct 26, 2022
Loading thumbnail…

surnise

A looping SVG animation depicts a sunrise and sunset over a stylized landscape. A radial gradient sky shifts from aliceblue to indigo and back, while the sun’s vertical position oscillates between the sky and the horizon. Two layered path-based landmasses use linear gradients that synchronize with the same 15-second color cycle, creating a seamless day-night transition. The piece relies solely on native SVG elements, including `<animate>`, `<radialGradient>`, and `<linearGradient>`, with no external JavaScript libraries.

Jun 25, 2022
Loading thumbnail…

svg_fundamentals

This example demonstrates fundamental SVG shapes—a circle, rectangle, line, and path—rendered on a 900-by-500 canvas. The SVG markup defines each element directly, specifying properties like coordinates, dimensions, fill colors, and stroke styles. It uses no external libraries, relying on native SVG syntax within an HTML page. The path illustrates a closed triangular form with a cyan fill and green stroke, while the other shapes show varied stroke widths and colors, including a transparent circle and a yellow rectangle.

Jun 25, 2022