W

Wayne716

@Wayne716·17 public vizzes

Loading thumbnail…

Map Interaction

This example displays an interactive world map, rendering country boundaries as SVG paths using d3.geoPath and a d3.geoNaturalEarth1 projection. The map is built from TopoJSON data loaded via d3.json and the topojson.feature API, with country names attached as SVG title elements. The visualization supports panning and zooming through d3.zoom, which applies a transform to the map group, and highlights individual countries by changing their fill color on hover using CSS.

Loading thumbnail…

Map Interaction

This example displays an interactive world map rendered with SVG using the d3-geo-projection library, specifically the geoNaturalEarth1 projection. Countries from the world-atlas TopoJSON dataset are drawn as paths with d3.geoPath, each featuring a tooltip showing the country name. The map supports pan and zoom through d3.zoom, which applies a transform to the map group on events. Hovering over a country changes its fill color to red via CSS, while the sphere background uses a distinct blue fill.

Loading thumbnail…

Map with D3.js

This map visualization displays world countries on a natural Earth projection using D3.js and TopoJSON data from the world-atlas dataset. It renders an SVG sphere background and country paths filled with teal, which turn red on hover through CSS. The code employs D3 v6 features like `geoNaturalEarth1` and `geoPath` to project geographic coordinates, while `topojson.feature` extracts country boundaries from the loaded TopoJSON file. A tooltip showing each country’s name appears via appended `title` elements.

Loading thumbnail…

Hover to Select

Five fruit circles render in an SVG, initially as apples that animate in with a staggered radius transition. Hovering over a circle selects it, adding a black stroke, while mouseout clears the selection. The code uses D3 v6 with a data join, `scaleOrdinal` for color and size, and `transition.attr` to animate enter, update, and exit states. A `setSelectedFruit` callback updates the selection, triggering re-renders that also remove or replace fruit over time.

Loading thumbnail…

Click to Select

Five apples render as SVG circles that transition in size and position when clicked, receiving a black stroke to indicate selection. The example demonstrates d3 data joins with key functions, ordinal scales for color and radius, and chained transition APIs. D3 v6’s selection.on, merge, and exit patterns handle dynamic updates as fruits are removed or one apple transforms into a lemon.

Loading thumbnail…

Bowl of Fruit

This example shows a dynamic bowl of fruit where apples and lemons are added, removed, or replaced over time. An SVG bowl shape is populated with fruit symbols, each colored and sized according to its type using d3.scaleOrdinal. The code uses D3's data joins with enter, merge, and exit selections to handle updates smoothly, while React manages the rendering of the fruit positions and attributes. The visualization demonstrates D3 version 6 in a React framework, with data-driven changes animated via timed events.

Loading thumbnail…

Bowl of Fruit

A bowl of fruit animates as apples are eaten and replaced by lemons, with each fruit rendered as a colored circle whose size and hue correspond to its type. Using D3 v6's `scaleOrdinal` for color and radius mappings, the code binds fruit objects to SVG circles via `data` with a key function, then transitions enter, update, and exit states over one-second durations. Apples start red and large, while lemons appear yellow and smaller, demonstrating animated data joins in a React-free HTML page.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes world population trends over time using D3 v6, drawing an SVG area chart where the x-axis maps years via a time scale and the y-axis represents population counts with a linear scale. The code loads CSV data from a VizHub dataset, applies a curve basis to the area generator, and customizes axes with tick formatting that abbreviates large numbers (e.g., converting G to B). Gridlines, axis labels, and a title are styled through CSS classes, while the chart employs margins and a translated group for layout.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes world population over time, with a maroon filled area chart showing the trend. The visualization uses an SVG canvas with margins and a time-scaled x-axis alongside a linear y-axis in billions. The code leverages d3.v6 functions including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft`. Data is loaded from a CSV file on VizHub and rendered using D3’s data-join and path generators.

Loading thumbnail…

Scatter Plot

This scatter plot displays temperature readings from San Francisco over time, with an overlaid maroon area fill beneath a line connecting the data points. The visualization uses D3 v6 to load CSV data, map timestamps to a time scale, and temperatures to a linear scale with axis ticks and labels. The SVG rendering includes a custom area generator with curveBasis for smoothing, and the chart is styled with labeled axes, a title, and gridlines.

Loading thumbnail…

Scatter Plot

This scatter plot displays temperature readings from San Francisco over time, with time on the x-axis and temperature on the y-axis. The visualization includes grid lines, axis labels, and a title, with a smooth curve drawn through the data points using d3.line with a basis curve. The chart is rendered as an SVG, using d3.scaleTime and d3.scaleLinear for the axes, with data loaded from a CSV file via d3.csv. The code uses axisLeft and axisBottom to generate the axes, and the plot area is positioned within specified margins.

Loading thumbnail…

Scatter Plot

This scatter plot shows how temperatures in San Francisco vary over time, with each circle representing a temperature reading at a specific timestamp. The visualization uses D3 v6 with SVG rendering, employing `scaleTime` and `scaleLinear` to map the data to the axes, and `axisLeft` and `axisBottom` with gridlines for reference. Data is loaded from a CSV file and parsed with `csv`, while circles are appended to the SVG using D3’s data join. Axis labels and a title are added as text elements.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. Red, semi-transparent circles represent each car, with positioning determined by the d3.scaleLinear scales for both axes, while axis labels and tick marks are generated using d3.axisBottom and d3.axisLeft. The SVG rendering approach is used, with margins and inner dimensions calculated from the viewport, and the chart includes a title and rotated y-axis label. Data is loaded via d3.csv and parsed into numeric values before rendering.

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the ten most populous countries, with each circle positioned along a categorical y-axis and a linear x-axis. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear` and `scalePoint` for scaling, along with `axisLeft` and `axisBottom` to generate axes. Population data is loaded from a CSV file and converted to absolute numbers, while custom tick formatting abbreviates large values. The chart includes a title and axis labels, with gridlines created via tick sizes.

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top 10 most populous countries using data from a CSV file. It maps population to bar width with a linear scale and country names to bar height using a band scale. The axes are customized with d3.axisBottom and d3.axisLeft; tick lines are removed, grid lines are added, and population values are formatted with d3.format to abbreviate billions as "B". The visualization is rendered as SVG with D3 v6.

Loading thumbnail…

Making a bar chart

This bar chart ranks the populations of ten countries in 2018, showing China and India as the most populous. The visualization uses D3 version 6 with an SVG rendering. The code imports `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3 to construct the axes and scales. It reads population data from a CSV file, multiplies each value by 1000, and draws steel-blue rectangles with widths proportional to population, using margins and a padded band scale for country labels.

Loading thumbnail…

Face with D3.js

A face built with D3.js is rendered as a yellow circle with black outline, featuring two eyes and a curved mouth, all contained in an SVG. The example demonstrates a simple animation where the eyebrows move up and down via a transition loop. The code uses D3's `select`, `append`, and `arc` APIs to construct the facial components, with the mouth created using an arc path with specified radii and angles. The entire composition is centered dynamically in the viewport.