L

LongYuu

@LongYuu·25 public vizzes

Loading thumbnail…

Selecting a Year on a Line Chart

Multiple colored lines trace regional population changes from 1950 to 2100, using data from the UN Population Estimates and Medium Variant datasets. A vertical black line marks the currently selected year, which updates when the user hovers over the chart via a mouse-interceptor rectangle that calls `setSelectedYear` with `xScale.invert`. The chart uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.axisLeft/axisBottom; a separate color legend built with `colorLegend.js` identifies each region.

Loading thumbnail…

Map with selectable countries

This example presents an interactive choropleth map of the world, where each country is colored according to its economic classification. Users can click on any country to highlight it, dimming all others, and click again to deselect. The map uses D3's `geoPath` and `geoNaturalEarth1` projection, with `scaleOrdinal` and `schemeSpectral` for the color scale. A separate legend allows filtering by economy value, and the zoom feature (`zoom()`) is included. Data comes from the `world-atlas` package, loaded with `tsv` and `json`.

Loading thumbnail…

Line chart with multiple lines

This line chart displays population trends over time for global regions, with each region represented by a colored line and a legend identifying them. The data spans from 1950 to 2100, combining UN population estimates and medium-variant projections processed through a custom melt function. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with schemeCategory10, while d3.line with curveBasis generates the smoothed paths. Axis labels, grid lines, and a title are rendered via d3.axisBottom, d3.axisLeft, and SVG text elements.

Loading thumbnail…

Line chart with multiple lines

This line chart displays one week of temperature data for multiple cities from the Data Canvas - Sense Your City dataset, using a distinct color for each city’s time series. The d3.v5 code employs `d3.line` with `curveBasis` to generate smooth SVG paths, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.nest` to group by city. A custom color legend renders using `d3.scaleOrdinal` with `schemeCategory10`, while axis labels and gridlines are styled via CSS.

Loading thumbnail…

Circles on the map

This visualization displays global population estimates for 2018, projected onto a natural Earth map using d3.geoNaturalEarth1 and rendered with d3.geoPath. Circles positioned at country centroids via geoCentroid scale in size with population using d3.scaleSqrt. The map supports panning and zooming through d3.zoom, with tooltips showing population values. Data comes from UN population estimates merged with TopoJSON world atlas geometries, and both size and color legends are built using reusable d3 components.

Loading thumbnail…

Scatter Plot with menus

This scatter plot visualizes the Auto MPG dataset, showing relationships between car attributes like horsepower, weight, and acceleration. Two dropdown menus let users select which columns map to the x- and y-axes, with circles animating smoothly to their new positions via `transition().duration(1000).delay()`. The visualization is built with D3 v5, using `scaleLinear` and `extent` for scaling, `axisBottom` and `axisLeft` for axes, and custom reusable functions `dropdownMenu` and `scatterPlot` for modularity.

Loading thumbnail…

Colorpleth Map with interactive filtering

This choropleth map colors countries by their economy type using an ordinal color scale. Clicking a legend entry filters the map to highlight countries in that category while dimming others, with the sphere outline fading when a filter is active. Built with React and D3 v5, it uses `geoNaturalEarth1` projection, `geoPath`, and `zoom` for panning and zooming, while data comes from a TopoJSON file with TSV metadata. The SVG rendering uses `scaleOrdinal` and `schemeSpectral` for color assignment.

Loading thumbnail…

Colorpleth Map

This colorpleth map uses a natural Earth projection to display world countries shaded by their economy type, with a color legend showing the ordinal scale. The visualization supports zooming and panning through d3.zoom, and hovering over a country highlights it in red while revealing its name and economy classification in a tooltip. Data is loaded from the World Atlas TopoJSON and TSV files, with d3.geoPath generating the geographic paths and d3.scaleOrdinal mapping economy categories to a spectral color scheme. The map is rendered as SVG within a React application.

Loading thumbnail…

Color and Size legends

This example builds two custom legends in D3 v5: a color legend mapping fruit names to ordinal colors, and a size legend using a square-root scale. The legends are rendered as SVG groups with circles and text labels. The color legend uses `scaleOrdinal` with a hardcoded domain, while the size legend uses `scaleSqrt` with ticks generated via `sizeScale.ticks()`. Both legends are positioned manually and styled with CSS classes, demonstrating reusable legend components through the `selection.call()` pattern.

Loading thumbnail…

World countries tree

The World countries tree visualizes the hierarchical structure of countries grouped by continent and subregion. It uses a D3 tree layout with horizontal links, rendering text labels for each node at varying font sizes based on depth. The visualization supports pan and zoom interactions via D3's zoom behavior, with the data loaded from a JSON file representing the United Nations geoscheme. SVG paths and text elements are used to draw the tree, styled with teal links and white text shadows.

Loading thumbnail…

Blank Canvas

A blank canvas fills the browser window with a single rounded rectangle, demonstrating the simplest possible SVG rendering with D3.js. The visualization uses the `select` function from D3 to target the SVG element, then dynamically sets its width and height based on the viewport dimensions. The code appends a `rect` element with rounded corners (`rx` attribute) that covers the entire canvas, creating a subtle frame effect. The page layout is controlled with fixed positioning and hidden overflow in CSS, ensuring the canvas remains perfectly sized to the viewport without scrollbars.

Loading thumbnail…

Cheap tricks for interaction

This example demonstrates interactive pan and zoom on a world map using D3 v5 and React. The visualization renders country boundaries from World Atlas TopoJSON data with a Natural Earth projection, displaying country names as tooltips on hover. The code uses `d3.zoom` for the pan/zoom behavior, `d3.geoPath` for map rendering, and `d3.tsv` for loading country name metadata. CSS hover effects highlight countries in red, while the map supports smooth zooming through SVG transform updates.

Loading thumbnail…

Let's make a map with D3.js!

This example visualizes a world map using a natural Earth projection, with countries rendered as green SVG paths against a blue sphere background. It loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON with `topojson.feature`. The visualization uses D3 v5’s `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw the map, while CSS styles the sphere and country boundaries.

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples appear in a row and animate inward from a zero radius, with hover highlighting the selected fruit with a black stroke. The code uses d3 v5 with SVG circles and ordinal scales for color and radius, while selection is managed through mouseover and mouseout events. Timed updates remove apples, replace one with a lemon, and filter another out, demonstrating enter, update, and exit transitions over one second durations.

Loading thumbnail…

Bowl of Fruit - Click to Select

This example shows a bowl of fruit as a set of colored circles that users can click to select, with a black outline highlighting the chosen piece. The visualization uses D3 v5’s selection API, `scaleOrdinal` for color and radius mapping, and chained transitions to animate the circles’ entry, exit, and size changes over 1000 milliseconds. Data is generated randomly, and the sequence demonstrates adding, removing, and modifying fruit items, with apples and lemons rendered in red and yellow.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates D3’s general update pattern with a live SVG scene where apples and lemons appear and disappear over timed intervals. The code uses `d3.scaleOrdinal` for color and radius mapping, and `selection.enter`, `merge`, and `exit` to handle data joins. Circles and text labels render inside SVG groups, repositioned via `transform` attributes based on array index. The example cycles through mutations—removing fruits, swapping an apple for a lemon—through `setTimeout` calls triggering re-renders.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five circles representing apples shrink away and are replaced as a lemon appears, demonstrating D3's general update pattern through enter, update, and exit selections. The example uses `scaleOrdinal` for fruit type colors and radii, with `transition().duration(1000)` animating circle resizing and removal. Data flows through `data(fruits, d => d.id)` keyed by random IDs, while the `fruitBowl` function manages the merge and exit transitions.

Loading thumbnail…

World Population: Area Chart

This area chart visualizes world population growth over time, with population on the y-axis and time on the x-axis, using a filled maroon area beneath a thick stroke. The data is loaded via `d3.csv` from a VizHub dataset, parsed into numeric population values and year dates. The chart uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.area`, with SVG rendering. Axis labels are formatted using `d3.format` to abbreviate numbers, and grid lines extend across the plot via tick sizes.

Loading thumbnail…

Temperature in San Francisco: Area Chart

This area chart visualizes one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. Using D3 v5, the code loads CSV data, maps timestamps and temperature values through `scaleTime` and `scaleLinear`, and renders the area path with the `area()` generator and `curveBasis` smoothing. The SVG includes labeled axes, grid lines via tick sizes, and a title, all styled through external CSS.

Loading thumbnail…

Temperature in San Francisco: Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear to map values, and d3.line with curveBasis to create the smooth maroon line path. Axis labels and grid lines are generated via d3.axisLeft and d3.axisBottom, while the SVG rendering includes styling for ticks and title text from the linked stylesheet.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each semi-transparent red circle represents a car, with its position determined by the d3.scaleLinear axes. The code uses d3.csv to load the data, converts numeric columns, and renders the chart with SVG elements, employing d3.axisBottom and d3.axisLeft for ticks and gridlines. A title and axis labels are appended via D3 text selections.

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the ten most populous countries in 2018, based on the World Population Prospects 2017 dataset, with circles arranged along a categorical country axis and a linear population scale. The visualization uses D3 v5 modules including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render labeled axes with grid lines and formatted tick marks. Data is loaded from a CSV file, with population values multiplied by 1000 to reflect actual figures, and circles are sized consistently at radius 15.

Loading thumbnail…

Customizing Axes

This example visualizes the top 10 most populous countries using a horizontal bar chart, drawing on 2018 population estimates from World Population Prospects 2017. The chart uses d3.scaleLinear and d3.scaleBand scales, with d3.axisBottom and d3.axisLeft for custom axes. The y-axis ticks are stripped of domain lines, while the x-axis uses a tick format that converts billions to "B" via d3.format. Axis labels and a title are added as SVG text elements, with data loaded from a CSV file using d3.csv.

Loading thumbnail…

Making a bar chart

A horizontal bar chart ranks the ten most populous countries using 2018 estimates from the World Population Prospects 2017 data. The visualization maps population values to bar widths via d3.scaleLinear and country names to vertical positions via d3.scaleBand, with axes generated by d3.axisLeft and d3.axisBottom. Rectangles are appended to an SVG group, and the population data is loaded from a CSV file and converted to thousands.

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered with SVG shapes animates its eyebrows in a looping bounce. The example uses D3.js v5 selections and transitions to build the face from circles, rectangles, and an arc path for the mouth. The `arc` generator creates the smile, while chained `transition` calls with specified durations move the eyebrow group and apply rotations. The React framework wraps the D3 code, which targets an SVG element sized 960 by 500.