D

daigokawabe

@daigokawabe·24 public vizzes

Loading thumbnail…

Untitled

This example displays a schedule of USDA Cotton: World Markets and Trade release dates in a static HTML table. The table lists each release's date, time in EST, and description, with rows generated using AngularJS directives like `ng-repeat`. The separate CSS file defines styling for map elements, including hover effects (turning states red) and white state borders, though no map is present in the provided HTML. The visualization relies on AngularJS for data binding and HTML table structure for presentation.

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries filled with light green and outlined in black, set against a dark blue sphere representing the globe. The visualization uses D3.js v5 and the topojson library to load country boundaries from the world-atlas dataset, then renders them as SVG paths. The code applies a geoNaturalEarth1 projection through d3.geoPath, first drawing the sphere background and then appending a path for each country feature.

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map visualizes global economic data by country, with color encoding based on a scale domain. The map supports interactive filtering: users click entries in a color legend to highlight matching countries and dim all others, while a hover effect is also present. The visualization is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` for map projections. Data processing uses the `topojson` library to convert TopoJSON data for rendering. The map displays world country outlines from a world-atlas dataset, with a tooltip showing country names and values.

Loading thumbnail…

Choropleth Map

A choropleth map colors world countries by their economy classification using an ordinal color scale with a diverging spectral scheme. The visualization includes a color legend and supports zooming and panning via d3.zoom. Geographic shapes are rendered with d3.geoPath and a natural Earth projection, using TopoJSON data from world-atlas and TSV metadata from the same source. Country names and economy values appear as tooltips.

Loading thumbnail…

Color and Size Legends

This example demonstrates how D3 legends can encode data through color and size. Two separate legends are rendered with SVG: a color legend uses an ordinal scale to map fruit categories to distinct hues, while a size legend uses a square-root scale to represent numeric values with scaled circle radii. The code builds reusable legend components using D3’s data join pattern, applying scales like `scaleOrdinal` and `scaleSqrt`, with manual spacing and text offsets for tick labels.

Loading thumbnail…

Let's make a JPN map with D3.js!

This example displays a black-and-white map of Japan with prefecture boundaries rendered as white strokes, using the jpn-atlas dataset as its geographic source. It loads the data from a remote JSON file and applies a Mercator projection through `d3.geoMercator` and `d3.geoPath` to generate SVG paths for each prefecture. The code uses `topojson.feature` to convert the TopoJSON into GeoJSON, then binds the features to path elements in the SVG. The visualization demonstrates a straightforward D3 v5 workflow for choropleth preparation.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using data from the United Nations World Population Prospects 2020. It uses D3 v5 with `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` to render an SVG bar chart with horizontal bars. The chart includes labeled axes, axis tick lines, and a title, with population values formatted in abbreviated units like “B” for billions.

Loading thumbnail…

Let's make a US map with D3.js!

This example renders a map of the United States using state boundaries. The map is drawn as black paths with white strokes on an SVG canvas. The code loads GeoJSON state outlines from the `us-atlas` package, converts them into topological features with the `topojson` library, and projects them using `d3.geoAlbers` with `d3.geoPath` for rendering. The visualization demonstrates a basic choropleth-ready framework without additional data encoding.

Loading thumbnail…

Blank Canvas

The example "Blank Canvas" displays a full-window, rounded-corner rectangle rendered as a blank SVG canvas. It uses D3 v5’s `select` to target the `svg` element, then sets its width and height to match the browser’s viewport dimensions. A single `rect` is appended with a 40-pixel corner radius, creating a simple, empty frame. The styling fixes the body and hides overflow, ensuring the canvas fills the screen without scrolling.

Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map with country boundaries rendered in light green on a dark blue sphere, using d3.geoNaturalEarth1 and d3.geoPath. Hovering over a country turns it red, revealing its name via SVG title elements from world-atlas TSV data. Pan and zoom interactions are implemented with d3.zoom, which applies a transform to the map’s parent group element. The visualization uses topojson to parse the countries-50m.json TopoJSON file.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3, showing how graphical elements respond to changes in an array of fruit objects over time. A bowl of apples is gradually modified as fruits are removed, and one apple transitions into a lemon, with all shapes and colors updating accordingly. The code uses D3’s selection merging (`selection.enter().append()`, `.merge()`, and `.exit().remove()`) to handle the incremental changes, while `scaleOrdinal` maps fruit types to colors and radii. The visualization is rendered as SVG within a React framework, using D3 v5.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for dynamic data visualization, showing a bowl of fruit where items are added, removed, or changed over time. The scene, rendered as SVG, depicts apples and lemons as colored circles with labels, initially displaying five apples, then sequential updates simulate eating an apple, replacing one with a lemon, and removing another. The code uses d3.scaleOrdinal for color and radius mappings, while the fruitBowl function manages enter, update, and exit transitions using D3's select and merge operations.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates D3’s general update pattern for managing dynamic data in SVG. Circles and labels represent fruits, with apples and lemons distinguished by color and size via ordinal scales. The code uses `selection.enter()`, `selection.merge()`, and `selection.exit()` to handle added, updated, and removed elements as the fruit array changes over time. Written in React and D3 v5, it shows how to bind data, update attributes, and remove exiting nodes efficiently.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3 for animating a dynamic dataset of fruits. It shows a bowl of apples and lemons as circles, where fruits are added, removed, or changed over time. The visualization uses D3's `transition` API to animate radius changes on enter, update, and exit, with `scaleOrdinal` mapping fruit types to colors and sizes. The React-based code mutates an array and re-renders, showing how the `merge` and `remove` operations handle state transitions fluidly.

Loading thumbnail…

World Population by Year 2015

This example visualizes world population trends over time with a single filled area chart, using an SVG renderer within a 960 by 500 canvas. The chart maps time on the x-axis and population on the y-axis, with the area filled in maroon and labeled axes for both dimensions. The code uses D3 v5 APIs such as `scaleTime`, `scaleLinear`, `area` with `curveBasis`, and `axisLeft`/`axisBottom` to generate the visualization. Population data is loaded from a CSV file, with years parsed as JavaScript `Date` objects and population values converted to numbers.

Loading thumbnail…

Temperature in San Francisco Line chart

This visualization shows a week of temperature data in San Francisco as a smooth, maroon area chart with time on the x-axis and temperature on the y-axis. The code uses D3 v5 to load CSV data, scale the time and linear axes, and generate the area path with the `d3.area()` generator and a `curveBasis` interpolation. Gridlines are drawn via axis tick marks, and the SVG is rendered with labeled axes and a title.

Loading thumbnail…

Temperature in San Francisco Line chart

This visualization displays temperature data for San Francisco over a week, using a line chart to show the trend over time. The chart includes labeled axes for time and temperature, a title, and a smoothed line generated with d3.line and curveBasis. The code loads data from a CSV file, parses timestamps and numerical temperature values, and renders the visualization using D3 v5 with an SVG canvas. Axes are drawn using d3.axisLeft and d3.axisBottom, with scales created via d3.scaleTime and d3.scaleLinear.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. Blue circles mark each data point, and the chart includes labeled axes and a title. The visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render an SVG. Data is loaded from a CSV file hosted on VizHub, with timestamps parsed as JavaScript `Date` objects and temperatures converted to numbers before plotting.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between vehicle weight and horsepower using data from the auto-mpg dataset loaded via `d3.csv`. The visualization employs `d3.scaleLinear` with `d3.extent` and `.nice()` to map weight on the x-axis and horsepower on the y-axis, with blue semi-transparent circles rendered as SVG elements. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, complete with rotated labels, tick marks, and a title. The chart uses margins to position a grouped `<g>` element, demonstrating fundamental D3 data binding and scales.

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of prefectures in eastern Japan, with each circle positioned along a linear x-axis for population values and a point-based y-axis for prefecture names. The visualization uses D3 v5’s `scaleLinear` and `scalePoint` to map data from the CSV file, which lists prefecture names and raw population figures multiplied by 1,000. Axes are rendered with `axisLeft` and `axisBottom`, including tick lines and formatted labels via `format('.2s')`. The chart includes a title and an axis label, with circles styled in steelblue.

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population counts for East Japan’s most populous prefectures, with custom-styled axes for readability. It loads CSV data using `d3.csv`, scales populations with `d3.scaleLinear` and prefectures with `d3.scaleBand`, and renders bars as SVG `rect` elements. The axes are built with `d3.axisLeft` and `d3.axisBottom`, using `d3.format` for compact number labels and custom tick sizes and gridlines. Axis labels and titles are added manually, with the default domain lines removed for a cleaner design.

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the populations of 19 eastern Japanese prefectures, using data from the United Nations World Population Prospects 2020 estimates, converted to absolute values (multiplied by 1,000). Built with D3 v5, the visualization maps population to a linear scale (`scaleLinear`) for the x-axis and prefecture names to a band scale (`scaleBand`) for the y-axis, rendering bars as SVG `rect` elements. Axes are added via `axisLeft` and `axisBottom`, with all marks styled in steel blue using a global CSS rule.

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a plain white page using CSS styling. It serves as a minimal starting point for web-based visualizations, demonstrating the basic structure of an HTML document with a linked stylesheet and embedded script. The page uses a large font size to emphasize the simplicity of the layout, while the accompanying JavaScript logs a message to the browser’s developer console, illustrating where to begin adding interactive code. It is implemented with vanilla HTML, CSS, and JavaScript—no external libraries or data sources are involved.

Loading thumbnail…

Let's make a face with D3.js!

This example shows a simple yellow face constructed from basic SVG shapes, with two eyes, eyebrows, and a mouth, all centered in a 960 by 500 canvas. D3.js v5 handles the SVG generation and layout, using `select` to target the existing `<svg>` element and `arc` to create the mouth’s curved path. The face’s features are positioned with explicit pixel offsets, and a group element translates the entire composition to the center, demonstrating a straightforward, programmatic approach to drawing with D3.