Skip to main content
Log in
L

linyyyyyyyyy

@linyyyyyyyyy·13 public vizzes

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map with selectable countries, where hovering over a country reveals its name as a tooltip and highlights it in red. The map uses a natural Earth projection rendered as SVG paths, with a blue sphere background. It loads geographic data from the World Atlas TopoJSON and TSV files, joining country names by ID. The implementation relies on D3 v5 APIs including d3.geoPath, d3.geoNaturalEarth1, d3.zoom, and d3.json, along with a zoom transform applied to the map group for panning and scaling.

Dec 4, 2022
Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example illustrates a color legend using a categorical color scale from D3 v5, displaying two fruit categories, "apple" and "lemon," as colored circles with text labels. The visualization uses an SVG rendering and applies the general update pattern, where entering groups are appended and exiting groups are removed, as seen in the `colorlegend.js` module. The legend's position and styling are set via attribute transforms, with the color scale mapping categories to specific hex colors. The code leverages the D3 selection API, including `select`, `append`, `merge`, and the `scaleOrdinal` function to manage the dynamic creation and update of legend elements.

Dec 4, 2022
Loading thumbnail…

Fork of Let's make a face with D3.js!

A world map rendered with D3.js displays countries as dark green paths with gold outlines on a gold sphere, using a Natural Earth projection and SVG. Hovering highlights a country in red, and zooming is enabled. The code loads geographic data from TopoJSON and country names from TSV files via Promise.all, then generates paths with d3.geoPath and applies pan/zoom through d3.zoom.

Dec 4, 2022
Loading thumbnail…

Fork of haha

Five apples appear in a bowl, then the example animates a series of changes: one apple is removed, a second apple turns into a lemon, another apple disappears, and a third becomes a lemon. Each fruit is an SVG circle, with color and size determined by a `scaleOrdinal` color scale and radius scale. The D3 code uses `select` for DOM selection, `.transition()` with a one-second duration to animate attribute changes, and mouseover/mouseout events that call `onClick` to highlight the selected fruit with a yellow stroke.

Dec 3, 2022
Loading thumbnail…

Fork of haha

A sequence of apples and lemons is rendered as colored circles in an SVG bowl, with fruit appearing, disappearing, and changing type over time. The example demonstrates data joins and transitions using D3 v5, with the `fruitbowl` function updating circle and text elements via `selection.merge()` and `exit()` removal. Color and radius are mapped through `scaleOrdinal` domains, while timed `setTimeout` calls modify the fruit array to trigger re-renders.

Dec 3, 2022
Loading thumbnail…

haha

A simple animated fruit bowl demonstrates D3 transitions as apples and lemons enter, update, and exit. Rendered as SVG circles, the visualization uses d3.scaleOrdinal to map fruit types to fill colors and radii. A timer triggers events that remove fruits, change an apple to a lemon, and filter the data, with each change animating over one second via the .transition() API, shrinking exiting circles to zero radius.

Dec 3, 2022
Loading thumbnail…

Fork of 000

This visualization presents global population trends over time as a filled area chart, using a time-scaled x-axis and linear y-axis. The code imports D3 v5 modules like `area`, `scaleTime`, and `axisBottom` to generate smooth curves and labeled axes. Data is loaded via `csv` from a World Population by Year dataset, with population values displayed in billions. The SVG rendering includes grid lines, a title, and a semi-transparent grey fill beneath the line path.

Dec 3, 2022
Loading thumbnail…

000

This example visualizes temperature in San Francisco as an area chart over time, with circular data points layered on the filled path. Built with D3 v5, it loads CSV data, parses timestamps and numeric temperatures, and maps them to time and linear scales. The visualization uses `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth area, while `axisLeft` and `axisBottom` render labeled axes with customized grid lines.

Dec 3, 2022
Loading thumbnail…

Fork of Making a bar chart

This example visualizes temperature data from San Francisco over time, showing a smooth line chart with overlaid circular markers for each data point. The line is drawn using `d3.line` with `curveBasis` for interpolation, while `d3.scaleTime` and `d3.scaleLinear` map timestamps and temperature values to the SVG canvas. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, and data is loaded asynchronously via `d3.csv` from an external dataset. The SVG rendering includes styled grid lines, axis labels, and a title.

Dec 3, 2022
Loading thumbnail…

Fork of Making a bar chart

This horizontal bar chart displays population figures for ten countries, using data from a CSV file with populations scaled by a factor of one thousand. The visualization relies on D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with SVG rectangles representing each country’s value. Axes are generated via `axisBottom` and `axisLeft`, while tick labels are formatted using `format` to abbreviate numbers, and gridlines are styled through CSS. The chart includes custom axis titles and a chart title, all rendered as SVG elements.

Dec 3, 2022
Loading thumbnail…

Making a bar chart

This horizontal bar chart displays population data for ten countries, sorted by the y-axis from China to Mexico. The visualization uses D3 v5 with an SVG canvas, mapping population to bar length via a linear scale and country names to bar position via a band scale. The code loads data from a CSV file, applies a formatting function to display large numbers, and customizes axes and labels through API calls like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`.

Dec 3, 2022
Loading thumbnail…

Liny Liny

A cheerful yellow face with black eyes and an animated eyebrow appears on a red background. The visualization uses SVG shapes—circles for the face and eyes, rectangles for eyebrows, and a path for the mouth—built with D3.js v5 within a React framework. The right eyebrow animates via D3’s `.transition().duration()` chaining, moving up and down over 1.5-second intervals, while the static left brow and mouth stay fixed.

Dec 3, 2022
Loading thumbnail…

HTML Starter

This example demonstrates how to create a basic VizHub page using D3 v5 and ES6 modules. It displays a large, centered text message by leveraging D3’s `select` function to manipulate the DOM. The code imports both the D3 library via UNPKG and a local module (`myMessage.js`), showcasing modular JavaScript. Though the `cars.js` file contains a small dataset with car information, the page does not render or use this data in its current behavior.

Dec 1, 2022