Potikorn

Blow of fruit - General update pattern

A row of apples and lemons animates through the general update pattern in this D3.js example. Buttons and timed re-renders trigger enter, update, and exit selections as fruits are added, replaced, or removed. Using the `selection.join()` method with d3.v5, the code binds fruit data to SVG groups, transitioning circle radii, colors, and text labels between states. The `colorScale` and `radiusScale` ordinal scales map fruit types to visual properties.

Mar 3, 2020

Selecting a Year on a Line Chart

This line chart displays population estimates and projections for global regions from 1950 to 2100, using data from the UN Population Estimates. A vertical black line marks the currently selected year, which updates when the user moves the mouse across the chart. The visualization uses d3.scaleTime, d3.scaleLinear, d3.nest, and d3.line with curveBasis to render the paths. A color legend built with custom SVG elements identifies each region. The mouse interceptor rect calls setSelectedYear on mousemove to change the highlighted year.

Feb 28, 2020

Bar chart with D3.js

A horizontal bar chart displays population estimates for ten countries, using a CSV dataset loaded via D3's `csv` method. The visualization ranks countries from China to Mexico along a linear x-scale, with a band scale positioning each categorical bar. SVG rectangles are appended to a grouped `<g>` element, with axes generated using `axisLeft` and `axisBottom`. D3 v5's `scaleLinear`, `scaleBand`, and `max` utilities handle the data mapping, while margin conventions and transform attributes position the chart within a 960×500 SVG viewport.

Feb 28, 2020

Scatter Plot with Menus

This interactive scatter plot lets users compare pairs of attributes from the auto-mpg dataset by selecting columns from two dropdown menus. The visualization updates the x and y axes, including their labels and scales, based on the chosen variables. Built with D3 v5, the code uses `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart, while a custom dropdown menu module handles the selection. Each data point is rendered as a semi-transparent circle with a smooth transition animation as the axes change, providing a dynamic exploration of the relationships between variables like horsepower, weight, and acceleration.

Feb 27, 2020

Melting Data for Multiple Lines

This visualization displays population trends over time by region, using multiple colored lines to represent different countries from 1950 to 2100. The chart employs d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.nest to group data by country. A custom colorLegend component renders the categorical scale using d3.scaleOrdinal with schemeCategory10. The data comes from UN population estimates, processed through a custom melt function that transforms wide-format CSV data into tidy rows. SVG rendering handles the visualization, with axis labels and a title annotating the chart.

Feb 27, 2020

Line Chart With Multiple Lines

This line chart displays temperature readings from multiple cities over a one-week period, with each city represented by a colored line and a corresponding color legend. The chart uses a time-scaled x-axis and linear y-axis for temperature, with grid lines for readability. Built with D3 v5, it loads CSV data from VizHub, parses timestamps and numeric temperatures, then uses `d3.line` with `curveBasis` for smooth paths, `d3.nest` for grouping by city, and `d3.scaleOrdinal` with `schemeCategory10` for colors.

Feb 21, 2020

Temp in san-francisco Line Plot

This example visualizes a week of temperature data in San Francisco with a smooth line plot. The time axis displays timestamps, while the vertical axis represents temperature, with a maroon curve connecting the data points. The code uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scales, and d3.line with curveBasis for the path. It also creates axes with d3.axisBottom and d3.axisLeft, including grid lines and labels, rendered as SVG within a 960x500 viewport.

Feb 21, 2020

Circles on a map

This example visualizes global population data as semi-transparent circles positioned at the geographic centroid of each country on a Natural Earth map. Countries with missing data appear in light red, while the circles’ radii encode 2018 population figures using a square-root scale. The visualization uses d3.geoPath with the geoNaturalEarth1 projection, d3.zoom for panning and scaling, and d3.scaleSqrt for sizing. Data is loaded from a CSV file and a TopoJSON world atlas, processed via topojson.feature, with a custom legend built using d3.scaleSqrt.

Feb 21, 2020

Choropleth Map with Interactive filtering

A choropleth map of global economies color-coded by development category, with an interactive legend that filters highlighted countries by clicking category swatches. Built with D3 v5, it combines `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom` for panning and zooming the SVG-rendered map, while `d3.scaleOrdinal` and `schemeSpectral` assign colors from world-atlas TopoJSON data. Clicking a legend item dims non-matching countries and toggles the selection; tooltips show country names and values via SVG `<title>` elements.

Feb 20, 2020

Choropleth Map

This choropleth map colors countries by income group, with a legend showing the categorical color scale. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw world boundaries from TopoJSON data loaded via `topojson.feature`. Country polygons are filled based on economy data from a TSV file, and hover effects highlight regions. Users can zoom and pan using D3’s `zoom` behavior, while the custom color legend is built with reusable D3 selection methods.

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern for D3 legends, showing color and size legends built with ordinal and sequential scales. The color legend maps fruit names to colors using `scaleOrdinal`, while the size legend displays tick values from a `scaleSqrt` with circles sized proportionally. Both legends use D3’s enter, merge, and exit selections to handle dynamic updates, with circles and text appended to group elements. The SVG rendering shows the pattern’s special cases: handling elements that only appear on update, and managing nested selections within each data-bound group.

World Countries Tree!

This example displays a hierarchical tree of world countries, organized by continent and subregion, with the data read from a local JSON file. The visualization uses D3.js to build the tree with a horizontal link layout, rendering nodes as text labels of varying font sizes based on their depth in the hierarchy. The SVG canvas supports zooming and panning through a custom zoom function, and the code employs D3's hierarchy, tree, and linkHorizontal APIs to position elements.

Cheap tricks for interaction

A D3.js map of world countries supports zooming and panning through d3.zoom, which applies a transform to a group element. Geographic paths are rendered using d3.geoPath with a geoNaturalEarth1 projection, sourced from TopoJSON world-atlas data and country names from a TSV file. Hovering changes each country’s fill to red via CSS, using SVG paths with title tooltips for interactivity.

Let's make a Map with D3.js!

This example displays a world map rendered with D3.js, showing countries as green polygons with black outlines against a dark blue sphere background. It uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas dataset via `d3.json`. The `topojson.feature` API converts the TopoJSON topology into GeoJSON features, which are then bound to SVG path elements using D3 data joins.

Blow of fruit - Hover to select

A hovering mouse selects individual fruit in a D3.js animated bowl, highlighting the chosen item with a black outline. The visualization demonstrates data joining and DOM manipulation: fruit enter, update, and exit as the dataset changes over time, with apples and lemons rendered as colored circles. D3 scales map fruit types to colors and radii, while transitions animate size and fill changes. The code uses `selection.data()`, `selection.enter()`, `selection.merge()`, `selection.exit()`, and `transition().duration()` to manage the five fruit elements in an SVG.

Blow of fruit - Click to select

This example demonstrates the "blow of fruit" interaction, where a row of apples and lemons moves and changes size with animated transitions. Clicking any fruit toggles a black selection outline, while the fruit bowl updates over time as fruits are removed or transformed. The visualization uses D3 v5’s data joins, `selection.enter`, and `transition` to handle dynamic updates, with an ordinal color scale and radius scale mapping fruit types. SVG groups and circles render each fruit, and click events trigger re-renders of the selection state.

World population Area Chart

This area chart displays global population trends over time, with the x-axis representing years and the y-axis showing population counts in billions. The chart uses a maroon filled area with a smooth curve to emphasize the upward trajectory. The visualization is built with D3 v5, utilizing the `area` generator with `curveBasis` for smoothing, `scaleTime` and `scaleLinear` for axes, and `axisBottom` and `axisLeft` for tick marks. Data comes from a CSV file loaded via the `csv` function.

Temp in san-francisco Area Plot

This area plot visualizes temperature readings in San Francisco over a week, using a smooth curve to show how values rise and fall across time. The chart is rendered as an SVG via D3 v5, with a linear y-scale for temperature and a time scale for timestamps. The `d3.area` generator with `curveBasis` creates the filled path, while `axisBottom` and `axisLeft` add labeled axes. Data is loaded as CSV from an external URL and parsed into Date and numeric values before rendering.

Temp in san-francisco Scatter Plot

A scatter plot displays temperature readings over time in San Francisco, using steelblue circles on a Cartesian grid. The visualization renders as an SVG, with a time-scaled x-axis and a linear y-axis for temperature, both labeled with custom tick marks and gridlines. The code leverages d3's `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart, loading data from a CSV file hosted on vizhub. A title and axis labels are positioned within the margins, and the plot uses a clean, sans-serif style.

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for a dataset of cars, with each car represented as a semi-transparent blue circle. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the data, and loads it from a CSV via `d3.csv`. Axes are labeled, and tick lines extend across the plot, while a title and clear margins frame the visualization.

Scatter Plot

This scatter plot shows the population of the top 10 most populous countries, with each circle representing a country positioned along a logarithmic population axis and a categorical country axis. The visualization uses D3 v5 to load CSV data, apply linear and point scales, and render SVG circles. It includes custom axes with tick formatting that converts large numbers to billions, along with grid lines and labels for population and country.

Customize Axes

This example shows a horizontal bar chart ranking the top 10 most populous countries, with population values formatted in billions using a custom tick formatter that replaces 'G' with 'B'. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, with axes rendered via d3.axisLeft and d3.axisBottom. Gridlines extend from the x-axis ticks across the plot, and the y-axis domain lines are removed for a cleaner look. Data loads from a CSV file and is parsed with d3.csv, while SVG rendering and styling are handled through D3 selections and CSS classes.