Skip to main content
Log in
M

Minwoo Pak

@minwoopak·95 public vizzes

Loading thumbnail…

Dataviz 2020_Ep25 - 19. Scatter Plot

This scatter plot visualizes the Iris flower dataset, showing the relationship between petal length and sepal width for individual specimens. The visualization encodes each flower as a circle, with hovering revealing its exact value via a native SVG `<title>` tooltip. Built with React and D3 v6, the chart uses `d3.scaleLinear` for axes, `d3.extent` for domains, and custom React components for axes and marks. Data is loaded asynchronously from a remote CSV file using `d3.csv`.

Sep 24, 2023
Loading thumbnail…

Mouse Follower

A single black circle follows the cursor across a full-screen SVG canvas, updating its position in real time. The visualization demonstrates a minimal state-driven D3 render loop, where a `mousemove` event listener calls a `setState` function to update the pointer coordinates. The `viz` function uses a data join to create and update the circle element, with `d3.select` handling the SVG selection and attribute updates for the x and y positions. The example relies on D3 v7 and a custom render pattern that re-renders the entire visualization on each state change.

Mar 13, 2023
Loading thumbnail…

Jinsu Bubble

This bubble chart displays hierarchical data as a packed circle layout, with each bubble sized by a logarithmic scale and colored by category. The visualization uses D3 v7’s `d3.hierarchy` and `d3.pack` to compute the layout, rendering SVG circles and text labels for each node. Tooltips show the full ID and category on hover, while a color legend built with a custom `colorScale` function explains the category mapping. Data is loaded from a CSV via `d3.csv`.

Nov 19, 2021
Loading thumbnail…

Jinsu - Bubblechart

This bubble chart visualizes gene panel data by category, using circle area to represent values and color to distinguish groups such as Origin, Kinase Family, and Related Disease. Built with React and D3 v7, it computes a hierarchical pack layout via `d3.pack` and `d3.hierarchy`, then renders SVG circles and labels with `d3.select` and `d3.join`. A color legend is generated from `d3.scaleOrdinal` with `d3.schemeTableau10`, and tooltips display the full id and category. The data comes from `panel_data.csv`.

Nov 19, 2021
Loading thumbnail…

Jinsu - Request

This example shows a React and D3.js scatterplot of a hepatitis C dataset loaded from a CSV file, with the margins clearly outlined for debugging layout. The visualization uses `useData` to fetch and parse the data with `d3.csv`, then renders it inside a `VizContainer` that abstracts the SVG and group elements following the margin convention. The code defines fixed dimensions and applies a shared `VizContainer` component to structure the chart, while the data itself is only loaded without any mapping, leaving the plot empty until further customization.

Nov 18, 2021
Loading thumbnail…

cell_svg_modification

This example demonstrates how to relocate and rescale a pre-existing SVG cell illustration on a webpage. Using D3 v7's selection API, the code applies a `transform` attribute to the entire SVG group, positioning the graphic based on the browser window's dimensions and scaling it up by a factor of 3.5. The original vector paths, with their defined fill colors, are preserved and displayed as a single static cell structure. The example highlights a straightforward technique for modifying the placement of SVG content with D3's `select` function.

Sep 10, 2021
Loading thumbnail…

Organization Network Graph

This example shows a force-directed network of organizations, distinguishing three node types—main, sub, and anonymous—by size and color, as loaded from CSV edge and node attribute files. It uses React with D3’s `forceSimulation` (including `forceCenter`, `forceManyBody`, `forceCollide`, and `forceLink`) to compute layout positions, and renders nodes as SVG circles with labels, with edges colored to match their source main organization. The graph supports dragging nodes to reposition them within the simulation.

Aug 11, 2021
Loading thumbnail…

Force Layout

This example demonstrates an interactive force-directed graph built with React and D3 v6. A hierarchical dataset is flattened into nodes and links, then rendered as circles and lines using SVG. The simulation uses `d3.forceSimulation` with center, charge, collide, and link forces. Moving the mouse dynamically adds `forceX` and `forceY` forces that pull nodes toward the pointer, with strength varying by node depth. Clicking applies a `forceRadial` orbit force around the clicked point and draws a green circle to indicate the orbit radius.

Aug 10, 2021
Loading thumbnail…

Chorpleth Map

This choropleth map colors countries by income group using an ordinal color scale with a spectral scheme. The visualization loads world geometry from TopoJSON and joins it with TSV metadata, then renders the map with a natural Earth projection via d3.geoPath. Users can pan and zoom through d3.zoom, while a custom color legend built with SVG circles and text shows the categorical mapping. Hovering over a country highlights it in red and reveals its name and income group in a tooltip.

Aug 10, 2021
Loading thumbnail…

D3 + React + useData

This example demonstrates how to build a D3.js visualization within a React application using a custom `useData` hook to load CSV data from a GitHub gist. It shows a set of circles whose count and size are dynamically controlled by input fields. The code combines React's `useRef`, `useState`, `useMemo`, and `useCallback` with D3's `select` API for incremental updates, and uses a `VizContainer` component to structure the SVG with margin conventions.

Aug 10, 2021
Loading thumbnail…

Dataviz 2020_Ep55 - 47. VoronoiOverlay with Labels

This interactive line chart visualizes global COVID-19 death trends for 20 countries using a logarithmic y-axis over time. A Voronoi overlay, generated with `d3.Delaunay`, enables precise hover detection on the chart’s multi-line data, highlighting the nearest point and displaying a tooltip with the country name, death count, and date. The active series is emphasized in black, while the underlying SVG lines remain gray. Data originates from the CSSE COVID-19 time series dataset, rendered in React with D3 scales and axes.

Aug 9, 2021
Loading thumbnail…

Dataviz 2020_Ep56 - 48.Force Directed Graph Starter

This example shows three nodes—Alice, Bob, and Carol—connected by two links in a small network graph. The force-directed layout uses d3.forceSimulation to apply a many-body repulsive force, a link force, and a centering force. The simulation runs on SVG circles and lines, updating their coordinates on each tick. The code uses the d3 selection API and explicit force configuration to position the nodes, with a coral background in the container.

Aug 8, 2021
Loading thumbnail…

VoronoiOverlay retry

This line chart displays cumulative COVID-19 death totals for the top 20 countries over time, using a logarithmic y-axis. A Voronoi overlay, built with d3.Delaunay, enables hover detection on the closest data point, highlighting the corresponding country’s full time series in black. The visualization uses React for component structure, D3 scales and axes for rendering, and SVG for output. Data comes from the CSSEGISandData COVID-19 global time series CSV.

Aug 8, 2021
Loading thumbnail…

Dataviz 2020_Ep53 - 45. Coronavirus Deaths Over Time by Country

This visualization displays cumulative coronavirus deaths over time for each country, with multiple colored lines representing different nations on a logarithmic y-axis. The chart uses React with D3 v6’s `scaleTime`, `scaleLog`, and `line` functions to generate SVG paths, while the data comes from a CSV file of global COVID-19 deaths. The x-axis is labeled “Time” and the y-axis “Cumulative Deaths,” with grid lines to aid comparison across countries.

Aug 7, 2021
Loading thumbnail…

Dataviz 2020_Ep52 - 44. Coronavirus Line Chart - Log Y Axis

This visualization shows the global cumulative death toll from COVID-19 over time, plotted on a logarithmic scale to reveal the exponential growth pattern. The line chart uses a time-based x-axis and a log-scaled y-axis, with the death totals aggregated from all countries. Built with React and D3 v6, it employs `scaleTime` and `scaleLog` for the axes, along with `line` and `axisBottom`/`axisLeft` for rendering. The data comes from the COVID-19 time series CSV maintained by CSSE at Johns Hopkins University.

Aug 5, 2021
Loading thumbnail…

Dataviz 2020_Ep52 - 43. Coronavirus Line Chart - Linear Y Axis

This visualization tracks global cumulative COVID-19 deaths over time as a single black line chart with a linear y-axis. The D3 line generator builds the path from daily date and death-total values processed from the CSSE COVID-19 time series dataset. React components render SVG axes with D3’s axisBottom and axisLeft, while scales use scaleTime and scaleLinear to map data to screen coordinates. Gridlines and tick marks provide reference points across the full chart area.

Aug 5, 2021
Loading thumbnail…

Dataviz 2020_Ep51 - 42. Coronavirus Line Chart - React and D3 Axes

This example shows the global cumulative COVID-19 death toll over time as a single black line chart, with a horizontal marker at 3.5 million deaths and a vertical “Now” marker at the most recent date. It uses React to render the SVG and D3 v6 scales (`scaleTime`, `scaleLinear`) and line generator (`line`) to plot the data, while custom `XAxis` and marker components handle axes and annotations. The data comes from the CSSEGISandData COVID-19 time series CSV, loaded and transformed with D3’s `csv` and `timeParse`.

Aug 5, 2021
Loading thumbnail…

Dataviz 2020_Ep50 - 41. Corona virus Line Chart

This visualization tracks global cumulative COVID-19 deaths over time as a line chart, using a time scale for dates and a linear scale for death totals. It highlights the most recent date with a vertical marker labeled “Now” and a horizontal reference line at 3.5 million deaths. Built with React and D3 v6 (d3.scaleTime, d3.scaleLinear, d3.line), it renders to SVG and loads data from the CSSE COVID-19 time series CSV, aggregating daily death counts across all countries.

Aug 4, 2021
Loading thumbnail…

Dataviz 2020_Ep49 - 40. Corona virus Line Chart - Preliminary

This example shows a line chart tracking global cumulative COVID-19 deaths over time, with a horizontal marker line at three million deaths. The React component uses d3.scaleTime and d3.scaleLinear for axes, while d3.line generates the path from CSV data. Data originates from the Johns Hopkins CSSE COVID-19 time series, fetched via d3.csv and aggregated by summing daily country values in useData.js. The SVG rendering applies a thick black stroke via CSS, with a fixed viewport sized to the browser window.

Aug 2, 2021
Loading thumbnail…

Dataviz 2020_Ep49 - 39. Coronavirus Load and Present Total Deaths

This example displays the global total COVID-19 deaths from the Johns Hopkins CSSE time-series dataset, presenting a single large text value with the latest date. It uses d3.csv to load the data, selects the final date column, sums all country values with Array.reduce, and formats the result using d3.format. The number and date are inserted into the DOM via textContent, styled with dark red and a large font size through a stylesheet.

Jul 30, 2021
Loading thumbnail…

Dataviz 2020_Ep48 - 38. Choropleth Map - (React, D3 - HIV/AIDS data)

This choropleth map visualizes the global share of the population infected with HIV/AIDS for the year 2017, using a yellow-to-red sequential color scale to encode prevalence rates. Countries with missing data appear in gray. The visualization is built with React and D3 v6, using `geoNaturalEarth1` and `geoPath` for map projection, `geoGraticule` for grid lines, and `topojson` to convert world atlas data into GeoJSON features. It renders as SVG, pulling HIV prevalence data from an IHME CSV dataset.

Jul 30, 2021
Loading thumbnail…

Dataviz 2020_Ep40 - 32. Missing Migrants3 - Sized Circles on a Map

A world map displays circles sized by the number of total dead and missing migrants, with data from a CSV of global migrant incidents. The visualization uses a natural Earth projection rendered as SVG via React, with D3’s `geoPath` and `geoGraticule` for map outlines. Circle radii are scaled using a square-root scale (`scaleSqrt`) based on the maximum value, and the map layers include land, interiors, and sphere boundaries.

Jul 30, 2021
Loading thumbnail…

Dataviz 2020_Ep47 - 37. Missing Migrants7 - Log Scale Scatter Plot (Check for Power Law)

This scatter plot displays reported dates versus total dead and missing migrants, using a logarithmic y-axis to check for a power-law distribution in the data. The visualization employs a React component structure with D3’s `scaleLog` and `scaleTime`, rendering SVG circles with tooltips via nested `<title>` elements. Data comes from a CSV of Missing Migrants Global 2019-10-08 subset, loaded asynchronously through `d3.csv`. Axis components build custom ticks, and the marks layer maps each record to a circle, with loading state shown before the dataset arrives.

Jul 27, 2021
Loading thumbnail…

Dataviz 2020_Ep45 - 36. Missing Migrants6 - Performance Optimized Brushing (Multiple Views)

This interactive visualization combines a geographic bubble map with a time-series histogram to explore records of missing migrants. The map plots incidents using D3's `geoNaturalEarth1` projection, while the histogram aggregates counts by month. Users brush over the histogram to filter the map’s circles in real-time, leveraging D3’s `brushX` and React state for synchronized updates. Data is loaded via `d3.csv` from a published subset, and the rendering uses SVG with React components.

Jul 27, 2021
Loading thumbnail…

Nested Data Join for Each Parent Element but with Different Data

This example demonstrates a nested data join where each parent table header element binds to a sub-array of data, creating child elements with different values. Using D3 v6’s `selectAll().data()` pattern, the code first joins `topData` to header cells, then re-joins each header’s `div.th-inner` with entries from `newData`. Child `div.th-but` elements are appended with checkboxes and spans, each bound to individual sub-data items, illustrating how to manage varying child data per parent.

Jul 26, 2021
Loading thumbnail…

Dataviz 2020_Ep41,43 - 33,34. Missing Migrants4 - Multiple Views

This visualization combines a bubble map and a time-series histogram to explore global migrant deaths and disappearances. The map projects incident locations using a natural Earth projection, with circle size scaled by the square root of the total dead and missing. Below, a date histogram aggregates reported incidents by month, summing casualties. Built with React and D3 v6, the example uses `geoNaturalEarth1` and `geoPath` for map rendering, while `scaleSqrt`, `scaleTime`, and `bin` handle proportional sizing and time binning. Data comes from a CSV of global migrant incidents.

Jul 24, 2021
Loading thumbnail…

Dataviz 2020_Ep39 - 31. Missing Migrants2 - Binning, Aggregating

This histogram visualizes monthly reported deaths and missing migrants, aggregating the dataset by time bins with total counts. The chart uses React and D3 v7, applying `d3.bin` with `timeMonths` thresholds and `sum` for aggregation, then renders SVG rectangles via custom `Marks` components. Axes are scaled with `scaleTime` and `scaleLinear`, and a tooltip reveals exact totals via SVG `<title>` elements. Data comes from a CSV of Missing Migrants Global 2019 records, loaded through `d3.csv`.

Jul 23, 2021
Loading thumbnail…

Dataviz 2020_Ep38 - 30. Missing Migrants1 - Loading and Visualizing Data

This scatter plot displays reported dates of missing migrant incidents against the total number of dead and missing individuals. The visualization uses React with SVG rendering, employing d3.scaleTime and d3.scaleLinear for axes, while d3.csv loads the Missing Migrants Global 2019 subset dataset. Custom AxisBottom, AxisLeft, and Marks components render the circles with tooltips using d3.timeFormat.

Jul 21, 2021
Loading thumbnail…

Dataviz 2020_Ep37 - 29. Using Size

This visualization displays global city populations using circles overlaid on a world map, with area encoding population size. The map uses natural Earth projection with graticules and land boundaries from TopoJSON. The data comes from a CSV of world cities with latitude, longitude, and population values. React manages the component state while d3.scaleSqrt maps population to circle radius, and d3.geoPath renders the geographic features. SVG circles are drawn with semi-transparent teal fill, and the rendering uses d3.json and d3.csv for data loading.

Jul 21, 2021
Loading thumbnail…

Dataviz 2020_Ep36 - 28. Points on a Map

This example displays world cities as semi-transparent points overlaid on a natural Earth projection, with the map rendered using D3’s geoNaturalEarth1 and geoPath for land, interiors, graticules, and a sphere outline. The points are positioned by projecting each city’s longitude and latitude through the same projection. Data comes from a world cities CSV and the world-atlas TopoJSON, loaded via d3.csv and d3.json, while React manages the component state and SVG rendering.

Jul 21, 2021
Loading thumbnail…

Dataviz 2020_Ep35 - 27. Interactive Color Legend

This scatter plot of the Iris dataset shows how petal and sepal dimensions vary across three species. An interactive color legend allows hovering over a species label to isolate its data points while dimming the others. Built with React and D3 v6, it uses `scaleOrdinal` for color mapping and SVG circles for marks. The dropdown menus let users select which quantitative attributes to plot on the x and y axes.

Jul 20, 2021
Loading thumbnail…

Dataviz 2020_Ep34 - 26. Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between four physical measurements (sepal and petal dimensions) by selecting which variable appears on each axis via dropdown menus. D3.scaleLinear maps the numeric attributes to screen coordinates, while d3.scaleOrdinal assigns categorical colors to the three Iris species, displayed in a custom color legend rendered as SVG circles. The visualization uses React hooks to manage state, D3’s csv parser to load the data, and SVG marks with tooltips for each point.

Jul 19, 2021
Loading thumbnail…

Dataviz 2020_Ep33 - 26. Scatter Plot with Colors

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements. The visualization displays each flower as a colored circle, with the three species distinguished by a categorical color scale. Users can dynamically select which measurement to plot on the x and y axes via the dropdown menus. Built with D3 v6 for data loading and scaling, the chart uses React to render SVG elements, including axes, tick marks, and circles, with tooltips showing the y-value. Data is loaded from a remote CSV file using the `csv` function.

Jul 19, 2021
Loading thumbnail…

Dataviz 2020_Ep32 - 25. Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which measurement attributes appear on the X and Y axes via dropdown menus. Built with React and rendered as an SVG, it uses D3 utilities like `scaleLinear` for axis scaling, `extent` for domain calculation, and `csv` for data loading. The visualization displays the data points as teal circles, with tick marks and axis labels generated by custom React components, all styled with the Poppins font.

Jul 19, 2021
Loading thumbnail…

Dataviz 2020_Ep31 - 24. Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, with the x and y axes each controlled by dropdown menus that let users select which of the four numeric attributes to compare. The visualization shows how different combinations of sepal and petal measurements distribute across the sample. Built with React and d3.scaleLinear, the chart renders SVG circles positioned by the selected attributes, with axis labels generated from the menu choices. Data loading uses d3.csv from a remote gist, and the React useState hooks manage the dropdown selections.

Jul 18, 2021
Loading thumbnail…

Dataviz 2020_Ep30 - 23. Menus (React)

This example demonstrates a simple pet-selection interface, showing how a list of animal choices updates the UI as the user picks a value. It displays the selected value in the console and the dropdown list. The implementation uses React 17 with hooks like `useState` and a custom `Dropdown` component. It renders a native `<select>` element with `onChange` handlers, and the app is mounted via `ReactDOM.render`. The code relies on React’s state management for interactivity, while styling is handled through CSS.

Jul 17, 2021
Loading thumbnail…

Dataviz 2020_Ep29 - 22. World Map

This example presents a world map in an SVG using the Natural Earth projection. The visualization shows landmasses in teal, a light gray sphere, and additional graticule and interior boundary lines. It translates TopoJSON data from the world-atlas package into GeoJSON features using the `topojson` feature and `mesh` functions, which are then rendered with `d3.geoPath` and `d3.geoGraticule`. Built with React and D3 v6, the map adapts to the full browser window size.

Jul 16, 2021
Loading thumbnail…

Dataviz 2020_Ep27 - 21. Line Chart

This line chart displays weekly temperature data for San Francisco, loaded from a CSV file using D3’s `csv` utility. Time is plotted on the x-axis with `scaleTime`, temperature on the y-axis with `scaleLinear`, and both axes are rendered as custom React components. The line path and circular data points are drawn using `d3.line` and `curveNatural` within an SVG, with hover tooltips provided by the SVG `title` element.

Jul 16, 2021
Loading thumbnail…

Dataviz 2020_Ep26 - 20. Working with Time

A scatterplot displays temperature readings over the course of a week, with the x-axis using a time scale and the y-axis a linear scale. The visualization loads CSV data via D3's `csv` utility, parses timestamps with `new Date`, and renders React components as SVG circles and axes. It uses `scaleTime` and `scaleLinear` for scaling, `timeFormat` for weekday tick labels, and D3's `extent` to set domains.

Jul 15, 2021
Loading thumbnail…

Dataviz 2020_Ep24 - 18. Styling (BarChart Vertical Ver.)

A vertical bar chart displays the populations of ten countries from a UN 2019 dataset. The chart emphasizes styling through rotated x-axis labels, custom fonts, and muted tick and bar colors. React renders SVG marks and axes, while D3 v6 utilities `scaleBand`, `scaleLinear`, `csv`, and `max` handle data loading and scaling. Each bar includes a native SVG `<title>` tooltip for population values.

Jul 15, 2021
Loading thumbnail…

React + D3 + useData Viz Starter

This example demonstrates a minimal React and D3 starter template for building SVG visualizations. It shows how to fetch and parse a CSV dataset from a GitHub gist using a custom `useData` hook that leverages `d3.csv`, and renders the results inside a reusable `VizContainer` component. The container abstracts the SVG and group elements while following a standard margin convention; an optional `showMargins` prop displays placeholder rectangles to visualize the plotting area. The code highlights the integration of React’s state management via `useState` and `useEffect` with D3’s data loading and SVG rendering.

Jul 15, 2021
Loading thumbnail…

Dataviz 2020_Ep23 - 17. Refactoring (BarChart Vertical Ver.)

This example presents a vertical bar chart of the top 10 countries by population for 2020, sourced from a UN Population CSV file. The visualization shows each country's population as a bar with rotated, angled labels on the x-axis. Built with React and D3 version 6, the chart separates axes and bar marks into individual components, using `d3.csv` for data loading, `d3.scaleBand` and `d3.scaleLinear` for scaling, and rendering as SVG elements. The layout adapts to the browser window’s dimensions.

Jul 15, 2021
Loading thumbnail…

Dataviz 2020_Ep22 - 16. Axes (with React and D3) (BarChart Vertical Ver.)

A vertical bar chart displays the top ten countries by 2020 population, sourced from a UN_Population_2019 CSV file. The React component uses `useState` and `useEffect` to load data via D3’s `csv`, then renders SVG rects for bars. Axes are drawn manually with D3 scales (`scaleBand`, `scaleLinear`) and tick marks, including rotated country labels. The visualization updates the chart to fit the window dimensions, with bars positioned using `xScale` and `yScale` and heights derived from population values.

Jul 14, 2021
Loading thumbnail…

Dataviz 2020_Ep22 - 15. The Margin Convention (with React and D3) (BarChart Vertical Ver.)

A vertical bar chart displays the ten most populous countries in 2020 from a UN population CSV loaded with `d3.csv`. React renders SVG rectangles, while D3's `scaleBand` and `scaleLinear` map country names and population values to pixel coordinates. The chart applies the margin convention by translating a `<g>` element via `transform`, separating the plotting area from the viewport. Data loading occurs in a `useEffect` hook, and the visualization updates once the asynchronous CSV fetch resolves.

Jul 13, 2021
Loading thumbnail…

Dataviz 2020_Ep15 - 9. Loading and Parsing DSV Data with D3

This example demonstrates how to load and parse a remote CSV file, displaying the file size, row count, and column count from the cssNamedColors dataset. The code uses `d3.csv` to fetch and parse the URL, then `d3.csvFormat` to measure the data’s text size. It also includes commented alternatives using `fetch` with `async/await` and `d3.csvParse`, illustrating multiple parsing approaches with D3 v6. Results appear in a large `<pre>` element.

Jul 12, 2021
Loading thumbnail…

Dataviz 2020_Ep21 - 14. Bar Chart (with React and D3) (Vertical Ver.)

This example displays a vertical bar chart of the top ten countries by 2020 population, using the UN Population dataset loaded via D3’s `csv` utility. React manages the component state and renders SVG `rect` elements, while D3’s `scaleBand` and `scaleLinear` compute the bar positions and heights. The chart resizes to the full browser window, and bars extend upward from the bottom edge with the y-axis inverted to match the data scale. D3 v6 and React 17 are loaded from CDNs, and the visualization updates after an asynchronous data fetch.

Jul 12, 2021
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries, using D3.js v5 to render an SVG visualization. The chart customizes axes by removing the y-axis line and ticks, and by formatting x-axis tick labels from raw numbers into a compact "B" (billion) suffix using a custom tick format function. Country labels appear on the y-axis, while population values are represented by horizontal bars scaled with `d3.scaleLinear`. Data is loaded from a CSV file and parsed for the visualization.

Jul 11, 2021
Loading thumbnail…

Bar chart with D3.js

This bar chart displays the most loved programming languages in 2018, based on Stack Overflow survey data, with each bar’s height representing the percentage of developers who reported loving that language. The visualization is rendered as an SVG with D3.js v6, using `d3.scaleBand` and `d3.scaleLinear` for the axes. Hovering over a bar triggers a transition that highlights the selected bar, increases its width, draws a dashed reference line at the hovered value, and displays percentage divergence labels for all other bars relative to the selected one. The chart includes grid lines, axis labels, a title, and a source attribution.

Jul 11, 2021
Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays regional population changes over time as multiple colored lines, with a vertical marker indicating the currently selected year. Users hover over the chart to update the selection, and a legend identifies each region. Built with D3 v5, it uses `nest` to group data by region and `scaleOrdinal` for colors, rendering with SVG. The data is sourced from UN population estimates, melted into tidy format for the line chart.

Jul 9, 2021
Loading thumbnail…

geneInfoTable

This example presents a sortable data table of gene information, displaying columns such as gene name, DEG values, and subcellular location lists. The table is built with D3 v5 and React, using `d3.select` and `d3.ascending`/`d3.descending` for column sorting. Data is loaded from JSON and TSV files via `d3.json` and `d3.tsv`, with the table rendered as SVG and styled via CSS.

Jun 23, 2021
Loading thumbnail…

Practice

Three buttons update a row of SVG circles and labels, demonstrating data joins with enter, merge, and exit selections in D3 v6. Clicking ABC renders green circles labeled A–C, DEF renders red circles D–F plus Y, and the initial view shows blue X–Z. The `selectAll('circle')` and `selectAll('text')` bind arrays of objects specifying fill color, y-position, and text, with transitions handled manually through the button click handler and a render function.

Jun 22, 2021
Loading thumbnail…

Chorpleth Map with Interactive Filtering

This choropleth map colors countries by their economy category using a spectral color scale, with a legend that filters the map by clicking on a category. The map renders with SVG paths via `d3.geoPath` and the Natural Earth projection, while the legend uses `d3.scaleOrdinal` and `d3.schemeSpectral` for color assignment. Interactive filtering dims non-selected countries and legend entries, and hovering reveals country names and values through SVG `title` elements. Country boundaries come from the world-atlas TopoJSON dataset merged with TSV metadata.

Jun 21, 2021
Loading thumbnail…

Bowl of Fruit - Interaction(Click to Select)

Five circles representing apples enter an SVG bowl, then shrink away or morph into a lemon through scripted timeouts while a click selects a fruit with a black stroke. The example uses d3 v5’s data join, scaleOrdinal for color and radius, and transition().duration(1000) to animate enter, update, and exit states. A click event triggers a re-render, updating the selected fruit’s stroke.

Jun 18, 2021
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users choose which columns of the auto-mpg dataset to display on the x- and y-axes via HTML dropdown menus. The `dropdownMenu` module creates the select elements, while the `scatterPlot` module uses d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render the axes. Circles transition with d3.transition over 2 seconds, animating from the center to their new positions using `transition.attr` and `transition.delay`. SVG rendering and D3 v5 selections manage updates.

Jun 18, 2021
Loading thumbnail…

Visualization Project - Gene Cell Locations

This interactive visualization maps gene expression changes onto a schematic animal cell, with subcellular compartments such as the nucleus, mitochondria, and plasma membrane colored by net differential expression (net_DEG) using sequential blue and red color scales. Users can zoom and pan the SVG scene, and clicking a compartment selects it for highlighting. The visualization is built with React and D3 v5, using `scaleSequential`, `interpolateBlues`, `interpolateReds`, and the `zoom` API, with data loaded from JSON and TSV files hosted on GitHub.

Jun 18, 2021
Loading thumbnail…

Protein Localization Visualization

This interactive visualization maps protein expression levels onto a stylized diagram of a cell, using color intensity to show the net differential expression (net_DEG) across subcellular locations. The diagram is rendered as SVG paths, and users can zoom and pan through the entire graphic. The code imports `d3.scaleSequential` with `interpolateBlues` and `interpolateReds` to encode negative and positive values, respectively, while also using `d3.line` and `curveCardinal` to draw the cell component boundaries. Data is loaded from a CSV file.

Jun 18, 2021
Loading thumbnail…

Scatter Plot(Continuous Values)

This scatter plot visualizes the relationship between horsepower and weight for cars in the auto-mpg dataset. Each red, semi-transparent circle represents a vehicle, positioned by its continuous horsepower value on the x-axis and weight on the y-axis, with axis labels and a title. The visualization uses D3 v5 with SVG rendering, leveraging `d3.csv`, `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to map the data. Data values are converted to numeric types before plotting, and grid-like tick marks enhance readability.

Jun 17, 2021
Loading thumbnail…

Blank Canvas

A blank canvas is presented as a full-screen, rounded rectangle rendered in SVG, filling the entire viewport with a clean, empty surface. The visualization uses D3.js v5 via the `select` method to create and size the `rect` element dynamically based on the browser window's dimensions. No data is loaded or displayed, and the code simply sets the SVG's width and height attributes before appending the rectangle. The result is a minimal, static composition that foregrounds the canvas itself as the subject.

Jun 17, 2021
Loading thumbnail…

Data Table Summary

This example summarizes a CSV dataset by displaying its dimensions and a preview. It first shows the total row and column counts along with the file size in kilobytes, calculated using `csvFormat`. It then displays the first 10 rows as formatted JSON. The code loads the auto-mpg dataset via `d3.csv` and builds the text output using D3 selections to append `<pre>` elements.

Jun 16, 2021
Loading thumbnail…

Bar Chart - Protein Localization

This bar chart displays protein localization data, comparing average expression values across subcellular locations for ovarian tumor samples. The visualization uses a vertical bar layout with the location categories on the y-axis and expression values on the x-axis. Built with D3 v7, the code employs `d3.csv` for tabular data loading, `scaleLinear` and `scaleBand` for axes, and standard margin conventions with `axisLeft` and `axisBottom` to render the SVG chart, styling bars in steel blue.

Jun 16, 2021
Loading thumbnail…

Dataviz 2018 - 3. Bar Chart - D3 CSV Data Import, Data Joins, Scales, Margin Convention, Axes - Ep7

This example shows a horizontal bar chart of population estimates for ten countries, imported from a local CSV file. It demonstrates core D3 v7 techniques including `d3.csv()` for tabular data import, data joins via `selectAll().data().enter()`, and `scaleLinear` and `scaleBand` for positioning. The margin convention establishes an inner plotting area, and axes are added using `axisLeft` and `axisBottom`. The chart renders as SVG with steelblue rectangles, and population values are scaled by 1,000 during preprocessing.

Jun 16, 2021
Loading thumbnail…

Dataviz 2018 - 2. D3 starter, SVG DOM manipulation, transition(animation), Smile Face - Ep4

This example shows a yellow smiley face built from SVG elements, with animated eyebrows that move up and down in a looping transition. The code creates a circle for the face, two circles for eyes, a mouth drawn with `d3.arc`, and rectangles for eyebrows using D3 selections. It demonstrates SVG DOM manipulation by appending elements to groups, and animates the eyebrow group’s `transform` attribute with chained `transition().duration()` calls. The visualization runs in D3 v7 and renders to a 960×500 SVG canvas.

Jun 15, 2021
Loading thumbnail…

Dataviz 2018 - 1. SVG Basic Elements - Ep3

This example showcases basic SVG shapes—a circle, rectangle, line, and path—arranged with geometric transformations. It demonstrates how the `transform` attribute’s `scale` and `translate` functions reposition and resize the grouped elements. The code uses raw SVG markup directly in the HTML, styled with CSS selectors like `.lines path` to apply green strokes and rounded line joins. A red-filled circle and a green rectangle appear under a scaled group, while a translated group uses a cyan fill with a black stroke. The path is drawn using the `M` (move-to) and `L` (line-to) commands.

Jun 15, 2021
Loading thumbnail…

Dataviz 2020_Ep22 - 16. Axes with React and D3

This example shows a horizontal bar chart of United Nations World Population 2019 data, loading the first ten countries from a CSV file and rendering them as SVG rectangles. The chart demonstrates how to construct axes manually without D3 axis components, using `scaleLinear` and `scaleBand` to position elements. React manages the component state and rendering lifecycle, while D3 utilities handle data loading via `csv()` and scale creation through `max()`, `scaleLinear`, and `scaleBand`. For the x-axis ticks, the code calls `xScale.ticks()` to generate tick values and maps them to vertical grid lines, with the chart rendered inside an SVG `<g>` element using React's JSX syntax.

Jun 14, 2021
Loading thumbnail…

Dataviz 2020_Ep22 - 15. The Margin Convention

A horizontal bar chart displays the top 10 countries by 2020 population from the UN World Population 2019 dataset. React manages the component state and renders the SVG, while D3 utilities load the CSV data with `csv`, and compute scales using `scaleBand` and `scaleLinear`. The chart applies a fixed margin convention, translating the inner group by 20 pixels on each side, and uses `max` to set the x-axis domain.

Jun 14, 2021
Loading thumbnail…

Dataviz 2020_Ep20 - 13. Pie Chart (with React and D3)

This example displays CSS named colors as a radial burst of equal-sized pie slices, with each slice filled by the color it represents. It loads data from a CSV file using D3’s `csv` utility, then uses D3’s `pie` and `arc` functions to compute and draw the SVG paths. React manages the state and rendering, with a `useEffect` hook fetching the data asynchronously and displaying a loading message until it arrives. The chart is centered within a 960 by 500 pixel SVG viewport, creating a full circular composition of the color spectrum.

Jun 13, 2021
Loading thumbnail…

Dataviz 2020_Ep21 - 14. Bar Chart (with React and D3)

This example displays a horizontal bar chart of the top ten countries by 2020 population, using the UN World Population 2019 dataset. It loads the CSV via `d3.csv`, then triggers React re-renders with `useState` and `useEffect`. The chart maps country names to a `scaleBand` y-axis and population values to a `scaleLinear` x-axis, rendering each bar as an SVG `rect` with React. D3 utilities handle data loading and scaling, while React manages the component lifecycle and DOM updates.

Jun 12, 2021
Loading thumbnail…

Dataviz 2020_Ep20 - 12. Rendering Data Basics (with React and D3)

This example renders a horizontal striped chart of CSS named colors, with each row displaying the RGB hex value directly as its background color. The visualization loads the data from a CSV file hosted as a GitHub gist using D3’s `csv` utility, while React manages the component state and conditional rendering. A `useEffect` hook triggers the asynchronous data fetch, showing a loading message until the data arrives, then maps each color entry to a div with fixed dimensions and a backgroundColor style. The code demonstrates a basic integration of React and D3 for data loading and DOM rendering.

Jun 10, 2021
Loading thumbnail…

Dataviz 2020_Ep18 - 11. Vega Lite API template

This example demonstrates a scatter plot visualization of auto-mpg data, showing relationships between vehicle weight, horsepower, and miles per gallon. The visualization uses colored circles sized by mpg values, with tooltips displaying car model names. It is built using the Vega Lite API, which registers with d3.v6 for data loading, and renders as SVG. The code retrieves data from a CSV file and applies custom configuration for axis styling and typography.

Jun 9, 2021
Loading thumbnail…

Dataviz 2020_Ep16 - 10. Loading Data with React and D3

This example demonstrates how to load and summarize a CSV dataset using D3 and React. It displays the file size in kilobytes, row count, and column count from the CSS named colors dataset. The code uses React’s `useState` and `useEffect` hooks to fetch the data via D3’s `csv` function from a GitHub gist URL, then formats it with `d3.csvFormat` and displays the result. React renders the summary text within a `<pre>` element while the data loads.

Jun 7, 2021
Loading thumbnail…

Dataviz 2020_Ep14 - 8. Interaction With React - useState hook, useCallback - Mouse Follower

A React-based SVG visualization renders a single circle at the center of a 960 by 500 canvas. The circle follows the mouse cursor in real time as the user moves it across the screen, using the `useState` hook to store the cursor’s x and y coordinates and the `useCallback` hook to handle the `onMouseMove` event. The React component updates the circle’s `cx` and `cy` attributes directly, with D3 v6 loaded but not used for this interaction. No external data is involved; the graphic demonstrates state-driven rendering and event handling in React.

Jun 4, 2021
Loading thumbnail…

Dataviz 2020_Ep13 - 7. Loading Data with Fetch, Promises, Async, Await

This example demonstrates loading an external CSV file using the Fetch API with modern JavaScript asynchronous patterns. The code defines an `async` function that uses `await` to fetch a remote CSV of named CSS colors and converts the response to text, then logs it to the console. It also includes a commented-out alternative using promise chaining with `fetch().then()`. The visualization itself is minimal, focusing purely on the data-loading mechanics rather than rendering any graphical output.

Jun 3, 2021
Loading thumbnail…

Dataviz 2020_Ep10 - 6. Face Part 6 - Compartmentalizing Complexity

A grid of randomized faces demonstrates how React components can compartmentalize a complex visualization into modular parts. Each face combines a yellow background circle, two eyes, and a mouth, generated with random values for position, size, and stroke width. The example uses React for component composition and state, D3's `arc()` API for the mouth shape, and SVG for rendering. The `Face` component assembles smaller components—`BackGroundCircle`, `Eyes`, and `Mouth`—within a `FaceContainer`, showcasing a reusable, parameterized approach to building varied visual outputs.

Jun 3, 2021
Loading thumbnail…

Dataviz 2020_Ep9 - 5. Face Part 5 - Modularize with ES6 Modules

This example shows a modularized face composed of a yellow background circle, two eyes, and an arc-shaped mouth, all rendered as SVG within a React component. The code imports React and ReactDOM, along with three separate ES6 module components—BackGroundCircle, Eyes, and Mouth—to structure the visualization. The Mouth component uses d3.arc to generate a path, while fixed dimensions and offsets position the facial features symmetrically around the center of a 960×500 viewport.

May 31, 2021
Loading thumbnail…

Dataviz 2020_Ep8 - 4. Face Part 4 - React Components Basics

This example shows a simple smiley face drawn with SVG shapes, composed of a yellow circle background, two eyes, and a mouth arc, all orchestrated by a React App component that delegates to smaller components. The code uses React and ReactDOM for component rendering, and the D3.js `arc()` API to generate the mouth path. The rendering is static SVG, with the face centered within a 960 by 500 viewport and positioned via a translate transformation.

May 31, 2021
Loading thumbnail…

Dataviz 2020_Ep7 - 3. Face with React AND D3 (Add a mouth): Arc, Group

A yellow circular face with two black eyes and a curved mouth is drawn using SVG, rendered through React. The code combines React components with D3's `arc` generator to create the mouth, while circles define the face and eyes. The face uses a yellow fill, black stroke, and the mouth is positioned using an arc path. The example demonstrates integrating D3 shape generation with React's declarative rendering, using `react-dom` to mount the SVG into the DOM.

May 31, 2021
Loading thumbnail…

Dataviz 2020_Ep6 - 2. Face Part 2 (React Basic Setup)

A stylized face is drawn using two SVG circles for eyes and one larger circle for the head, all rendered in yellow with a black outline. The visualization uses React with ReactDOM to render the SVG elements, and the code defines constants for positioning attributes like center coordinates, offset distances, and radii. The face is centered on a 960 by 500 canvas, with the head's radius calculated from the canvas height and stroke width. This example demonstrates a basic React setup for creating simple geometric data visualizations.

May 31, 2021
Loading thumbnail…

Dataviz 2020: Ep5 - 1. Smiley Face Part 1 (Half face with only HTML)

A minimalist web page uses HTML, CSS, and JavaScript to draw a half smiley face with SVG circles. The page renders a large yellow circle with a black stroke as the face, plus two smaller black circles as eyes, all positioned within an SVG viewport. The code directly specifies circle coordinates and radii in the markup, with no data or external libraries, demonstrating a basic static vector graphic.

May 31, 2021
Loading thumbnail…

Table_Cell Integration Trial_SuperSuperSuperFinalFinalFinal

This interactive visualization maps gene expression data onto a diagram of a cell, showing the net differential expression (DEG) for each cellular location through blue and red sequential color scales. Users can click on a cell region to update a sortable HTML table of associated genes and a treemap of hierarchical gene categories. Built with React and D3 v5, it uses SVG paths, `scaleSequential` with `interpolateBlues` and `interpolateReds`, and `transition` for table updates. Data is loaded via `d3.json` and `d3.tsv` from a remote GitHub repository.

Dec 9, 2019
Loading thumbnail…

Cell Diagram for Integration

This interactive visualization presents a stylized cell diagram where each subcellular location is colored according to differential gene expression data. Areas such as the extracellular space, plasma membrane, and cytosol are rendered as SVG paths, with integrated net_DEG values mapped to a blue-to-red color scale. Built with React and D3 v5, the example uses `scaleSequential` and `interpolateBlues`/`interpolateReds` to encode signed values, while custom `line` curves with `curveCardinal` define the organelle boundaries. The diagram supports zooming through D3’s `zoom` interaction, and the underlying gene-location data is loaded from JSON and a user-selected TSV file.

Dec 8, 2019
Loading thumbnail…

Bowl of Fruit - Nested Elements_Singular Elements

A bowl of fruit demonstrates nested SVG elements with singular data joins. Five apples render as red circles inside a rounded rectangle bowl, each group containing a circle and a text label. Over time, the dataset shrinks, one apple changes into a yellow lemon, and another apple is removed. Using `d3.scaleOrdinal` for color and radius, the code performs enter, update, and exit selections via `selection.enter()`, `merge()`, and `exit().remove()` to transition the fruit groups dynamically. The example shows how to manage hierarchical SVG structures with D3 v5.

Dec 4, 2019
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with D3 v5: a color legend for ordinal scales and a size legend for square-root scales. The color legend maps fruit categories to distinct colors, while the size legend visualizes numeric values using scaled circle radii. Both components use D3 selections and data joins to update legends dynamically. The code relies on `scaleOrdinal`, `scaleSqrt`, `scale.ticks`, and custom group elements with SVG circles and text labels, styled via CSS classes.

Nov 21, 2019
Loading thumbnail…

World Countries Tree

This visualization presents the hierarchical structure of world countries, organized by continent and subregion. The tree diagram lays out nodes horizontally, with continents as the top level and individual countries as the final leaves. The code uses `d3.tree` for layout, `d3.hierarchy` to parse the JSON data, and `d3.linkHorizontal` to generate the curved connecting paths. Text size scales based on the node’s depth, and the SVG rendering supports pan-and-zoom interaction through the `d3.zoom` event handler. The data is loaded from `data.json` and styled with Playfair Display typography.

Nov 21, 2019
Loading thumbnail…

Preliminary Tree

This tree visualization shows the hierarchical structure of world regions and countries, with horizontal links connecting parent nodes to their children using d3.tree and d3.hierarchy. The code loads data from a JSON file, positions nodes based on the layout’s width and height, and renders the connections as SVG paths via d3.linkHorizontal. The viewport fills the entire browser window, and the data includes continents, subregions, and individual countries as leaf nodes.

Nov 20, 2019
Loading thumbnail…

Bowl of Fruit - Interaction(Hover to Select)

This example demonstrates an interactive bowl of fruit where users can hover over apples and a lemon to select them, highlighting the chosen fruit with a black outline. The visualization shows how data updates and animations work together as fruits are removed or change type over time. Each fruit is rendered as a circle using D3’s SVG API, with size and color determined by ordinal scales. The implementation leverages `scaleOrdinal` for color and radius, and uses `transition().duration(1000)` to animate the circles growing and shrinking as they enter, exit, or update.

Nov 19, 2019
Loading thumbnail…

Cheap Tricks for Interaction - Hover, Tooltip, Zoomin

This example shows an interactive world map with hover highlighting, tooltips, and zoom capabilities. Hovering over a country turns it red and displays its name via SVG `<title>` elements. Users can zoom and pan the map using the d3.zoom behavior, which updates the map’s transform. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to project and render TopoJSON country boundaries from world-atlas, with country names loaded from a TSV file.

Nov 19, 2019
Loading thumbnail…

Making a World Map

This example shows a world map rendered as an SVG, with countries filled in light green and oceans depicted as a blue sphere. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw both the sphere outline and country boundaries. Country data comes from the world-atlas TopoJSON file, which is parsed with the `feature` function from topojson. The map is static, with no interactions or transitions.

Nov 18, 2019
Loading thumbnail…

Bowl of Fruit -Animation- Eat Another Apple

Five red apples sit in a row, then disappear and change colors through timed updates. The D3 v5 code uses `scaleOrdinal` for color and radius, `selection.data` with key functions, and `transition.duration` to animate circles growing, shrinking, and being removed. SVG circles render the fruit, and `setTimeout` calls trigger the bowl’s changes every second.

Nov 16, 2019
Loading thumbnail…

Bowl of Fruit - Export Module to separate file

A modular D3 v5 example renders a changing bowl of fruit as circles in an SVG. It uses `d3.scaleOrdinal` for color and radius mapping, and `d3.select` with a `data` join to manage enter, update, and exit selections. The `fruitBowl` function is exported from a separate file and imported into `index.js`, which drives the animation with `setTimeout` calls to remove apples and change one to a lemon. The data is plain JavaScript objects with a `type` property, and the visualization updates over three seconds.

Nov 16, 2019
Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five apples are rendered as red circles in an SVG, then one is removed and a lemon replaces another, turning it yellow. This demonstrates the general update pattern with enter, update, and exit selections. The code uses d3.select, data joins, scaleOrdinal for color and radius, and merge operations to handle state changes over time.

Nov 16, 2019
Loading thumbnail…

World Population Area Chart

This area chart depicts global population growth over time, with the y-axis labeled in billions and the x-axis representing years. The chart uses a filled, curved path to visualize the data, with maroon shading under the line to emphasize the trend. The visualization is built with D3.js v5, using `d3.area()` with `curveBasis` for the smooth area, `d3.scaleTime` and `d3.scaleLinear` for the axes, and `d3.axisLeft` and `d3.axisBottom` for tick marks. Data is loaded from a CSV file hosted on VizHub, and the SVG rendering includes custom axis labels and a title.

Nov 10, 2019
Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses a smooth curved path generated by d3.area with the curveBasis interpolator, filling the space below the line in maroon. Axes are rendered with d3.axisBottom and d3.axisLeft, while scales are created with d3.scaleTime and d3.scaleLinear. Data is loaded from a CSV file via d3.csv and rendered as SVG.

Nov 10, 2019
Loading thumbnail…

Temperature in San Francisco Line Chart

A line chart displays temperature readings across one week in San Francisco, with time on the x-axis and temperature on the y-axis, rendered as a smoothed maroon curve over a grid of light gray tick lines. The visualization labels both axes and includes a title. The chart loads CSV data from a URL, parses timestamps and numeric temperatures, and uses d3.scaleTime and d3.scaleLinear for axes, with d3.line and d3.curveBasis for the path, drawn as SVG inside a 960 by 500 canvas.

Nov 10, 2019
Loading thumbnail…

Temperature in San Francisco Scatter Plot

A scatter plot displays temperature readings across one week in San Francisco, with time on the x-axis and temperature on the y-axis. The SVG visualization uses d3.scaleTime and d3.scaleLinear to map data, d3.axisBottom and d3.axisLeft for labeled axes, and circles with steelblue fill for each data point. Data loads from a CSV file via d3.csv, and the chart includes a title and axis labels. Grid lines extend across the plot area, generated through tickSize on the axes.

Nov 10, 2019
Loading thumbnail…

Scatter Plot: Quantitative vs Qualitative values

This scatter plot displays the population of the ten most populous countries, with each country positioned along the vertical axis and its population on the horizontal axis. The visualization uses D3 v5’s `scaleLinear` for the population values and `scalePoint` for the categorical country names, rendering circles via SVG. The code loads data from a CSV file using `d3.csv`, formats the x-axis ticks with `d3.format`, and adds grid lines through custom axis tick sizes.

Nov 7, 2019