ecw99

Temperature in San Francisco Line Chart

This line chart displays one week of temperature in San Francisco, using data from Data Canvas - Sense Your City. It visualizes temperature variations over time with a filled area beneath the line, rendered as SVG. The visualization uses d3.scaleTime, d3.scaleLinear, d3.area with curveBasis, and axes from d3.axisBottom and d3.axisLeft. Data is loaded as CSV and parsed with dates and numeric temperatures before rendering.

Customizing Axes

This bar chart displays the heights of 46 wide receivers from a CSV dataset, with the top 10 most populous countries’ population data noted in the README. It demonstrates custom D3 v5 axes by styling tick labels, tick lines, and an axis label with large sans-serif fonts and custom colors. Using the `d3.select` and `d3.csv` APIs, the SVG renders with steelblue bars, while the axis customization is applied via CSS classes on the `.tick` and `.axis-label` elements.

Customizing Axes

This bar chart displays the heights of 46 wide receivers from a CSV dataset, with the top 10 most populous countries’ population data noted in the README. It demonstrates custom D3 v5 axes by styling tick labels, tick lines, and an axis label with large sans-serif fonts and custom colors. Using the `d3.select` and `d3.csv` APIs, the SVG renders with steelblue bars, while the axis customization is applied via CSS classes on the `.tick` and `.axis-label` elements.

Customizing Axes

This example visualizes the heights of wide receivers from the 2010 NFL draft, using data from a local CSV file. It builds on a basic bar chart to demonstrate how D3 axes can be customized, applying styled tick labels, grid lines, and axis titles through the `d3.axisLeft` and `d3.axisBottom` APIs. The SVG rendering uses `d3.scaleBand` and `d3.scaleLinear` for the chart’s scales, with formatting via `d3.format`.

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 UN population estimates, converted from thousands to raw numbers. The example emphasizes customizing D3 axes: the x-axis disables its domain, uses a custom tick formatter (converting 'G' to 'B'), and adds grid lines with negative tick sizes, while the y-axis removes its domain and tick lines entirely. It also styles tick text, axis labels, and the title via CSS. The visualization relies on D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` within an SVG rendering.

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 UN population estimates, converted from thousands to raw numbers. The example emphasizes customizing D3 axes: the x-axis disables its domain, uses a custom tick formatter (converting 'G' to 'B'), and adds grid lines with negative tick sizes, while the y-axis removes its domain and tick lines entirely. It also styles tick text, axis labels, and the title via CSS. The visualization relies on D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` within an SVG rendering.

Dataflow of World Countries Tree

The visualization shows a hierarchical tree of world countries organized by continent and sub-region. It presents the data as a horizontal dendrogram with labeled nodes and links. The D3 cluster layout computes node positions, and two sets of SVG paths are drawn: static links and animated “flow” paths with a dashed green stroke that cycles offsets via CSS keyframes, suggesting data movement down the hierarchy. The code uses D3’s `cluster`, `hierarchy`, `linkHorizontal`, `zoom`, and `event` modules, with text labels for each country and region.

Let's make a bar chart

This example shows a horizontal bar chart of population estimates for eight countries, scaled from a CSV file. It uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.axisLeft`/`d3.axisBottom` to draw the ticks. The population values are multiplied by 1,000 in the data loading step, and bars are appended as SVG `<rect>` elements with a fixed steelblue fill.

Let's make a face with D3.js!

This example uses D3.js v5 to draw a simple face on an SVG canvas. The code selects an SVG element via `d3.select` and reads its width and height attributes, then appends a single circle with a radius of 200 pixels, centered at the midpoint of the viewport. The visualization demonstrates basic SVG shape generation and attribute manipulation using D3’s `attr` method, with the circle representing the face’s outline. No facial features are added beyond the circle, and the rendering relies on the SVG primitive directly.

HTML Starter

This HTML starter page displays the text “Hello HTML” in a large, centered font. It uses plain HTML and CSS to define the body’s text alignment and a font size of 13em. The page contains no JavaScript or data fetching, serving as a minimal template for web visualization galleries. The code is contained entirely within an index.html file, with no external libraries or frameworks.

HTML Starter

This HTML starter page displays the text “Hello HTML” in a large, centered font. It uses plain HTML and CSS to define the body’s text alignment and a font size of 13em. The page contains no JavaScript or data fetching, serving as a minimal template for web visualization galleries. The code is contained entirely within an index.html file, with no external libraries or frameworks.

HTML Starter

This example demonstrates a minimal web page that displays the text “Hello HTML” in the center of the browser window using a large, 13-em font. It serves as a bare-bones starting point for creating HTML-based visualizations or applications. The page is built with plain HTML and CSS, using a `<style>` block to center the text via the `text-align` property and to set the font size. No external libraries or data sources are involved, making it a simple foundation for further customization.

HTML Starter

This example presents a minimal web page that displays the text "Hello HTML" centered on a white background. The page is constructed using a basic HTML5 document structure, with CSS styling applied inline within a `<style>` block to set the text alignment and an extremely large font size. It serves as a starting point for creating new visualizations, demonstrating the simplest possible setup without any external libraries or JavaScript.