R

Robindj2000

@Robindj2000·20 public vizzes

Loading thumbnail…

test

This scatter plot displays the number of deaths for various countries, using a red dot for each nation along a vertical country axis and a horizontal death-count axis. Built with D3 v7, it loads data from a local CSV file, which is also drawn from the UCI Auto MPG dataset, and renders as an SVG. The code uses `d3.csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the visualization, with custom formatting and a data join to append circles.

Loading thumbnail…

Presentation Enter, exit and update

Six circles, initially red and arranged horizontally, demonstrate the D3 enter, update, and exit lifecycle. The animation updates the data array and re-renders: after two seconds, one circle is removed via `exit().remove()`, and after four seconds, the first circle updates from type 'A' to 'B', changing its fill color through a 2-second `transition()`. The SVG renderer uses `d3.scaleOrdinal` for color mapping.

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart ranking the population of the top 10 most populous countries, with a customized axis style. The chart uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to generate the axes. The code removes default axis lines and domain paths, then applies custom styling via CSS for tick labels, grid lines, and a title. The visualization renders to SVG elements.

Loading thumbnail…

Template Enter, exit and update

This example demonstrates the fundamental D3 data-join pattern by explicitly separating enter, update, and exit selections for a set of objects. The code initializes an SVG canvas with a color scale and an empty array of objects, then defines a render function that handles the three states, though the specific visual behavior is left as a template exercise. Using d3.scaleOrdinal and d3.range, it sets up the scaffolding for binding data to SVG elements, with placeholder functions for adding and updating objects. The example serves as a workshop template for understanding how D3’s enter, update, and exit selections drive dynamic visualizations.

Loading thumbnail…

Deaths Scatter plot

A scatter plot displays annual deaths for ten countries using red, semi-transparent circles. The chart reads data from a CSV file, multiplies each death count by 1,000, and positions points using D3’s `scaleLinear` for the y-axis, while the x-axis uses `scalePoint` for country names. Axes are rendered with `axisLeft` and `axisBottom`. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset. D3 v7, SVG, and the `csv` and `select` APIs handle the visualization.

Loading thumbnail…

Scatter plot

This scatter plot displays the population of the top ten most populous countries using circles arranged along a categorical y-axis and a linear x-axis. The visualization encodes population values with circle positions, and the data is loaded from a CSV file. The implementation uses D3 v7 APIs including `select`, `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render axes and circles as SVG elements.

Loading thumbnail…

Christmas tree

A standalone SVG Christmas tree is drawn inside an empty `<g>` element, with the page layout controlled by minimal CSS. The example relies on the browser’s native SVG rendering rather than any JavaScript libraries or data-binding APIs, as the markup contains no dynamic elements or external data sources. The tree itself is a static graphic, shown at a fixed 960×500 pixel viewport, with the SVG’s internal coordinate system defining the shape. No interaction or animation is present, making the visualization a purely decorative, code-only illustration.

Loading thumbnail…

presentation bar chart

This horizontal bar chart displays deaths per country, with each bar’s length proportional to the death count. The chart uses D3 v7’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for the axes. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles. The computed values are multiplied by 1000, and bars are styled maroon with a 0.3 padding between bands.

Loading thumbnail…

Making a bar chart

This bar chart displays the population of the ten most populous countries, with countries on the vertical axis and population values on the horizontal axis. The visualization uses d3.csv to load data from a CSV file, d3.scaleLinear for the population scale, and d3.scaleBand for the categorical country axis. Rectangles are rendered in SVG, with axes generated via d3.axisLeft and d3.axisBottom. The chart applies a margin convention and transforms a group element to position the plot area, with bars styled using CSS fill.

Loading thumbnail…

Presentation SVG

This example demonstrates how to style and manipulate basic SVG circle elements using D3.js selections. The static HTML page contains three circles positioned horizontally, and the JavaScript code first applies a uniform red fill to all circles, then conditionally recolors them based on their index—alternating between red and blue. The visualization relies on D3's `selectAll` method to query SVG elements and the `style` method to set CSS properties. The circles are rendered as static SVG shapes without any data binding or interaction, showcasing simple DOM manipulation with D3 v7.

Loading thumbnail…

bowl off fruit click

Five circles, designed as apples and lemons, are shown in an SVG canvas. The visualization demonstrates D3 transitions as the dataset changes over time: a fruit is removed, an apple transforms into a lemon, and another fruit is deleted. The code uses D3's `selectAll`, `data`, and `transition` APIs to animate circle radius and x-position over two-second durations. Each circle has a click handler that logs to the console, and the color and size are mapped via `scaleOrdinal` based on the fruit type. The data is generated programmatically with `Math.random` for unique identifiers.

Loading thumbnail…

general update pattern

The general update pattern demonstrates how D3 handles data joins with enter, update, and exit selections in a simple SVG animation. Apples and lemons appear as colored circles that transition their position and radius over two seconds. The code uses d3.select, scaleOrdinal for color and size mapping, and transition().duration() with attr() to animate changes. Data updates remove fruits, alter types, and filter the array at timed intervals, showing how d3.v7 merges selections and removes exiting elements smoothly.

Loading thumbnail…

World population area chart

This area chart shows the growth of world population over time, with a smooth, filled curve rendered in royal blue. The visualization uses D3 v7’s `area` generator with a basis curve, mapping time on the x-axis and population count on the y-axis. Axes are drawn with `axisBottom` and `axisLeft`, while `scaleTime` and `scaleLinear` manage the scales. Data comes from a CSV file containing historical population estimates, and the chart is rendered as an SVG with labeled axes and a title.

Loading thumbnail…

Temperature San. Fran. area chart

This visualization displays a week of temperature readings in San Francisco using a smooth area chart. The chart plots time on the x-axis and temperature in Celsius on the y-axis, with the area between the line and baseline filled in royal blue. The code loads CSV data from Data Canvas and renders it as SVG using D3 v7 APIs, including d3.area with curveBasis, scaleTime, scaleLinear, and axisBottom/axisLeft. The axes include gridlines and rotated axis labels, with a title positioned above the plot area.

Loading thumbnail…

Temperature San. Fran. line chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from the Data Canvas - sense your city initiative. The visualization captures temperature fluctuations over time using a smooth, curved line rendered as an SVG path. Built with D3 v7, it uses `scaleTime` and `scaleLinear` for axes, `d3.line` with `curveBasis` for the path, and `axisBottom` and `axisLeft` for tick marks and labels. The chart includes a title, axis labels, and styled grid lines, with data loaded asynchronously from a CSV file.

Loading thumbnail…

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, with positions mapped by d3.scaleLinear scales and axes rendered using d3.axisLeft and d3.axisBottom. The SVG output includes tick marks, axis labels, and a title, all styled via external CSS. Data is loaded asynchronously with d3.csv and parsed into numeric values before being bound to circles with d3’s data join.

Loading thumbnail…

A face with D3.js

A face rendered as vector shapes smiles with a winking animation as one eyebrow rises and falls. Built with D3.js v7, the SVG composition uses circles for the yellow head and eyes, rectangles for eyebrows, and `d3.arc` paths for the mouth and tongue. The right eyebrow animates through chained `transition().duration()` calls, creating a subtle three-second loop.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates primitive SVG shapes—circles and rectangles—with inline fill attributes, alongside grouped elements that inherit styling and a polyline path. The code uses raw SVG elements and CSS classes, where the `.lines` class applies stroke properties and the `.lines path` rule adds a red rounded stroke. A `<g>` element with a transform attribute shifts a pink-and-black group of shapes, while CSS sets the page margin and overflow. No JavaScript libraries are involved; the rendering relies solely on SVG markup and stylesheet rules.

Loading thumbnail…

Html Cars Report

This example shows a simple cars report listing three vehicles with their model years and prices. The first item, a 2012 Nissan Leaf, is highlighted in red to draw attention to it. The page uses plain HTML with an unordered list and CSS styling applied through a linked stylesheet. The body sets a large monospace font, and the `.highlighted` class changes text color, demonstrating basic HTML list rendering with CSS class-based visual emphasis.

Loading thumbnail…

Cars report

This example displays a text-based report of cars priced under $2,500, listing each vehicle’s year, make, model, and price from a hardcoded JSON array. It demonstrates JavaScript module usage and asynchronous data handling, using `getCars()` with a simulated two-second delay, `generateReport()` to filter and format entries, and `formatCar()` for string output. The `index.html` shows the result in a `<pre>` element via DOM manipulation in `index.js`.