Muiruriscode

Fork of Bowl of fruit general update pattern

A fork of the "Bowl of fruit" example demonstrates the D3 general update pattern for dynamic SVG visualizations. The code renders a wooden bowl containing fruit circles, with apples and lemons distinguished by color and radius via `scaleOrdinal`. Over timed intervals, `setTimeout` modifies the fruits array by removing elements and changing types, while the `fruitBowl` function uses `enter`/`merge`/`exit` selections to append, update, and remove groups accordingly. The example uses D3 v5 with ES6 modules for data-driven DOM manipulation.

Bowl of fruit general update pattern

Five circles representing fruit appear in a row. The general update pattern removes one fruit, then changes the third apple into a lemon, and finally filters out another fruit, with each change using enter, update, and exit selections via `selection.data`, `selection.enter`, `selection.merge`, and `selection.exit`. The code uses d3 v5 with an ordinal color scale and radius scale, rendered as SVG elements with a `fruitBowl` function.

Fork of Bowl of Fruit - General Update Pattern

Five apples appear in a row, then a sequence of timed changes demonstrates the D3.js general update pattern: one apple is removed, another becomes a lemon, and a second apple is removed. The fork renders with SVG circles using D3 v5, leveraging `scaleOrdinal` for color and radius mappings. The reusable `fruitBowl` function applies the standard enter, merge, and exit selection workflow with `selection.data`, showing how to handle dynamic data updates in D3.

World Population area chart

This visualization presents global population trends from 1800 to 2015 as an area chart, with time on the x-axis and population on the y-axis. The chart uses D3.js v5 with an SVG renderer, employing `d3.area` with a curved basis to fill the region beneath the line, while `d3.scaleTime` and `d3.scaleLinear` handle the axes. Data is loaded from a CSV file using `d3.csv`, and formatting converts values to billions for readability.

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. The chart uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.area` with a `curveBasis` to create the shaded region. The data is loaded from a CSV file via `d3.csv`, and axes are generated with `d3.axisBottom` and `d3.axisLeft`, which include gridlines and labeled tick marks.

Fork of Line chart

This fork of D3 v5 line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas's Sense Your City dataset. The SVG rendering plots temperature over time using `scaleTime` and `scaleLinear` axes, with `axisLeft` and `axisBottom` for ticks and labels. A `line` generator with `curveBasis` draws the smoothed temperature path, while styled circles and axis-label text are configured via CSS classes.

Line chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from Data canvas-sense your city. The visualization uses D3 v5 to render an SVG with a time-scaled x-axis and linear y-axis, featuring red circles for individual data points connected by a thick red line path. The code implements `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs, with gridlines and axis labels styled via CSS.

Scatter plot

This scatter plot visualizes one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The D3.js code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to map the data, rendering red semi-transparent circles in an SVG. The data is loaded via `d3.csv` from a remote dataset, and axes include labeled titles with gridlines, while a main title appears above the plot.

Fork of Scatter plot

This scatter plot visualizes the relationship between car horsepower and fuel efficiency (MPG) using the Auto MPG dataset. The visualization renders circles as SVG elements, with axes labeled and styled using custom CSS. The implementation leverages d3's `scaleLinear` for coordinate mapping, `axisLeft` and `axisBottom` for axis generation, and `csv` to load the data from a remote source, with parsed numeric fields.

Cars

This chart displays the population of sub-Saharan African countries in 1950, using a lollipop chart with circular markers to represent each country’s population value. The data, sourced from the United Nations World Population Prospects 2017, is loaded from a CSV file and rendered as an SVG. The visualization uses d3.scaleLinear for the x-axis, d3.scalePoint for the categorical y-axis, and d3.axisBottom and d3.axisLeft to draw grid lines with tick labels.

Customizing axes

This bar chart displays the population of Sub-Saharan African countries in 1950, using data from the United Nations World Population Prospects 2017. The visualization customizes both axes: the y-axis removes its domain and tick lines for a cleaner look, while the x-axis formats population values with d3’s `format('.3s')` and adds negative tick sizes to create gridlines. Built with d3.scaleBand and d3.scaleLinear, the chart renders as SVG rectangles with a steelblue fill and includes a title and axis label.

Bar chars with d3.js

This bar chart displays the populations of sub-Saharan African countries in 1950, based on data from the United Nations World Population Prospects 2017. Each bar’s length is proportional to population in thousands, with country names listed along the vertical axis. The visualization is rendered as an SVG using d3.v5, leveraging `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` for gridlines. Data is loaded from a CSV file and processed with the `csv` method.

Make a face with d3.js

This example builds a simple, animated face using D3.js on an SVG canvas. A yellow circle forms the head, with smaller circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The code demonstrates ES6 module imports, D3’s `select` and `arc` APIs, and a chained `transition().duration()` sequence that repeatedly raises and lowers the eyebrows.

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS styling. Circles and rectangles are drawn with static positions, colors, and stroke properties, while a line and path are grouped together to showcase shared stroke attributes. The visualization uses D3 v5 imported via UNPKG and leverages the `select` function from D3, though the code primarily relies on raw SVG markup within the HTML. Local ES6 modules and CSS from external files are also imported to structure the project.