yejichun@naver.com

Fork of Fork of KFDA data using Vega-Lite API

This visualization displays the beta coefficients of statin exposure on various metabolite concentrations across three different covariate adjustment models, with each bar colored by metabolite group. It uses the Vega-Lite API to encode `idx` on the x-axis and `beta1` on the y-axis, with tooltips showing p-values. The data comes from a KFDA study (Korean Food and Drug Administration) and is loaded via `d3.csv`. Clicking a bar redirects to a separate `clicked.html` page that displays the metabolite title, implemented through a URL-encoded `href` link and the `URLSearchParams` API.

Sep 16, 2022

Fork of KFDA data using Vega-Lite API

A scatter plot visualizes the relationship between metabolite index and beta coefficients from the KFDA data, with points colored by metabolite group. Clicking a point navigates to a detail page for that metabolite. The visualization uses the Vega-Lite API with D3.js for data loading, and customizes the chart appearance through a configuration file, including tooltips displaying p-values.

Sep 16, 2022

KFDA data using Vega-Lite API

This scatter plot visualizes KFDA data, showing the relationship between the index of each metabolite (e.g., Alanine, Glycine, Histidine) on the x-axis and its corresponding beta coefficient (beta1) on the y-axis. The circles are colored by the metabolite's group classification, such as "Amino acids" with subgroups like "Branched-chain amino acids." The visualization is built using the Vega-Lite API, which constructs the chart specification, and rendered with Vega and Vega-Lite libraries, while the data is loaded from a CSV file using D3's `csv` function.

Sep 13, 2022

Refactored Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, sorted by population. It uses React components to render the SVG, with D3 v7 utilities `scaleBand`, `scaleLinear`, `max`, and `csv` for data loading and scaling. The axes and bars are drawn via reusable React components, with accessor functions for data fields, and the chart updates once the CSV from the UN Population dataset is loaded.

Axes with React & D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, using React to render the SVG elements and D3 to load and scale the data. The code uses `d3.csv` to fetch UN population data, `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and manually generates axis ticks with `xScale.ticks()`. D3’s `max` helper computes the domain, while React manages the loading state and maps data points to `<rect>` and `<text>` elements.

The Margin Convention

A bar chart displays the populations of the ten most populous countries, loaded from UN Population 2019 data. Using React and D3, the `scaleBand` maps countries on the vertical axis and `scaleLinear` maps population values to bar widths. SVG rectangles are rendered inside a transformed group, with the data fetched via D3’s `csv` utility. The visualization adheres to a fixed margin convention to clearly present the comparative scale.

Bar Chart

This chart uses a horizontal bar layout to display the top 10 countries from the 2019 UN Population dataset. React manages the asynchronous data loading from a CSV file, while D3 scales—specifically `scaleBand` for the categorical country axis and `scaleLinear` for the population values—determine the bar positions and widths. The SVG rectangles are rendered directly by React, with each bar’s length proportional to the 2020 population estimate. D3’s `csv` utility parses the remote data file.

Rendering Data with React & D3

A radial burst of CSS named colors, each rendered as a pie slice of equal size, fills the SVG canvas. The visualization loads color data from a CSV file using D3's `csv` utility, then computes slice angles with `pie().value(1)`. React manages the loading state and renders each slice as an SVG `path` element, with the fill color taken directly from the `RGB hex value` field. The code combines React's `useState` and `useEffect` hooks with D3's `arc` and `pie` functions to produce the final chart.

Rendering Data with React

This example shows a visual representation of CSS named colors as a vertical sequence of horizontal stripes, each colored according to its corresponding hex value from the loaded dataset. The application uses D3’s `csv` utility to fetch and parse the remote CSS color data, then leverages React’s `useState`, `useEffect`, and inline styles to dynamically render each color stripe within a `div` element. ReactDOM renders the final list of stripes onto the page, with a loading message displayed until the asynchronous data fetch completes.

Loading Data with React & D3

This example demonstrates how to load and summarize CSS named colors data from a remote CSV file using D3’s `csv` utility within a React application. It shows the dataset’s size in kilobytes, row count, and column count, initially displaying “Loading...” until the data arrives. The code uses React’s `useState` and `useEffect` hooks to manage state and trigger the asynchronous data fetch, then formats the summary with custom JavaScript. The underlying data comes from a gist containing named color values.

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg) and horsepower for cars, with each point colored by country of origin and sized by vehicle weight. It uses data from the UCI Machine Learning Repository’s Auto MPG dataset, loaded via `d3.csv`. The graphic is built declaratively using the Vega-Lite API, specifying a circle mark with encodings for position, color, and size. The code registers Vega, Vega-Lite, and the Vega-Lite API, then renders an interactive SVG chart fitted to the browser window, with a tooltip provided by Vega-Tooltip.

Scatter Plot with Color

This example visualizes the Iris dataset as a scatter plot, mapping petal length to the x-axis, sepal width to the y-axis, and coloring each circle by species using a D3 ordinal scale. React renders the SVG, with reusable axis and mark components built on D3 scales like `scaleLinear` and `scaleOrdinal`. The data is loaded from a remote CSV via D3’s `csv` utility, and tooltips display formatted values through SVG `<title>` elements.

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3 version 7. It displays the file size in kilobytes, the number of rows, and the number of columns parsed from the CSS named colors dataset. The code uses the `d3.csv` function to fetch and parse the data asynchronously, then accesses the `.length` and `.columns` properties of the resulting array to extract metadata. A commented alternative using `fetch`, `async`/`await`, and `d3.csvParse` is also provided.

Mouse Follower

A React-controlled SVG circle follows the mouse cursor across a fixed 960×500 viewport. Mouse coordinates are captured by the SVG’s `onMouseMove` event, processed via a `useCallback` hook, and stored in React state with `useState`. Each movement updates the circle’s `cx` and `cy` attributes, causing a re-render. The example demonstrates direct state-driven SVG updates without D3-specific interaction APIs, relying solely on React’s event handling and DOM reconciliation.

Fork of Naver-Sankey

A sankey diagram visualizes the spread of an outbreak between countries, showing origin nodes on the left flowing through intermediate regions to final destinations on the right. Implemented with D3.js v5, it uses the `d3.sankey` layout to position nodes and compute link thickness, while `d3.drag` enables interactive node repositioning. The SVG rendering includes colored node rectangles and curved links with hover tooltips, driven by numeric values in a JSON dataset.

Aug 26, 2022

220620 Naver-Sankey (ver.1)

This Sankey diagram visualizes the spread of a virus between countries and regions, using node width and link thickness to represent the volume of transmission flows. Data is loaded from a JSON file and rendered as an SVG using the D3.js v5 library with a custom `d3.sankey` module. The implementation employs `d3.json`, `d3.scaleOrdinal`, and `d3.drag` for node interaction, while `sankey.layout` and `sankey.relayout` compute node positions and link paths.

Aug 26, 2022

220620 Naver-Sankey (ver.2)

This interactive Sankey diagram visualizes the early spread of COVID-19 between countries and regions. The diagram shows flow from Chinese provinces to other global destinations, with multiple stages of transmission. It uses D3.js v5 with the `d3.sankey` layout on an SVG canvas. Nodes are draggable, and links are colored and sized by flow value. The visualization draws on JSON data containing numeric link values that represent the rate of spread.

Aug 26, 2022

Smiley face part IV

A grid of eighteen smiley faces, each with randomized facial features, fills the viewport. The example demonstrates React component composition by assembling faces from separate `BackgroundCircle`, `Eyes`, and `Mouth` components, with `d3.arc()` generating the mouth path. Each face is an SVG rendered via React, with random values for stroke width, eye offset, and eye radius creating individual variation across the grid.

Aug 16, 2022

Smiley face part III

This example renders a classic smiley face as a reusable React component tree, composing a yellow background circle, two eyes, and an arc-based mouth centered on an SVG canvas. The React components (`BackgroundCircle`, `Eyes`, `Mouth`) receive numeric props for positioning and sizing, while the mouth’s curved path is generated using `d3.arc()` with explicit inner and outer radii and angular start/end values. The static visualization relies on SVG elements and React’s declarative rendering, with the overall face centered via an SVG `<g>` transform.

Smiley face part II

A static SVG face composed of a yellow circle, two eyes, and an arc-shaped mouth is rendered using React and D3 version 7. The React component `App` positions all shapes relative to the SVG center via a `<g>` transform, while D3’s `arc` generates the mouth path geometry. The face demonstrates basic coordinate geometry and SVG drawing.

Smiley face part I

A yellow smiley face rendered in SVG with a black circular outline, two eyes, and an open mouth. The React component builds the face using d3.arc to generate the mouth path, while circles define the eyes and face. d3.v7 provides the arc generator, and React 18 handles the DOM rendering within a fixed 960x500 viewport.

Tweak the Face

This is a React application that renders a smiling face as an SVG graphic. The face is built from basic geometric shapes, including circles for the head and eyes, and D3 arc paths for the mouth and eyebrows. The code uses `d3.arc` to define the annular sectors that create the curved mouth and brow shapes, which are then positioned relative to the face’s center using the `transform` attribute. The page itself is static, with the face centered on a 960 by 500 canvas, and the application is mounted into the DOM using `ReactDOM.render`.

Naver-Sankey(val>20일 때 val=20)

This is a Sankey diagram that visualizes the early spread of COVID-19 between countries and continents, showing flow rates between source and target regions. The code uses d3.v5 and the custom sankey.js library to render the diagram as an SVG. Node colors are assigned via d3.scaleOrdinal with d3.schemeCategory10, and links use d3.sankey's link path generator. Data is loaded from a JSON file with d3.json, and node dragging is enabled with d3.drag, triggering sankey.relayout to update the paths.

Jun 18, 2022

Points on a Map

This example renders a natural Earth projection map with graticules, country borders, and shaded landmasses using SVG. It loads world atlas TopoJSON data via `d3.json` and topojson’s `feature` and `mesh` functions, then draws paths with `d3.geoPath`. The map displays city points from a CSV dataset loaded with `d3.csv`, converted to numeric coordinates, though the points themselves are not yet drawn. React manages loading states for both datasets through custom hooks.

Interactive Color Legend

This interactive scatter plot visualizes the Iris flower dataset, plotting petal length against sepal width for three species. Hovering over a category in the color legend highlights the corresponding data points while fading all others, using React state to track the hovered value. The visualization uses d3.scaleLinear and d3.scaleOrdinal for scales, renders with SVG, and leverages React components like Marks and ColorLegend to manage the interactive behavior.

Scatter Plot with Color with Color Legend

This interactive scatter plot visualizes the Iris dataset, showing sepal width against petal length for different Iris species. Data points are rendered as circles with colors mapped to each species, accompanied by a legend that identifies the color-to-species correspondence. Built with React and D3.v5 utilities including `scaleLinear`, `scaleOrdinal`, and `extent`, the visualization uses SVG for rendering. The color legend communicates the species mapping, while tooltips display the petal length value for each point.

Polished Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements through dropdown menus that re-assign the x and y axes. The visualization uses React state management alongside D3 scales and axes, rendering SVG circles with tooltips showing formatted values. Data loads asynchronously via D3’s `csv` utility from a GitHub gist, while axis ticks and labels are generated through custom React components using `scaleLinear` and `extent` for domain calculation. The design incorporates Poppins typography and a teal color scheme for a polished presentation.

Fork of Stylized Scatter Plot

This interactive scatter plot displays the Iris flower dataset, allowing users to compare sepal and petal measurements by selecting attributes from dropdown menus. The visualization uses React state to manage the selected axes, with D3 v5’s `scaleLinear` and `extent` functions mapping data values to SVG coordinates. Axis components render tick marks and labels, while circles represent individual flowers with tooltips. The chart updates dynamically when the user changes the X or Y axis selection, leveraging D3’s `csv` loader for data fetching and React’s `useState` and `useEffect` hooks for state management.

Menus with React

This example demonstrates a React-based dropdown menu for selecting a pet type from a predefined list of six options, with the current choice displayed in a large label. It uses React hooks (`useState`) to manage the selected value and renders a reusable `Dropdown` component that maps over an options array to populate a native `<select>` element. The interface relies on React 16.9 and ReactDOM for rendering, with event handlers updating state on change. The initial selection is set to "hamster", and the styling uses plain CSS for large fonts.

React Starter

This example demonstrates a minimal React application that renders the text “Hello React!” using ReactDOM. It imports React and ReactDOM, defines a functional App component, and mounts it to the `#root` element. The page loads React and ReactDOM from external UMD bundles while the app code is bundled in `bundle.js`. This starter serves as a foundation for building interactive visualizations with React.

World Map

This example visualizes world countries with a natural Earth projection, displaying landmasses in teal, graticules as light gray lines, and country borders in a darker teal. The SVG rendering uses React state to load geographic data from the World Atlas TopoJSON file via `json` and `feature`/`mesh` from TopoJSON, then draws the sphere, graticule, land polygons, and interior borders with `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3.

Stylized Line Chart

This stylized line chart visualizes temperature data over time, loaded from a CSV file of weekly San Francisco temperatures. The chart uses a smooth natural curve to connect data points, with dot markers that display tooltips on hover. The visualization is built with React and rendered as an SVG, leveraging D3 utilities like `scaleTime` and `scaleLinear` for axes and the `line` and `curveNatural` functions for the path. The interface uses a custom Poppins font and a teal color scheme for visual appeal.

Stylized Scatter Plot

This stylized scatter plot visualizes the relationship between petal length and sepal width in the classic Iris dataset, loaded via the D3 `csv` utility. React state manages the data, while D3's `scaleLinear` and `extent` functions map values to a fixed SVG coordinate system. Circles render as marks with tooltips, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) draw axes and points. The chart uses a Poppins font, styled grid lines, and a teal color scheme to create a polished, modern look.

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries in 2020, using horizontal bars whose lengths encode population values. The visualization is built with React and D3 v5, where React manages state and D3 utilities like `scaleBand` and `scaleLinear` handle positioning and scaling. The SVG rendering includes custom axis components that format tick labels with units (e.g., "1.5B" for billions) and a tooltip via the `<title>` element. Data is loaded as CSV from a remote URL and filtered to the first ten rows.

Refactored Bar Chart

This chart displays the 2020 populations of ten countries using horizontal bars, with country names on the y-axis and an x-axis for population values from the UN Population 2019 dataset. The D3 v5 scales `scaleBand` and `scaleLinear` compute the layout, while React components for axes and marks map the data to SVG `<rect>` elements. Population values are parsed from the CSV into numbers via `useData`, and the bars are rendered within an SVG canvas.

Axes with React & D3

This example renders a horizontal bar chart of the top 10 countries by 2020 population using React and D3. It shows CSS-loaded data from a CSV file, with axes drawn manually. The code uses D3’s `scaleBand`, `scaleLinear`, and `csv` to fetch and scale data, while React’s `useState` and `useEffect` manage loading and state. SVG elements are generated in JSX, with tick marks and labels positioned via D3’s `ticks()` and the scales’ range.

The margin convention

This example demonstrates D3’s margin convention by rendering a horizontal bar chart of UN population data for the top ten countries in 2020. The chart uses React state to load the CSV via `d3.csv` and maps each country to a `<rect>` inside a translated `<g>` element, with scales from `d3.scaleBand` and `d3.scaleLinear`. All marks are drawn as SVG within a fixed 960×500 viewport, clearly separating the plotting area from the surrounding margins.

The Pathetic Bar Chart

This visualization displays the top ten most populous countries in 2020 as horizontal bars, with each country’s bar length proportional to its population. Using React state to manage data loading, the code fetches a CSV of UN population data via `d3.csv`, then renders SVG rectangles positioned by `d3.scaleBand` and sized by `d3.scaleLinear`. The bars are plain rectangles without labels or axes, hence the “pathetic” title. React’s `useEffect` and `useState` hooks drive the asynchronous data fetch and rendering.

Dec 19, 2021

Rendering Data with React & D3

This example shows the 148 named CSS colors as a donut chart, with each color’s slice filled by its corresponding RGB hex value. It loads the CSV data from a GitHub gist using D3’s `csv` utility, then computes the pie layout with `d3.pie` and `d3.arc`. React’s `useState` and `useEffect` hooks manage the asynchronous data loading and hold the fetched rows, which are then mapped to SVG `<path>` elements within a React-rendered `<svg>` container. The visualization highlights the integration of D3’s data-processing functions with React’s declarative rendering model.

Dec 18, 2021

Rendering Data with React & D3

A React application renders a column of horizontal stripes, each representing a CSS named color from a CSV dataset loaded via D3’s `csv` utility. The data, fetched from a GitHub gist, populates React state through `useEffect`, and each row’s background color is set using its `RGB hex value` field. While the data loads, the view displays a large “Loading…” message. The example demonstrates combining D3’s data-loading capabilities with React’s declarative rendering and state management to produce a simple, visual color catalog.

Dec 18, 2021

Loading Data with React & D3

This example demonstrates a minimal React application that loads a CSV dataset of CSS named colors from a GitHub gist and displays summary statistics about it. The app uses React’s `useState` and `useEffect` hooks to fetch the data asynchronously via D3’s `d3.csv`, then renders a plain-text message with the file size in kilobytes, row count, and column count using a custom `message` function that leverages `d3.csvFormat`. While the data is loading, the interface shows a "loading..." placeholder. The visualization highlights how D3 utilities can handle data loading within a React component’s state management.

Dec 18, 2021

Loading and Parsing CSV Data

This example demonstrates the basic workflow of loading and parsing CSV data using D3.js version 7. It fetches a remote CSV file containing CSS named colors and displays three summary metrics: the file size in kilobytes, the number of data rows, and the number of columns. The visualization uses `d3.csv()` to asynchronously retrieve and parse the data, then leverages `d3.csvFormat()` to calculate the file size and accesses the parsed data's `length` and `columns` properties. Results are rendered as large text in an HTML `<pre>` element.

Dec 16, 2021

Mouse Follower

A red circle follows the mouse cursor across an SVG canvas. The visualization updates the circle’s position in real time using React state and event handling, triggered by `onMouseMove`. It renders with SVG elements in a React component, using the `useState` and `useCallback` hooks to manage position updates. The code imports the `arc` function from d3, though the current implementation only uses a basic circle element.

Dec 16, 2021

Smiley Face Part I

A grid of 18 randomly parameterized smiley faces, each rendered as a separate SVG, showcases variability in facial features. The faces vary in stroke thickness, eye offset, eye radius, and mouth dimensions. The React application maps over an array from `d3.range` to generate each `Face` component, which combines `BackgroundCircle`, `Eyes`, and `Mouth` elements. The `Mouth` uses a D3 `arc` shape generator to create a path, while all faces are centered within their 160 by 160 pixel SVG containers.

Dec 15, 2021

Untitled

This visualization displays a word cloud of Korean terms related to artificial intelligence and technology, with word size representing the frequency or weight of each term in the dataset. The words are arranged in a space-filling layout with random 0 or 90 degree rotations, colored using a five-color ordinal scale. Built with React and D3.v4, the code uses the `d3.layout.cloud` API to calculate word placements, then renders SVG text elements with the Noto Sans KR font, processing keyword-frequency data imported from JavaScript modules.

Dec 3, 2021

Simple Network Viewer

This example presents a minimalistic network visualization tool called Simple Network Viewer. It displays a graph with nodes and edges, where users can toggle labels, links, and tooltips, and use a quick search function. The visualization is rendered using D3.js v5, with Bootstrap and jQuery providing the interface framework. The code shows the main canvas being sized to the browser window, and styling rules manage node, link, and text appearance, including dimming and selection states.

Nov 25, 2021

Color and Size Legends

This example demonstrates two custom legend components for D3 visualizations: a color legend matching ordinal categories to specific colors, and a size legend using a square-root scale to map numeric values to circle radii. The color legend renders labeled circles for fruits like apple and lemon, while the size legend displays five tick marks with proportional circle sizes. Both legends are built using D3 v7’s selection-merging API, appending SVG `<g>` groups to position circles and text labels with translated transforms.

Nov 23, 2021

Reusable Flower Plot

The flower plot displays categorical data as radial, petal-shaped segments in an SVG visualization. Each petal is rendered using a D3 arc generator, with linear gradients applied along its length to show sub-value breakdowns. The chart supports multiple data series, with each petal’s width proportional to its final value. Interactive hover effects trigger a legend that shows individual component values and percentages, while petal strokes highlight on mouseover. The reusable component pattern uses getter-setter accessors to configure dimensions, colors, and titles, and it supports smooth transitions between datasets. D3’s pie layout and SVG paths handle the geometry and rendering.

Nov 12, 2021

Cars Report

This example shows a text-based report of cars filtered by price, displaying each vehicle as a formatted line of year, make, model, and cost. It demonstrates JavaScript modules, promises, and asynchronous data loading with `getCars()` returning a promise that resolves after a two-second delay. The `generateReport` function filters the parsed JSON array for cars under a specified price and maps them using `formatCar`, while `index.js` updates the DOM’s `textContent` to render the final report in a `<pre>` element.

Nov 7, 2021

Make Shapes

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in groups with varied colors, strokes, and transforms. It demonstrates fundamental SVG rendering in a static scene without interaction. The code loads D3 via UNPKG, but primarily uses native SVG elements and CSS styling. It also showcases local ES6 module imports through `myMessage.js` and applies group-level attributes like `fill` and `stroke` for visual organization.

Aug 15, 2021

Shapes with SVG and CSS

This example shows how SVG shapes such as circles, rectangles, lines, and paths can be styled and arranged using both inline attributes and external CSS. It demonstrates loading D3 via UNPKG and importing from local ES6 modules, though the visible shapes rely purely on static SVG markup. The code uses SVG elements like `circle`, `rect`, `line`, and `path` with transforms for scaling and translation, while `styles.css` defines classes like `.lines` to apply stroke properties. The rendering approach is plain SVG output with no JavaScript-driven data updates.

Aug 15, 2021

HTML Cars Report

This example presents a simple HTML cars report listing three used vehicles with prices, highlighting the 2012 Nissan Leaf in red. It uses JavaScript modules to fetch car data via `getCars()` and generate a report with `generateReport()`, updating a page element’s text content. The styling relies on plain CSS with a monospace font and a `.highlighted` class for emphasis, while the script is bundled into `bundle.js`. The visualization focuses on static text output rather than interactive graphics.

Aug 7, 2021

Cars Report

This example demonstrates a text-based report of cars filtered by a maximum price. It shows how JavaScript modules, arrays, and promises work together to generate a formatted list. The code uses the native `Promise` and `setTimeout` to simulate a network request, and `JSON.parse` to load car data. `filter`, `map`, and `join` methods process the array, while a custom `formatCar` function formats each entry into a readable string, which is displayed in the browser via `textContent`.

Aug 7, 2021

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale, with a natural Earth projection rendered as SVG paths. An interactive legend allows users to click individual color categories, though the selection only logs to the console rather than filtering the map. The visualization loads world topology from the world-atlas TopoJSON dataset and joins country names from TSV data. The choropleth uses d3.geoPath, d3.scaleOrdinal with schemeSpectral, and d3.zoom for panning and zooming, while the custom colorLegend module handles the clickable legend UI.

Choropleth Map

A choropleth map colors countries according to their economy type, with a custom ordinal color legend and hover interactions that highlight each nation. The visualization renders an SVG world map using a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, while supporting pan and zoom through `d3.zoom`. Data comes from the World Atlas TopoJSON and TSV datasets, processed with `topojson.feature` and loaded asynchronously. The color scale uses `d3.scaleOrdinal` with `d3.schemeSpectral`, and the legend is built with custom D3 enter/merge/exit selections.

World Countries Hierarchy

This visualization displays the hierarchical relationships between world regions, subregions, and countries using a horizontal tree layout. The data is structured as a nested JSON hierarchy, with nodes representing continents, regions, and individual nations. The code uses D3 v7’s `tree()` layout and `linkHorizontal()` generator to position and draw the connecting paths, while node labels are rendered as SVG text elements with sizes scaled by node depth. A zoom behavior is applied to the SVG container for panning and scaling.

Blank Canvas

A blank, rounded rectangle fills the browser viewport, sized to the full window and created with a single `rect` element appended to an SVG. The visualization uses D3 v7's `select` method to target the SVG and set its width and height attributes dynamically based on `document.body.clientWidth` and `clientHeight`. The example demonstrates a minimal SVG setup within an HTML page, styled by CSS to remove margins and hide overflow, with a placeholder ES6 module exporting a string.

Cheap Tricks for Interaction

This interactive map displays world countries on a natural Earth projection using SVG paths, with hover highlighting that changes country fill colors and zoom-and-pan capabilities via d3.zoom. The visualization loads geographic data from world-atlas TopoJSON and TSV files, using d3.geoPath and geoNaturalEarth1 to generate the map geometry. Country names are provided as tooltips through SVG title elements, with the sphere background filled blue and countries rendered in light green. The code demonstrates simple user interaction tricks like CSS hover effects and zoom transforms to enhance map exploration.

Let's make a map with D3.js

This example displays a world map using the Natural Earth dataset from the `world-atlas` package. The map is rendered by projecting geographic coordinates with a Natural Earth projection and drawing the countries as SVG paths. It uses D3.js v7 APIs such as `geoPath` and `geoNaturalEarth1`, along with the `topojson` library’s `feature` function to convert TopoJSON data into features.

Bowl of Fruit - Hover to Select

Five circles representing apples appear in a bowl-shaped row, with a lemon replacing one apple after two seconds. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouseout. The visualization uses d3.v7 with an SVG data join, `scaleOrdinal` for color and radius, and `transition().duration()` to animate fruit entry, exit, and type changes. The code also uses `selection.merge` and `selection.exit` for smooth updates.

Fork of Bowl of Fruit - Click to Select

A bowl of five apples animates in with a smooth transition, and clicking a fruit selects it with a black stroke while deselecting others. The code demonstrates a data join with enter, update, and exit selections, using `d3.scaleOrdinal` for color and radius scales, and `transition().duration(1000)` to animate shape changes. Over time, apples are eaten and one is replaced by a lemon, re-rendering the bowl with each change in the `fruits` array.

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The chart displays a smooth, curved line plotting temperature over time, with labeled axes for time and temperature and a title. The visualization is rendered using D3 version 7, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` for the smoothed path. The SVG output includes styled gridlines and text via CSS, with data loaded from a CSV file.

Temperature in San Francisco Area Chart

This area chart visualizes a week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime and d3.scaleLinear for the time and temperature axes, respectively, with d3.axisBottom and d3.axisLeft generating the grid lines and tick marks. The area is rendered with d3.area, using curveBasis for smoothing, and filled with a maroon color. The SVG output includes titles, axis labels, and a custom styling approach that adjusts font sizes and colors via CSS.

Bowl of Fruit - General Update Pattern

This example demonstrates the D3 general update pattern using a bowl of fruit metaphor. Five apples are drawn as red circles with labels inside a rounded rectangle bowl. Over time, fruits are removed and one apple changes into a lemon, with the chart updating accordingly. The code uses D3 v7 APIs including `scaleOrdinal` for color and radius mappings, and the `selectAll`, `enter`, `merge`, and `exit` methods to handle data changes. The visualization renders as SVG with fruits positioned horizontally based on their array index.

Bowl of Fruit - Animated Transitions

Fruit icons transition smoothly between enter, update, and exit states as apples are eaten and one apple changes into a lemon. The visualization demonstrates d3's data join pattern with key-based binding, using `selection.enter()`, `selection.merge()`, and `selection.exit()` to manage SVG circles. Each state change triggers a 1000ms `transition()` that animates the circles' radii, positions, and fill colors, with colors and sizes derived from ordinal scales mapping fruit types to values.

World Population Area Chart

This area chart visualizes global population growth over time, using a curved baseline to show the upward trend in population from historical data. The visualization employs D3 v7 with an SVG renderer, using `scaleTime` and `scaleLinear` for the axes and an `area` generator with `curveBasis` for the filled path. Data is loaded from a CSV file, with the y-axis formatted in billions. The chart includes labeled axes, gridlines, and a title, styled with custom CSS.

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. The circles are styled in steelblue, and the chart includes labeled axes and a title. Built with D3 v7, the code uses `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG. It loads data from a CSV file hosted on VizHub, parsing timestamps and temperatures before joining the data to circles.

Jul 27, 2021

Cars Scatter Plot

A scatter plot displays the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. Each red semi-transparent circle represents a car, with position determined by linear scales mapping these quantitative attributes. The visualization uses D3 v7 with `scaleLinear`, `axisBottom`, `axisLeft`, and SVG circles, styled via CSS. Axes include tick marks, labels, and a title, with data loaded as CSV and rendered in an SVG container.

Jul 27, 2021

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, using circles positioned along a linear scale for population and a point scale for country names. The data originates from the 2018 United Nations World Population Prospects estimate, loaded via d3.csv. The visualization uses D3 v7's scaleLinear, scalePoint, axisBottom, and axisLeft to render the SVG chart, with formatted tick labels and a population axis label.

Jul 27, 2021

Customizing Axes

This example presents a horizontal bar chart of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization highlights customized axes, including a band scale for country names on the y-axis and a linear scale for population on the x-axis. The code uses D3 v7 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, with the x-axis labels formatted using `format('.3s')` to abbreviate large numbers. SVG rendering is used to draw the bars, with a title and axis label included.

Jul 26, 2021

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization encodes country names on the y-axis with d3.scaleBand and population values on the x-axis with d3.scaleLinear, rendering rectangular bars as SVG elements. The code loads data from a CSV file, converts populations to absolute numbers, and generates axes using d3.axisLeft and d3.axisBottom. Bars are filled with a steelblue color via CSS, and the chart includes margins for clear label placement.

Jul 26, 2021

Let's make a face with D3.js

This example shows a simple cartoon face built with D3.js, featuring yellow circular head, black-outlined eyes, animated eyebrows, and a mouth created using the `d3.arc()` shape generator. The SVG elements are positioned using translations and attribute bindings, with the eyebrows transitioning through repeated `transition.attr` calls over two-second intervals. Code imports `select` and `arc` from D3 v7 via UNPKG, and demonstrates local ES6 module usage through an exported `message` constant. The face components are drawn entirely in SVG within a 960×500 viewport, with no external data source.

Jul 25, 2021