T

thanhtrant219

@thanhtrant219·27 public vizzes

Loading thumbnail…

D3 Learning

This example demonstrates fundamental D3.js data binding and selection techniques through a simple bar chart. It loads an array of numeric values and maps them to SVG rectangles, with the height of each bar proportional to its corresponding data point. The code uses `d3.select` and `d3.selectAll` to manipulate DOM elements, while the `.data()`, `.enter()`, and `.append()` methods create the visual bars from the dataset. Additionally, it shows how to modify text content and styles on headings and paragraphs, illustrating both static selection and dynamic data-driven rendering in React.

Loading thumbnail…

Untitled

This example uses D3.js v3 and TopoJSON to render a force-directed layout of U.S. state centroids, with Voronoi links connecting neighboring states. The code loads a U.S. map from a JSON file, filters out non-continental states, and computes centroids via `d3.geo.path().centroid()`. A `d3.layout.force()` simulation positions the nodes while maintaining link distances derived from the Voronoi cells. SVG paths draw each state’s shape, and lines represent the Voronoi links, updating on each tick. The visualization highlights geographic adjacency through network topology rather than choropleth coloring.

Loading thumbnail…

Force Directed Graph

A force-directed graph visualizes the relationships between programming languages. Nodes represent individual languages, with their size scaled by the number of connections. Curved links show relationships, with solid green lines indicating a connection and dashed black lines showing a non-connection. The layout is computed using d3.forceSimulation with forceLink, forceCenter, forceX, forceY, and forceManyBody forces. Node sizes derive from link counts, while labels and colors are applied via SVG elements and d3.interpolateBlues.

Loading thumbnail…

Untitled

This example shows a force-directed layout of 200 colored circles that repel each other and collide as they move. Dragging the mouse moves a fixed root node, pulling the surrounding circles toward the cursor. The visualization uses D3 v3’s `d3.layout.force` with custom gravity and charge functions, and a quadtree via `d3.geom.quadtree` to efficiently handle collision detection between circles. Each circle’s radius is randomly assigned, and its fill color comes from a categorical scale (`d3.scale.category10`). The rendering is done in SVG, with positions updated on each tick event.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and organized using SVG transform groups. The code renders multiple shape variations, including those with custom fills, strokes, and a highlighted group with a light blue background and black outlines. It uses raw SVG elements within a React component, with CSS classes and inline attributes controlling appearance. The visualization showcases how transforms like scaling and translation position shapes, while CSS properties define stroke colors, widths, and fill colors across different groups.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive dashboard visualizes CDC ILINet flu surveillance data across four linked panels: a multi-year line chart of weekly trends, a choropleth map of state averages, a bar chart ranking top states, and a detailed state-level line chart. Built with React and D3 v5, it uses `d3.scaleOrdinal` for categorical colors, `d3.geoAlbersUsa` and `d3.geoPath` for the map, and `d3.line` with `curveCardinal` for smoothed curves. Users filter by year and metric via dropdowns, with hover and click interactions synchronizing selections across all panels, highlighting matching states and years.

Loading thumbnail…

Night Temperature in San Antonio

This example shows nightly low temperatures in San Antonio over a week in April 2020. A smooth maroon line connects time-stamped data points, with gray gridlines and labeled axes for time and temperature. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis`. Data is loaded from a CSV file and rendered as an SVG, with axes and labels styled via CSS.

Loading thumbnail…

World Map

This world map displays country boundaries using the Natural Earth projection, with countries colored in a light teal and highlighted in red on hover. The visualization uses D3.js v5 and the topojson library to load and convert TopoJSON data from the world-atlas package. The map renders as SVG paths via D3's geoPath and geoNaturalEarth1 projection, while the zoom interaction is handled through D3’s zoom component. Country names are joined from a TSV file using ISO numeric codes, shown as tooltips.

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical flare dataset, encoding each node’s value as the arc’s angular width. Clicking a slice zooms into that subtree, dynamically rescaling the partition layout and re-centering the view. Built with D3 v5 and SVG, the example uses `d3.partition`, `d3.hierarchy`, and `d3.interpolate` to animate transitions, reading hierarchical data from a CSV file with id and value fields. The rendered output includes a breadcrumb trail showing the current path.

Loading thumbnail…

Untitled

This example presents a choropleth map of U.S. states, with each state filled using a color scale from light yellow to dark red based on randomly generated low, average, and high values. Hovering over a state triggers a tooltip that displays these three metrics in a table. The visualization uses D3 v3 and SVG, with the `uStates` library providing the map outlines and `d3.interpolate` for color encoding. State boundaries are drawn as paths, and the tooltip appears dynamically near the cursor.

Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart displays the proportional breakdown of COVID-19 transmission types, including travel-related, close contact, community transmission, and under investigation, across five defined geographic regions. The visualization uses a circular grid with five concentric levels, where each axis represents a transmission category and the filled area shows the aggregated values. Built with D3.js v3, it employs the `d3.scale.linear` for radius mapping and `d3.scale.ordinal` for color assignment, rendering as an SVG with animated glow effects. The chart reads from a static dataset of transmission percentages and displays the data as a single smoothed polygon.

Loading thumbnail…

San Antonio Zipcode with Most Covid19 Cases

This example visualizes the number of COVID-19 cases across ten countries, showing the United States with the highest value. It renders a donut chart using D3 v4’s `d3.pie` and `d3.arc` with an SVG canvas. Each slice displays a tooltip on hover, showing the country name and case count, while the legend identifies colors via `d3.scaleOrdinal` and `d3.schemeCategory10`.

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst diagram displays the hierarchical flare dataset with zoomable partitions. Built with D3 v5, it uses d3.partition and d3.hierarchy to compute angular layout, with d3.arc rendering SVG paths. Clicking a slice zooms into that subtree via transition.attrTween, interpolating arc geometry and adjusting fill-opacity and label visibility. Labels rotate using SVG transforms, and the color scale uses d3.scaleOrdinal.

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical flare dataset, showing nested categories as concentric arcs. Clicking a node smoothly zooms to focus on that subtree, with animated transitions of arc sizes and label positions. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths, while `d3.interpolate` and `transition.attrTween` animate the morphing geometry and opacity changes during navigation.

Loading thumbnail…

Orthographical World Map

This example shows an interactive orthographic projection of the world map, where each country is rendered as an orange SVG path with black borders and darkens on hover. The visualization uses D3 v5’s `geoOrthographic` projection with `geoPath` to draw country boundaries, and TopoJSON’s `feature` method to extract geometries from the world-atlas 110m dataset. Country names are joined from an accompanying TSV file and displayed via SVG `<title>` tooltips.

Loading thumbnail…

Orthographican you World Map

This example shows an orthographic world map where each country is rendered as a clickable, hover-responsive SVG path. The visualization uses D3’s `geoOrthographic` projection and `geoPath` to draw country boundaries from TopoJSON data, with country names loaded from a TSV file using `d3.tsv`. Data is combined via `Promise.all` and merged using a lookup object keyed by country ID. Hovering turns a country black, and each path includes a `<title>` element to display the country name as a tooltip.

Loading thumbnail…

Orthographican you World Map

This example shows an orthographic world map where each country is rendered as a clickable, hover-responsive SVG path. The visualization uses D3’s `geoOrthographic` projection and `geoPath` to draw country boundaries from TopoJSON data, with country names loaded from a TSV file using `d3.tsv`. Data is combined via `Promise.all` and merged using a lookup object keyed by country ID. Hovering turns a country black, and each path includes a `<title>` element to display the country name as a tooltip.

Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map highlighting countries in light green on a blue sphere, with a red hover effect on individual countries and zoom-and-pan interaction. It uses D3 v5 with d3.geoNaturalEarth1 projection, d3.geoPath, and d3.zoom to enable the viewport transformations. Country boundaries come from the World Atlas TopoJSON dataset, while country names are matched via the accompanying TSV file. The map renders as SVG, with hover tooltips provided by native `<title>` elements.

Loading thumbnail…

Night Temperature in San Antonio

This example shows nightly low temperatures in San Antonio over a week in April 2020. A smooth maroon line connects time-stamped data points, with gray gridlines and labeled axes for time and temperature. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis`. Data is loaded from a CSV file and rendered as an SVG, with axes and labels styled via CSS.

Loading thumbnail…

Night Temperature in San Antonio

This example shows nightly low temperatures in San Antonio over a week in April 2020. A smooth maroon line connects time-stamped data points, with gray gridlines and labeled axes for time and temperature. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis`. Data is loaded from a CSV file and rendered as an SVG, with axes and labels styled via CSS.

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn using D3.js v5 with SVG shapes, including a yellow circle for the head, eyes, eyebrows, and a mouth created with the `arc` generator. The eyebrows animate upward and back down over four seconds using chained `transition` and `attr` methods. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups, and positioning elements via translation transforms. All coordinates and dimensions are computed from the SVG's width and height attributes.

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn using D3.js v5 with SVG shapes, including a yellow circle for the head, eyes, eyebrows, and a mouth created with the `arc` generator. The eyebrows animate upward and back down over four seconds using chained `transition` and `attr` methods. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups, and positioning elements via translation transforms. All coordinates and dimensions are computed from the SVG's width and height attributes.

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn using D3.js v5 with SVG shapes, including a yellow circle for the head, eyes, eyebrows, and a mouth created with the `arc` generator. The eyebrows animate upward and back down over four seconds using chained `transition` and `attr` methods. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups, and positioning elements via translation transforms. All coordinates and dimensions are computed from the SVG's width and height attributes.

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates data joins with D3 v5, using an ordinal scale to assign colors and radii to apples and lemons rendered as SVG circles. As the underlying array changes over time—removing fruits, replacing one apple with a lemon, and filtering another—the visualization updates through enter, update, and exit selections. The `fruitBowl` module applies `scaleOrdinal` for both color and size, while `selection.merge` and `selection.exit` manage the transitions.

Loading thumbnail…

Let's make a face with D3.js!

This example shows a cheerful yellow face built entirely with D3.js v5 in a React framework, rendered as animated SVG. The code uses `select` to target the SVG, `circle` elements for the eyes and face, `rect` elements for eyebrows, and a `path` generated with the `arc()` API for the mouth. The eyebrows animate via chained `transition().duration(2000)` calls, moving up and down over four seconds. The face is centered using a `g` transform, and no external data is used—only hardcoded dimensions and coordinates.

Loading thumbnail…

Firefly Map of Coronavirus Case Locations

A dark map shows each location with confirmed coronavirus cases as of March 5, 2020, using a glow effect reminiscent of fireflies. The visualization plots all case locations, regardless of case count, using a shared sprite style. Built with React and OpenLayers, it loads a Stamen toner-lite basemap and creates a radial-gradient canvas sprite for each point via `generateSprite`. Data comes from the Johns Hopkins CSSE COVID-19 time-series repository, filtered to include only locations with positive counts.

Loading thumbnail…

Circle on the Map

This example visualizes population projections through 2030 using animated circles over a Natural Earth map projection. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render country boundaries, while d3.scaleSqrt maps population values to circle radii. Through d3 transitions, circles continuously animate their size across multiple years, with color coding distinguishing countries that have population data from those lacking it. A size legend and color legend provide reference for interpreting the animated population estimates.