aidatabaeva

@aidatabaeva·11 public vizzes

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations estimates, with population values in thousands. It demonstrates custom axis styling and formatting using D3 v5, including tick labels with abbreviated numbers (e.g., "B" for billions), removed axis lines, and custom title and label text. The visualization uses d3.scaleLinear, d3.scaleBand, axisLeft, and axisBottom, while also enabling zoom functionality via d3.zoom on the SVG container.

Dec 31, 2022

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 with special cases for enter, update, and exit selections, using a bowl of fruit metaphor to show how data changes animate smoothly. Apples and lemons are rendered as circles with distinct colors and radii, positioned in a row inside a rectangular bowl. The code imports `scaleOrdinal` for color and radius mappings, uses `selection.merge` to handle updates, and applies `transition().duration(1000)` to animate radius changes. Data mutations—adding, removing, or altering fruit types—are triggered by `setTimeout` in the main script, with SVG elements and text labels updating accordingly.

Dec 28, 2022

Loading thumbnail…

Fork of Bowl of Fruit - Animated Transitions

Five circles represent apples in a row, each colored red. The animation uses animated transitions to choreograph changes over time: one apple disappears, another turns yellow to become a lemon, and a third is removed, with circles shrinking and growing during enter, update, and exit states. Built with d3 v5, the `fruitBowl` function uses `selection.transition().duration()` to animate attributes and `scaleOrdinal` for color and radius scales, rendering as SVG.

Dec 28, 2022

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for dynamic data visualization, showing how SVG circles representing a bowl of fruit change over time as items are removed or modified. The visualization begins with five apples, then sequentially removes an apple, changes another apple into a lemon, and deletes a different apple through timed JavaScript setTimeout calls. The code uses d3.scaleOrdinal for color and radius mappings, d3.select for SVG element selection, and the fruitBowl function implements the enter, merge, and exit lifecycle methods. Each circle's position, size, and fill color update reactively as the underlying fruits array changes.

Dec 28, 2022

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 with special cases where data enters, exits, and mutates in place. It shows a bowl of fruit where apples are eaten, replaced by lemons, and removed from different positions over time. The visualization uses D3 v5 with `scaleOrdinal` for color and radius mapping, and SVG elements (`rect`, `circle`, `text`) bound to data via `selection.data()`. The code explicitly handles enter, update, and exit selections using `merge()` and `.remove()` to manage transitions.

Dec 28, 2022

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures, with d3.line and the curveBasis curve smoothing the path. It renders as an SVG with gridlines from axis ticks, axis labels, and a centered title. The code parses CSV data, converts temperature to numbers and timestamps to Date objects, then draws the chart using d3.axisBottom and d3.axisLeft.

Dec 27, 2022

Loading thumbnail…

Fork of World Population Area Chart

This chart visualizes world population over time, using an area chart where the filled region represents population counts across years. The data is loaded from a CSV file and rendered as SVG. The visualization is built with D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and an `area` generator with `curveBasis`. The y-axis labels are formatted using `format('.1s')` to display billions. The chart includes a title, axis labels, and grid lines, all styled via CSS. The underlying data spans historical population estimates up to 2015.

Dec 27, 2022

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between weight and acceleration for cars from the UCI Machine Learning Repository's Auto MPG dataset. Each green, semi-transparent circle represents a car, with position determined by the `scaleLinear` functions mapping weight and acceleration values to SVG coordinates. The visualization includes axis labels and a title, with tick marks and gridlines styled through CSS. The code uses D3 v5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to process and render the data.

Dec 26, 2022

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. Each red semi-transparent circle represents a car, with axes labeled and gridlines drawn using D3’s `scaleLinear`, `axisBottom`, and `axisLeft`. The SVG rendering uses d3.csv to load data, parses numeric fields, and appends circles with attributes set via scales. Titles and axis labels are added with D3’s text selections, while styled CSS controls circle opacity, tick marks, and font sizes.

Dec 26, 2022

Loading thumbnail…

Fork of Customizing Axes

This visualization displays a horizontal bar chart ranking the top 10 most populous cities using 2022 population estimates from World City Populations. The bars are styled with steelblue fills, and the chart features customized axes with tick marks, grid lines, and labels. The code uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with d3.axisBottom and d3.axisLeft for rendering the axes. It also applies d3.format to abbreviate large population numbers, replacing 'G' with 'B' for billions. The visualization is rendered as an SVG.

Dec 23, 2022

Loading thumbnail…

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

A smiling yellow face is drawn entirely in SVG, with its features initially arranged in a neutral expression before an animated sequence runs once on load. The eyes overlay white pupils, while the black eyebrows and mouth rotate into angled positions over two seconds. The example demonstrates core D3.js v5 DOM manipulation and transitions using `d3.select`, `append`, and `transition.attr`, constructing the mouth with the `d3.arc` path generator. All shapes are positioned via SVG transform attributes and transitions, with no external data source.

Dec 22, 2022