A

annadehtiarova

@annadehtiarova·30 public vizzes

Loading thumbnail…

Bar chart with D3.js!

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The code uses D3 v6 with `d3.csv` to load the data, `scaleLinear` and `scaleBand` for scales, and `axisLeft` and `axisBottom` for axes. SVG rectangles represent the bars, with tick formatting converting values to abbreviations like “1.41B” and a light gray background for the chart area.

Loading thumbnail…

Site

This example demonstrates a minimal single-page site that displays a hardcoded user profile, showing a name and weight as plain HTML text. The page loads the D3.js v4 library but does not invoke any D3 functions or visualizations. Instead, the script.js file writes the data directly into the document using `document.write`, while styles.css applies basic typography and color rules to the page’s elements. The HTML structure also includes commented-out form inputs and links, indicating placeholder content that is not active in the current version.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings from multiple cities, with each city represented by a colored, smoothed line. The visualization uses D3 v5's `nest()` to group data by city and `scaleTime`/`scaleLinear` for axes. A custom `colorLegend` component renders the categorical color scale, while `axisBottom` and `axisLeft` include gridlines. Data comes from a CSV file loaded via `csv()`, and the SVG rendering applies a multiply blend mode to overlapping lines.

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays United Nations population projections from 1950 to 2100, with each line representing a world region. Users can hover over the chart to select a year, triggering a vertical marker that updates the display. The visualization uses d3.line with curveBasis, d3.nest for data grouping, and d3.scaleOrdinal with schemeCategory10 for color encoding. A custom d3.scaleTime handles the year axis, while event listeners on a transparent rectangle detect mouse movement to update the selected year and re-render the SVG.

Loading thumbnail…

Fork of Melting Data for Multiple Lines

A fork of an interactive D3 visualization, this example displays population over time by region from 1950 to 2100 using multiple line charts. It shows the rise and fall of population for various world regions, with each line color-coded and ordered by its final value. The visualization uses D3 v5 APIs including `nest()` for hierarchical grouping, `lineGenerator` with `curveBasis` for smooth line paths, and `scaleOrdinal` with `schemeCategory10` for coloration. Data is loaded from UN population estimates CSVs via `Promise.all()` and pivoted from wide to long format. A custom color legend is built with modular JavaScript functions, rendered in SVG with a multiplication blend mode.

Loading thumbnail…

Circles on a Map

This visualization uses a D3.js geoPath and geoNaturalEarth1 projection to render a world map, overlaid with circles sized by population data from a 2018 UN dataset. Countries with missing data are filled in dark red, while those with data are light beige. The sizing and color legends are implemented via custom modules, and the map supports zooming through D3's zoom event. Hovering over a country reveals its name and population, formatted with D3's format function.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore the relationship between any two columns of the automotive dataset by selecting axes from dropdown menus. Built with D3 v5, it renders SVG circles that animate from the center to their positions using `transition()`. The code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, with data loaded from a CSV file. The dropdown menus are generated using a reusable `dropdownMenu` component that binds options to a native `<select>` element.

Loading thumbnail…

Interactive Map - Countries by Income

This interactive map displays countries color-coded by income group using a natural Earth projection. A legend to the left allows filtering by income category, dimming non-matching countries while highlighting selected ones. Built with D3 v5, the visualization uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom` for panning and zooming. Country boundaries come from TopoJSON data sourced from the World Atlas, with income values joined from TSV metadata. The color scale uses `d3.scaleOrdinal` with sequential blue schemes.

Loading thumbnail…

Countries by Income - Choropleth Map

This choropleth map colors countries by income group using an ordinal color scale with a blue scheme, showing each nation’s classification on a natural Earth projection. The visualization supports zooming and includes a custom color legend with circles and labels. Built with D3 v5, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for map rendering, `d3.zoom` for interaction, and `d3.scaleOrdinal` for color mapping. Data combines TopoJSON world geometry with TSV metadata from the world-atlas package.

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy category using a blue ordinal scale, with a hover tooltip showing the country name and economy value. The visualization projects geographic data with `d3.geoNaturalEarth1` and renders features via `d3.geoPath`. It loads country boundaries from TopoJSON and names from TSV, then applies `d3.zoom` for panning and scaling. A custom `colorLegend` component displays the color scale with circles and labels in SVG.

Loading thumbnail…

Color and Size Legends

This example demonstrates two legend styles for D3 visualizations: a color legend mapping ordinal categories to colors, and a size legend mapping a square-root scale to circle radii. The color legend displays four fruit labels next to colored circles, while the size legend shows five tick values with circles whose areas scale with the data. Both legends are built as reusable SVG components using D3's selection API, with `scaleOrdinal` and `scaleSqrt` defining the mappings. The code uses `.call()` to invoke the legend functions and `merge()` to handle updates efficiently.

Loading thumbnail…

World Countries Tree

This example visualizes the hierarchy of world countries using a tree diagram. The root node represents the World, branching into continents, subregions, and finally individual countries based on the data.json structure. The tree is rendered with D3.js v5, using the `d3.tree` layout, `d3.hierarchy`, and `d3.linkHorizontal` for the edges. The SVG is drawn with text labels and styled paths, and a `d3.zoom` component enables interactive pan and zoom.

Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser window, displaying a single rounded rectangle that spans the entire viewport. The example demonstrates a minimal setup for an interactive visualization framework, using D3 v5 to select the SVG element and set its dimensions based on the current window size. The code relies on `d3.select` and the SVG `rect` element with rounded corners (`rx`), while the fixed-position body styling prevents scrolling. No data or interaction is implemented, serving as a starting point for further development.

Loading thumbnail…

Hover, Zoom on a Map

This example displays a world map using D3.js and topojson, rendered as an SVG with the geoNaturalEarth1 projection. It loads geographic data from the world-atlas package, including country boundaries and a TSV file mapping ISO codes to country names. Hovering over a country turns it red, and users can pan and zoom the map via the d3.zoom module, which updates the group’s transform attribute.

Loading thumbnail…

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

This example uses D3.js version 6 to render a world map from the World Atlas TopoJSON dataset, displaying countries as black-filled paths with light gray strokes against a light gray sphere (the globe). The code utilizes `d3.geoPath` with the `geoNaturalEarth1` projection to transform geographic coordinates into SVG paths, and the `topojson` library’s `feature` function to extract country boundaries from the TopoJSON topology. The SVG output shows the full Earth sphere with country outlines, demonstrating basic geographic data mapping and SVG DOM manipulation with `select` and `append` methods.

Loading thumbnail…

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

This example renders a world map using D3.js and TopoJSON, projecting country boundaries with an orthographic projection via `d3.geoOrthographic` and drawing them as SVG paths with `d3.geoPath`. The code loads GeoJSON data from the world-atlas dataset using `d3.json`, then binds the country features to path elements. The map is displayed on a light gray background, with countries filled in black and strokes in light gray, creating a simple, high-contrast visualization of global landmasses.

Loading thumbnail…

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

This fork of the classic D3.js face demo renders a world map using SVG paths instead of a smiley face. The map displays country boundaries as gray shapes with light gray strokes, projected using a Mercator projection. The code loads TopoJSON data from the world-atlas package and converts it to GeoJSON via the topojson `feature` method, then binds it to SVG path elements using `d3.geoPath` and `d3.geoMercator`. All drawing is handled in a single `json` promise callback with d3.v6.

Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

Five apples are drawn in a row as red circles with a black stroke on the selected one. Clicking any apple shifts the selection stroke to that fruit. The visualization uses React with hooks (`useState`) to manage selection state and D3 v5 scales (`scaleOrdinal`) for color and radius, rendering SVG circles via a `FruitBowl` component.

Loading thumbnail…

Lost Fruit - General Update Pattern

Five red circles appear in a row across the center of an SVG canvas, each representing a fruit. Every second, one circle is removed from the right side of the sequence, demonstrating the D3.js general update pattern. The code uses D3 v6 selections, the `data()` join, and `enter()`/`exit()` methods to append and remove elements. The example animates state changes over time with `setTimeout`.

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3, showing how data joins handle enter, update, and exit transitions for a bowl of fruit. It illustrates special cases by using two ordinal scales (colorScale and radiusScale) from d3-scale to map fruit types to visual properties. The code runs through a sequence of timed updates using setTimeout: buying five apples, eating one, replacing one with a lemon, and removing another. SVG circles and text elements are bound to fruit objects, with the bowl rendered as a stationary rectangle. The example uses d3-selection for joins and merges, with D3 v5 loaded via CDN.

Loading thumbnail…

World Population AreaChart

This chart shows the growth of world population over time as a smooth, filled area chart. The data comes from a CSV file of population figures by year, loaded via `d3.csv`. The visualization uses D3 v6 with `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, rendering an SVG path generated by `d3.area()` with a `curveBasis` interpolation. Axes are labeled and formatted using `d3.axisLeft` and `d3.axisBottom`, with population values abbreviated using `d3.format`.

Loading thumbnail…

Fork of Temperatures in San Francisco AreaChart

This visualization shows a week of temperature readings in San Francisco as a filled area chart. The area spans from the baseline to the temperature values over time, using D3 v6’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to create the smooth shaded shape. The SVG rendering includes axis labels, a title, and grid lines via `axisBottom` and `axisLeft`. Data is loaded from a CSV file hosted on VizHub, with timestamps converted to JavaScript `Date` objects and temperatures parsed as numbers.

Loading thumbnail…

Temperatures in San Francisco LineChart

This line chart visualizes temperature fluctuations in San Francisco over a week, using a smooth curve to connect data points across time. The horizontal axis represents time, while the vertical axis shows temperature, with grid lines and labeled axes for readability. Built with D3 v6, the code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the SVG path. Data is loaded from a CSV file and parsed into JavaScript `Date` objects, and grid lines are created via tick marks on both axes.

Loading thumbnail…

Temperatures in San Francisco ScatterPlot

This scatterplot displays temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis, using filled circles to mark individual observations. The chart is rendered as an SVG via D3 v6, using `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` to load the external dataset from a VizHub-hosted CSV file. A light gray background, grid lines, and labeled axes clarify the temporal trend.

Loading thumbnail…

Fork of Fork of Scatter Plot with D3.js!

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, displaying each vehicle as a semi-transparent black circle. The D3.js v6 code uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to construct the axes with grid lines and labels, while `csv` loads the remote dataset. The SVG rendering applies a light gray background and custom styling for ticks and titles.

Loading thumbnail…

Fork of Bar chart with D3.js!

This bar chart displays the population of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects. The visualization uses D3.js v6 with an SVG rendering, employing `d3.csv` to load the data and `d3.scaleLinear` and `d3.scaleBand` for the x and y axes. The x-axis labels are formatted from values like 1.4G to 1.4B via a custom tick format function. A background grid is rendered using the axis tick lines.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes using Scalable Vector Graphics (SVG) and style them with CSS. It shows circles and rectangles filled with various colors, including yellow, gray, and black, arranged in a grid-like pattern, along with a line and a polyline path. The SVG elements are organized within groups using the `<g>` tag, some with transform attributes for scaling and translation. CSS classes, such as `.lines`, apply stroke styling and rounded line caps to the path elements. The rendering uses pure SVG markup in an `index.html` file, with `styles.css` controlling visual properties.

Loading thumbnail…

Fork of Cars Report

This example demonstrates a JavaScript-based report generator that filters a static array of car objects and displays them as formatted text. The page loads with a "Loading..." message, then retrieves car data from a hardcoded JSON string using the `getCars` function, which simulates an asynchronous delay with `setTimeout`. The `generateReport` module filters out cars priced under $3000, formats each entry via `formatCar` to include year, make, model, and price, and joins them into a newline-separated list that populates the pre element in the HTML. No external visualization libraries are used; the rendering relies solely on native JavaScript and DOM manipulation.

Loading thumbnail…

Let's make a face with D3

A face made of SVG shapes—a circle head, elliptical eyes, rectangular eyebrows, and an arc-based mouth—is drawn in the center of a 960×500 viewport using D3 v5 selections and the `arc` generator. The face is statically rendered with fixed pixel positions and colors, while the eyebrows animate upward and back down over four seconds via chained `transition().duration(2000)` calls, demonstrating D3's built-in animation for SVG attribute interpolation.

Loading thumbnail…

Hello VizHub

This example shows a simple text message rendered in the browser. It uses D3.js version 5 to select a `<div>` element by its ID and set its text content to a string imported from a separate ES6 module. The message is styled with CSS to be large and centered. It demonstrates how to combine local modules, external libraries, and stylesheets in a minimal VizHub project.