gmille22

@gmille22·8 public vizzes

Bowl of Fruit - Interactive

This interactive example uses D3 v5 to visualize a bowl of fruit as colored circles on an SVG canvas. Apples appear as red circles and lemons as yellow ones, with their radii scaled by fruit type via `scaleOrdinal`. The visualization dynamically updates over time: the fruit count decreases, one apple transforms into a lemon, and an apple is removed from the sequence. Clicking on fruit triggers an `onClick` handler that selects a fruit, though the code does not visibly alter the rendering based on that selection.

Apr 21, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit demonstrates D3’s general update pattern with special cases: adding five apples, removing one, changing an apple into a lemon, and deleting a middle apple. The visualization uses the D3 v5 selection methods `enter`, `merge`, and `exit` with SVG circles and text labels. The `fruitBowl` function applies ordinal scales via `d3.scaleOrdinal` for fruit color and radius, while `setTimeout` triggers each state change.

Apr 21, 2020

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population by year from 2015 data, using a smooth, filled curve to show growth over time. The code imports specific D3 v5 modules like `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to construct the chart, with axes formatted to abbreviate large numbers. The SVG rendering includes labeled axes for population and date, a titled chart area, and a styled path with a steel-blue fill and stroke. Data is loaded via `csv` from a remote URL and parsed before rendering.

Apr 20, 2020

Loading thumbnail…

Basic Bar Chart - Country Population

This example shows the population of ten countries using a horizontal bar chart, with countries sorted along the y-axis and population values mapped to bar width via `scaleLinear` and `scaleBand`. It applies a custom tick formatter that abbreviates large numbers with `format('.3s')`, replacing 'G' with 'B'. The SVG is rendered with D3 v5, using `csv` to load the dataset, `axisLeft` and `axisBottom` for axes, and margin-based layout. Data values are multiplied by 1000 after import, and the chart includes a title and population axis label.

Apr 20, 2020

Loading thumbnail…

Temperature in San Fran Scatter

This example visualizes a week of temperature readings in San Francisco, plotting each data point as a small circle on a time-scaled x-axis and a linear temperature y-axis. It also layers a smooth area chart over the scatter plot to emphasize the temperature trend. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis`, rendering to SVG. Data is loaded from a CSV file via `csv`, with timestamps parsed as dates and temperatures converted to numbers.

Apr 7, 2020

Loading thumbnail…

Temperature in San Fran Scatter

This chart visualizes a week of temperature readings in San Francisco using a line graph overlaid on a scatterplot-style axis. The data comes from a CSV file loaded via `d3.csv`. The visualization uses `d3.scaleTime` and `d3.scaleLinear` to map timestamps and temperatures, with `d3.axisLeft` and `d3.axisBottom` for the axes. A smooth curve is drawn using `d3.line` with `curveBasis`, and the SVG rendering includes gridlines and clear axis labels.

Apr 7, 2020

Loading thumbnail…

Basic Scatter Plot

This example shows a scatter plot of car weight against horsepower, with each circle representing a vehicle and axes labeled accordingly. The visualization uses D3 v5's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs to map data values to SVG coordinates, while `csv` loads the auto-mpg dataset from a remote URL. Gridlines are drawn via tick sizes, and axes labels and a title are appended as SVG text elements.

Apr 4, 2020

Loading thumbnail…

Basic Bar Chart - Country Population

The chart displays the population of ten countries as horizontal bars, with China and India dwarfing the others. It uses D3 v5 APIs including `d3.csv` for data loading, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and SVG `rect` elements for rendering. The y-axis labels are positioned to the left, while value ticks appear along the bottom. Population values are imported from a CSV file and multiplied by 1,000 to represent actual figures.

Apr 2, 2020