A

AnShed

@AnShed·23 public vizzes

Loading thumbnail…

Choropleth Map with interactive filtering

This choropleth map visualizes countries' economies using color-coded paths, with an interactive legend that filters the map by economic classification. Clicking a legend category dims non-matching countries and highlights those selected, while a semi-transparent sphere provides geographic context. Built with React and D3 v5, the example uses `geoPath` with the `geoNaturalEarth1` projection for rendering SVG paths, `scaleOrdinal` and `schemeSpectral` for the color scale, and `zoom` for pan and zoom interactions. Data is loaded from the world-atlas package and processed via `topojson.feature`.

Loading thumbnail…

Selecting a Year on a Line Chart

This interactive line chart visualizes population trends over time by region, with a focus on a selected year. The visualization displays multiple region lines and a movable vertical line; as the user moves the mouse across the chart, the selected year is updated and crosshairs track the cursor. Data is sourced from UN population estimates, and the chart is built with D3 v5, specifically using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `curveBasis`. The rendering uses SVG and includes a color legend. Interaction is handled via an overlay rectangle’s `mousemove` event, which inverts the D3 scales to update the selection.

Loading thumbnail…

Melting data for multiple lines

This example visualizes population over time for multiple regions using a single chart with multiple lines. It employs a color legend to distinguish regions and a melt operation to reshape the data from wide to long format. The visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, and `nest`. Data is loaded from CSV files via `d3.csv` and processed with `timeParse`, `range`, and custom functions. The SVG rendering includes axes with gridlines and a title, with interactive sorting of regions by their final population values.

Loading thumbnail…

Circles on a map

This map visualizes global population data for 2018, overlaying semi-transparent circles on a natural Earth projection. Countries without data appear in light red, while those with values are gray and display proportional circles positioned at their centroids. The visualization uses D3 v5 with `geoNaturalEarth1`, `geoPath`, `geoCentroid`, and `scaleSqrt` for sizing, plus `topojson` for world geometry. Hovering reveals a tooltip with the region name and formatted population. A size legend explains circle scaling, and zooming is enabled via `d3.zoom`.

Loading thumbnail…

Temperature - Linechart with multiple lines

This visualization shows a week of temperature readings from multiple cities, with each city represented as a colored line over time. The chart includes axes labeled "Time" and "Temperature," a title, and a color legend identifying each city. Built with React and D3 v5, it uses `d3.csv` to load data, `d3.nest` to group by city, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.line` with `curveBasis` for smooth paths. Axis ticks are styled with grid lines, and lines use `mix-blend-mode: multiply` for overlap.

Loading thumbnail…

World population data set

This visualization displays global population trends from 1962 to 2018 as an area chart, with population values on the vertical axis and time on the horizontal axis. The chart uses a smooth curve to show the steady increase in world population over the decades. Built with React and D3 v5, the code employs `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisLeft`, and `axisBottom` to render the SVG, with population labels formatted in billions using a custom tick format.

Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot uses the D3 library to visualize relationships between pairs of attributes from the auto-mpg dataset. Two dropdown menus let the user select which columns to plot on the x and y axes. The visualization employs `scaleLinear` to map data to screen coordinates and `axisLeft` and `axisBottom` to render axes. Points animate into place using D3 transitions, with each circle's `cx` and `cy` attributes tweened over 500 milliseconds when the axis selection changes.

Loading thumbnail…

Color legend

This example demonstrates two reusable legend components for D3 visualizations: an ordinal color legend for categorical data and a quantitative size legend for numeric scales. The color legend maps fruit names to distinct colors, while the size legend uses a square-root scale to map values from 0 to 10 to circle radii. Both legends are rendered as SVG using d3.select, append, and merge operations, with the color legend applying a scaleOrdinal and the size legend using scaleSqrt. The code uses D3 v5 APIs including selection.call, data, and attr to construct the tick groups dynamically.

Loading thumbnail…

Blank Canvas

This visualization renders a hierarchical dataset of world regions and countries as a horizontal tree layout, with the root node ("World") anchored on the left and descendants extending rightward. The SVG output uses `d3.tree` and `d3.hierarchy` to compute node positions, while `d3.linkHorizontal` generates the curved connecting paths. Text labels, sized inversely to their depth, are placed at each node, and a `d3.zoom` handler enables panning and scaling of the entire canvas. The styling employs the Playfair Display font and teal strokes for the links.

Loading thumbnail…

Blank Canvas

A hierarchical tree chart displays the nested structure of world regions and countries, with each node labeled by name. The visualization uses D3 v5’s `tree` layout and `linkHorizontal` generator to draw curved paths between parent and child nodes, while `zoom` enables interactive panning and scaling of the entire diagram. Text size decreases with depth, and labels are positioned to align with leaf nodes or center over branching nodes, all rendered as SVG elements within a fixed, full-viewport canvas.

Loading thumbnail…

Blank Canvas

This example presents a minimalist blank canvas: a single, large rounded rectangle that fills the entire browser window. The visualization demonstrates a foundational D3 setup, using the `select` method to target an SVG element and dynamically setting its width and height attributes based on the viewport dimensions. It relies on the SVG rendering approach, appending a rectangle with `rx` for rounded corners. The code uses D3 v5, and the simple styles.css configures the body for a fixed, edge-to-edge display.

Loading thumbnail…

Creatomng a mapz

This example displays an interactive world map rendered with SVG, using a natural Earth projection. Countries are colored light green and turn red on hover, with a blue sphere as the background. The visualization uses `d3.geoPath` and `d3.geoNaturalEarth1` to generate the map from TopoJSON and TSV data provided by the world-atlas package. A `d3.zoom` handler enables panning and zooming the entire map group.

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruit shapes appear in a row, rendered as SVG circles with a bowl drawn beneath them. Hovering over a fruit highlights it with a black stroke and triggers a selection state. The visualization uses D3 version 5 with a React framework, employing ordinal scales for color and radius, and transitions for smooth updates. Over time, the dataset changes through timed removals, type changes, and additions, demonstrating data joins.

Loading thumbnail…

Bowl of Fruit - Click to Select

This example shows a bowl of fruit where clicking on an apple or lemon selects it, highlighting the chosen piece with a black outline. The visualization animates changes to the fruit data over time, including removal, type changes, and addition, using transitions on the circles. Built with React and D3 v5, it uses `scaleOrdinal` for color and radius mapping, SVG groups for positioning, and D3’s `selection.merge` pattern for enter-merge-exit updates. The bowl is rendered as a rounded rectangle, with fruit positioned horizontally.

Loading thumbnail…

World population data set

Animated fruit bowl visualization shows a sequence of apples and lemons appearing, disappearing, and transforming within a rounded rectangular container. Built with React and D3 v5, the code uses selection joins to bind fruit data to SVG groups, with `transition().duration(1000)` animating color and radius changes through ordinal scales. The scene cycles through five timed updates, demonstrating enter, update, and exit patterns.

Loading thumbnail…

World population data set

Five apples and then a lemon appear as colored circles inside an SVG, with an exit transition removing one fruit and a filter removing another. The React-based example uses d3’s scaleOrdinal for color and radius, while fruitBowl.js manages enter, update, and exit selections with transitions. Data updates run on timed intervals, demonstrating animated joins.

Loading thumbnail…

World population data set

This visualization displays a simple array of five red circles representing fruit data, arranged horizontally across an SVG canvas. The circles are evenly spaced using index-based positioning, with a fixed radius of 50 pixels. The code uses D3 v5's `select` and `range` utilities to generate the fruit dataset and bind it to circle elements via the data-join pattern. The SVG dimensions are dynamically read from the HTML attributes and parsed as numbers using the unary plus operator, centering the circles vertically. The example demonstrates fundamental D3 data-binding and SVG rendering techniques within a React framework setup.

Loading thumbnail…

HTML Starter

This example demonstrates a bare minimum HTML page that displays the text “Hello HTML” in large, centered font. The page includes embedded CSS for styling and a script that logs “Hello JavaScript!” to the browser’s console. The code uses standard HTML elements and the console.log API, with no external libraries or data sources. It serves as a simple starting point for exploring web page structure and basic interactivity.

Loading thumbnail…

HTML Starter

This example demonstrates a bare minimum HTML page that displays the text “Hello HTML” in large, centered font. The page includes embedded CSS for styling and a script that logs “Hello JavaScript!” to the browser’s console. The code uses standard HTML elements and the console.log API, with no external libraries or data sources. It serves as a simple starting point for exploring web page structure and basic interactivity.

Loading thumbnail…

Temperature Scatter plot

This visualization shows temperature readings in San Francisco over a three-day period, using a time-based x-axis and a linear temperature y-axis. An area chart with a smooth curve, generated by `d3.area()` with `curveBasis`, highlights the temperature trend, while axis labels and a title provide context. The data is loaded from a CSV file using `d3.csv()` and parsed into JavaScript `Date` objects and numbers. The chart is rendered as an SVG using D3 v5, with axes created via `d3.axisBottom()` and `d3.axisLeft()`, and scales from `d3.scaleTime()` and `d3.scaleLinear()`.

Loading thumbnail…

Temperature Scatter plot

This chart visualizes temperature readings in San Francisco over five days in March 2015 as a line graph, using a time-based x-axis and a temperature y-axis. The data is loaded from a CSV file and rendered in an SVG canvas, with a smooth curve drawn using the `d3.line` generator with `curveBasis`. Axes are created via `d3.axisBottom` and `d3.axisLeft`, while scales are set with `d3.scaleTime` and `d3.scaleLinear`, all within the d3.v5 framework.

Loading thumbnail…

Temperature Scatter plot

This chart visualizes temperature readings in San Francisco over five days in March 2015 as a line graph, using a time-based x-axis and a temperature y-axis. The data is loaded from a CSV file and rendered in an SVG canvas, with a smooth curve drawn using the `d3.line` generator with `curveBasis`. Axes are created via `d3.axisBottom` and `d3.axisLeft`, while scales are set with `d3.scaleTime` and `d3.scaleLinear`, all within the d3.v5 framework.

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” centered on a white background. The page uses a single inline CSS rule to apply 13em font size and text alignment to the body element. No JavaScript or external libraries are included, making it a pure HTML and CSS starter template. It serves as a baseline for creating more complex visualizations with frameworks like React.