gitSushi

d3 Starter Bowl of Fruit - General Update Pattern

This example demonstrates the "general update pattern" in D3.js v5 by rendering a static bowl of fruit—a set of apples and a lemon—as SVG shapes. The visualization dynamically updates the fruit bowl through a series of timed events, removing apples, replacing one with a lemon, and filtering out another, using the `selectAll`, `enter`, `merge`, and `exit` methods (e.g., `selection.selectAll('g').data(fruits)`, `groups.enter().append('g')`) to handle element creation, updating, and removal. The code uses D3's `scaleOrdinal` for color and radius mapping, with the SVG rendered directly as `rect`, `circle`, and `text` elements. Data is generated via `range(5)` and `makeFruit` functions, reacting to `setTimeout` callbacks that call `render()`.

d3 Starter Bowl of Fruit - General Update Pattern

Five circles representing apples appear in a row, then animate to illustrate the general update pattern with d3.v5. The visualization uses the d3 `select` and `range` functions, along with custom `fruitBowl` logic, to manage enter, update, and exit transitions over one-second intervals. Apples are removed, one changes to a lemon with a different color and radius scale, and the remaining circles animate position and size using `transition().duration(1000)`. Data is generated randomly with `Math.random()`.

d3 Starter Temperature in San Francisco Area Chart

This area chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses D3.js v5 to render an SVG, with `scaleTime` and `scaleLinear` mapping timestamps and temperatures. The area path is generated using `d3.area()` with a `curveBasis` interpolation. Axes are constructed via `axisBottom` and `axisLeft`, including labels for time and temperature. The chart includes a title and styled grid lines, with all data loaded asynchronously from a CSV file.

d3 Starter Temperature in San Francisco 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 scaleTime and scaleLinear for axes, axisBottom and axisLeft for ticks, and d3.line with curveBasis to create a smooth path. The chart includes axis labels and a title, with data loaded via d3.csv and parsed into Date and numeric values.

d3 Starter Temperature in San Francisco Scatter plot

This scatter plot visualizes one week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. Each green circle represents a data point from the Data Canvas - Sense your City dataset, loaded via D3’s `csv` function. The code uses `scaleTime` and `scaleLinear` to map data to SVG coordinates, with `axisBottom` and `axisLeft` generating gridlines and labels. Axes remove their domain lines, and custom text elements add axis titles and a chart title, all rendered as SVG elements.

d3 Starter 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 red, semi-transparent circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis. The visualization uses d3.scaleLinear with explicit margins and axes, rendered as SVG. Axis labels and a title are added using d3.axisBottom and d3.axisLeft. Data is loaded as CSV and parsed with D3’s csv method.

d3 Starter scatter plot

A d3.js scatter plot displays the top ten most populous countries, using a linear scale for population on the x-axis and a point scale for country names on the y-axis. The code loads data from a CSV file with d3.csv, then renders circles with d3.scaleLinear, d3.scalePoint, d3.axisLeft, and d3.axisBottom. The chart includes grid lines, axis labels, and a title, with population values formatted in billions using d3.format. The visualization is built with SVG and styled via external CSS.

d3 Starter customizing axes

A horizontal bar chart displays the top 10 most populous countries, with population values in millions and country names on the y-axis. The visualization customizes axes by formatting tick labels with `d3.format` to abbreviate large numbers, removing the y-axis domain and tick lines, and adding a chart title and axis label. Grid lines are created via `tickSize(-innerHeight)` on the `axisBottom` scale, while the y-axis uses `scaleBand`. Data is loaded from a CSV file with `d3.csv`.

d3 Starter bar chart

This bar chart displays the population estimates of the top 10 most populous countries, based on 2018 data from the United Nations World Population Prospects 2017. The visualization uses D3.js (v5) to load a CSV file and render SVG rectangles. It employs `scaleLinear` for the population axis and `scaleBand` for the country categories, with axes generated via `axisLeft` and `axisBottom`. The code applies the margin convention to position the chart and uses a data join with `selectAll` and `enter` to create the bars.

d3 Starter smiley face

This example shows a simple animated smiley face built with D3.js v5 and rendered as SVG. The face consists of a yellow circle with eyes, eyebrows, and a mouth drawn using SVG shapes and an arc path. The eyebrows animate up and down via chained `transition().duration()` calls, creating a winking or expressive effect. The code uses D3's `select` and `arc` APIs, along with SVG attributes and transforms, to position and style each element relative to the center of the canvas.