K

KarkG

@KarkG·40 public vizzes

Loading thumbnail…

Sankey Diagram

This interactive Sankey diagram visualizes Canadian defense budget allocations, showing how funds flow from high-level cost categories into specific military programs and assets. Built with D3 v4 and the d3-sankey plugin, the visualization renders nodes and links as SVG paths with animated transitions. Users can click nodes to edit input/output ratios and adjust budget contributions dynamically, while a color legend filters the diagram by military branch. The code uses d3.zoom for panning and scaling, d3.ordinal scales for color mapping, and transitions to animate layout changes.

Loading thumbnail…

Force Directed Graph

This interactive visualization shows a force-directed graph of defense programs, with colored nodes representing committee groups and links showing dependencies between them. It uses `d3.forceSimulation` to position nodes, with `scaleSqrt` encoding budget values as node radius. Users can add, delete, or edit nodes and links through HTML form inputs, with options to filter groups via color legend buttons. The SVG rendering updates live as the simulation restarts after each data modification.

Loading thumbnail…

Gunz N' Roses Moving Points

This interactive scatterplot, titled "Gunz N' Roses Moving Points," visualizes time-series data for three categories—"gunz," "roses," and "chocolate"—across seven days in January 2020. Each category is represented by a colored circle that can be dragged along the y-axis to manipulate its value, with a semi-transparent line connecting the points for each item. The visualization uses D3 v5 with an SVG rendering and animation, employing `d3.drag` for the draggable points, `d3.scaleBand` and `d3.scaleLinear` for axes, and a custom `colorLegend` function for interactive filtering.

Loading thumbnail…

Gunz N' Roses Moving Bars

This example visualizes a grouped bar chart for "Gunz N' Roses," showing daily quantities of guns and roses over seven days, with each item assigned a distinct color via d3.scaleOrdinal. Users can hover over a bar to highlight it and display divergence values for other bars relative to the selected one, using an SVG line as a reference. Bars are draggable vertically via d3.drag, which updates their height and triggers a re-render of the chart with adjusted y-scale limits. The visualization uses d3.scaleBand for grouping, d3.scaleLinear for the y-axis, and animated transitions during interactions.

Loading thumbnail…

Let's make a face with D3.js!

This D3.js v4 example builds an interactive Sankey diagram from a JSON dataset, displaying energy flows between nodes with weighted links that animate between equal and value-based link thicknesses. The visualization uses `d3.sankey` for the layout, `d3.scaleOrdinal` with `schemeCategory20` for node colors, and transitions to smoothly update link paths and node positions every 2.4 seconds. A text label toggles to indicate the current weighting mode, while node labels scale in size according to their corresponding values using a linear font scale.

Loading thumbnail…

Sankey Diagram

A Sankey diagram visualizes the flow of values between five nodes, with links of varying thickness representing the magnitude of each connection. The diagram is rendered as an SVG using D3.js v4 and the `sankey` layout function from the D3 graph gallery library. Node and link data is loaded from a JSON file, and the visualization uses `scaleOrdinal` and `schemeCategory10` for color mapping, with a color legend generated by the custom `colorLegend` function.

Loading thumbnail…

Force Directed Graph

A force-directed graph maps 44 military programs as nodes, colored by their branch (e.g., JOINT, RCAF) and linked by dependency levels (1–3) encoded with a pastel color scale. Dragging a node restarts the simulation, and clicking a legend entry filters nodes and links by category. Built with d3.forceSimulation and forceLink, the SVG renders circles, labels, and draggable interactions, loading JSON data from `data.json`.

Loading thumbnail…

Force Directed Graph

A force-directed graph displays character relationships from Les Misérables, with nodes colored by group affiliation and labeled with character names. The visualization uses d3.forceSimulation to position nodes and links, while a secondary label simulation keeps text labels readable. Hovering highlights a node's immediate neighbors by adjusting opacity. The SVG rendering includes zoom and drag interactions, and the data comes from the bundled data.json file.

Loading thumbnail…

Force Directed Graph

This example shows a force-directed graph of military equipment programs, with nodes colored by military branch and links representing dependencies between programs. Hovering highlights connected nodes and labels, while dragging lets users rearrange the layout. The visualization uses `d3.forceSimulation` for both graph and label positioning, `d3.zoom` for panning and scaling, and `d3.drag` for node interaction. Data comes from a local JSON file, rendered with SVG elements including circles, lines, and text labels.

Loading thumbnail…

Gunz N' Roses Moving Bars

This interactive force-directed network diagram visualizes the dependencies between 44 Canadian military procurement programs. Nodes are colored by program category (e.g., JOINT, RCAF, CA, RNC, IM, IE, MAT), and links are colored by dependency level. Using `d3.forceSimulation`, nodes repel and link to each other, while a force-based label layout positions text labels. Users can drag nodes, zoom, and hover to highlight connected elements. The data comes from a JSON file, and the visualization uses D3 v5 with SVG rendering.

Loading thumbnail…

Gunz N' Roses Moving Bars

This visualization shows a force-directed network of countries connected by links, rendered as pink lines and orange circles with yellow strokes. Using d3.forceSimulation with a many-body charge and center force, the nodes and links update their positions on each tick event. The data comes from a JSON file listing country nodes and their connections, displayed in an SVG canvas with a fixed width and height.

Loading thumbnail…

Gunz N' Roses Moving Bars

This interactive bar chart visualizes one week of "gunz" and "roses" values per day, with bars animated via draggable handles. Users click and drag the handles to modify data values, which dynamically updates bar heights and text labels. The visualization uses D3 v5 with SVG elements, including `scaleBand`, `scaleLinear`, `drag()`, and `mouse()`, and includes a color legend with `scaleOrdinal`. Data is loaded from a local JSON file, and the chart updates its y-axis limits as users interact.

Loading thumbnail…

Gunz N' Roses Moving Points

A D3.js animation visualizes seven days of gunz and roses values as moving points across a band chart, with each item’s daily total tracked by colored circles connected by a line. The scatterplot-style rendering uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` to position points by date and item, while `d3.drag` enables interactive dragging and animation updates the y-axis domain dynamically. Data comes from the GunzNRosesData.json file.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for multiple cities worldwide, with each city represented by a colored line and a categorical legend. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group data by city. Data comes from Data Canvas - Sense Your City, rendered as SVG with a color legend built from d3.scaleOrdinal and schemeCategory10. The chart includes gridlines from axis ticks and a title.

Loading thumbnail…

Gunz N' Roses Moving Bars

The visualization animates a moving bar chart comparing the population of religious groups across several countries. It displays the population data as horizontal bars, with colors representing each religion, and enables interactive hover to highlight any bar while showing the divergence of other bars from its value. Built with D3 v5, it uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` for positioning and color, with `d3.drag` for allowing users to drag bars and observe the data. The visualization renders as SVG, and information about religious demographics comes from the provided JSON file.

Loading thumbnail…

Gunz N' Roses

This interactive visualization compares daily values for two items, “gunz” and “roses,” over a week using grouped bar charts. Each bar’s height reflects its value, with the y-axis dynamically rescaling as users drag any bar up or down. Hovering over a bar highlights it, hides value labels, and displays dashed lines showing the divergence of other bars from the selected one. Built with D3 v5, it uses `d3.scaleBand`, `d3.scaleLinear`, `d3.drag`, and SVG transitions. The data is loaded from a local JSON file with dates and item values.

Loading thumbnail…

Gunz N' Roses 2

This interactive bar chart displays one week of temperature data for cities worldwide, sourced from the Data Canvas - Sense Your City project. Using d3.v5, the visualization renders grouped bars with SVG and animation, where each bar’s height reflects temperature values. Users can hover over bars to see value divergences, and drag the blue handles to dynamically adjust the values, which updates the corresponding bar heights in real time. The chart employs d3.scaleBand, d3.scaleLinear, and d3.drag to enable these interactions.

Loading thumbnail…

Line Chart with Multiple Lines

This example shows one week of temperature data from cities worldwide, visualized as a bar chart with multiple colored series per date using d3.scaleBand and d3.scaleOrdinal with schemeCategory10. Each bar corresponds to a city’s temperature reading, with hover interactions that highlight selected bars and dim others. The data is loaded as CSV from a GitHub gist and parsed with d3.csv, while custom color legends and axis labels are built using d3.axisLeft, d3.axisBottom, and d3.drag for interactive bar adjustments. Rendering uses SVG with transitions for hover effects.

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON. It shows a blue sphere representing the Earth and draws country boundaries in light green with black strokes. The map uses the Natural Earth projection and data from the World Atlas TopoJSON dataset. The code leverages d3.geoPath, d3.geoNaturalEarth1, and the topojson feature function to convert geographic data into SVG paths.

Loading thumbnail…

Melting Data for Multiple Lines

Animated bar chart of historical and projected world population from 1950 to 2100, based on UN estimates. The chart displays bars for multiple regions, with a horizontal line marking the selected region’s population; hovering over a bar highlights it, dims others, and reveals percentage differences relative to the selected region. Built with D3 v5 using `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.select` for SVG rendering. Data is melted from two CSV files via a custom `melt` function, loading UN population estimates and medium variant projections.

Loading thumbnail…

Customizing axes

This bar chart shows the populations of the top 10 most populous countries, using a horizontal layout with population on the x-axis and country names on the y-axis. The example demonstrates customizing axes by removing default tick lines, adding a custom tick format that converts G to B, and including custom axis labels. Built with D3 v4, it uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft to render the SVG visualization from a CSV data file.

Loading thumbnail…

Melting Data and Selecting a Year for Multiple Lines

This visualization shows world population projections for different development regions from 1950 to 2100, with selectable time points. A vertical line marks the currently chosen year, and hovering over the chart updates it, redrawing the multi-line display. The code uses D3 v5 for data binding, scales, axes, and the line generator, with `nest()` to group data by region and `scaleOrdinal` for color assignment. Data comes from the UCI Machine Learning Repository's Auto MPG dataset, which is melted from wide to long format using custom parsing logic.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings from multiple cities, using color to distinguish each city's time series. The visualization is rendered as an SVG using D3 v5, with a time-based x-axis and linear temperature scale. The code applies a basis curve to smooth the lines, nests the data by city, and includes a categorical color legend. Data is loaded from a CSV of global temperature measurements.

Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays temperature data for San Francisco over time, rendered as a red area chart using SVG. The data originates from a CSV file containing temperatures from different cities, which is loaded and parsed with d3.csv. The code imports d3 v5 modules such as scaleTime, scaleLinear, axisBottom, axisLeft, and area with curveBasis to construct the chart. Axes, tick marks, and labels are customized through d3’s axis generators, while the area path is generated using the area() API.

Loading thumbnail…

Circles on a Map

This example visualizes global population data on an interactive world map, with circular markers sized proportionally to each country’s 2018 population via a square-root scale. Hovering over a country reveals its exact population in a tooltip. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic projection and rendering, while d3.zoom enables pan and zoom. Circles are positioned using d3.geoCentroid, and data merges CSV population figures with TopoJSON world boundaries using topojson.feature, with legends built through custom colorLegend and sizeLegend modules.

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree diagram rendered as SVG. It uses a D3.js v5 tree layout to position nodes and links, with the `d3.hierarchy` and `d3.linkHorizontal` modules generating the tree paths. The data is loaded from `data.json`, and the visualization supports mouse-wheel zooming via d3's zoom transform, applying it to a group element. Text labels show country names with a font size that decreases with tree depth.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays relationships between numerical attributes of cars from the UCI Auto MPG dataset. Two dropdown menus let viewers select which columns appear on the x- and y-axes, with each selection triggering a smooth 2-second transition animation that moves the red semi-transparent circles to their new positions. The visualization uses D3 v5 with SVG rendering, including `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().duration().delay()` to update axes and points dynamically.

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map visualizes world economies by color-coding countries according to their economic classification. Users can click legend categories to filter the map, highlighting matching countries while dimming others; clicking again resets the filter. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering, while d3.scaleOrdinal with d3.schemeSpectral supplies the color scale. Data comes from the world-atlas dataset, loaded via d3.tsv and topojson.feature.

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their economy type, using a spectral color scale assigned through d3.scaleOrdinal. The map is drawn with d3.geoPath and the Natural Earth projection, while data is loaded asynchronously from World Atlas TSV and TopoJSON files. Hovering highlights countries in red, and a custom legend displays the color categories. The visualization supports zooming via d3.zoom, with zoom state handled through event transforms.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as a colored sphere with light-green countries outlined in black, using an SVG canvas. The code builds the visualization with D3 v5 and TopoJSON, fetching geographic data from the world-atlas package. It applies a natural Earth projection via `d3.geoNaturalEarth1`, generates paths with `d3.geoPath`, and converts TopoJSON topology to GeoJSON features using the `feature` function. The sphere itself is drawn as a single path with a blue fill, while country boundaries use a thin stroke.

Loading thumbnail…

Color and Size Legends

This example demonstrates two methods for building interactive legends in D3.js v5: a categorical color legend and a quantitative size legend. The color legend uses `scaleOrdinal` to map fruit names to distinct colors, while the size legend uses `scaleSqrt` to map a numeric range to circle radii. Both legends are rendered as SVG groups with circles and text labels, positioned via `translate` transforms. The reusable legend functions (`colorLegend` and `sizeLegend`) accept configuration objects specifying spacing, circle radius, and tick counts, allowing flexible customization within a single SVG canvas.

Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical organization of world countries by continent and region, displayed as a horizontal tree layout. The tree is built from a JSON data file that groups countries into subregions like Southern Asia and Western Asia, with all labels rendered in the Playfair Display typeface. It uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` generators to compute the layout and draw curved links, while the `zoom` behavior enables panning and scaling of the entire SVG viewport. Text size decreases with each level of depth.

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive orthographic world map built with D3.js, where hovering over any country highlights it in red and displays its name as a tooltip. The map renders as SVG using `d3.geoPath` and `d3.geoOrthographic` for the projection, with country boundaries drawn from TopoJSON data loaded from the world-atlas dataset. The visualization also supports zooming and panning through `d3.zoom`. Country names are matched to geometries using ISO numeric codes from a TSV file.

Loading thumbnail…

Bowl of Fruit Hover to Select

Five circles represent fruit in a bowl, initially all apples. Hovering over a circle selects it, shown by a thick black outline. The selection triggers a function to update the view. The code uses a custom `fruitBowl` function with `selectAll`, data joins for enter/update/exit, and animated transitions for radius and x-position. Over time, an apple is removed, another apple changes into a lemon, and a second apple is removed, demonstrating dynamic updates to a D3.js visualization.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a simple animated smiley face using D3.js. It shows a yellow circle with eyes, eyebrows, and a mouth, all constructed through fundamental DOM manipulation. The code uses `d3.select` to target the SVG element, `d3.append` to create shapes, and a chained `d3.transition` sequence to animate the eyebrows moving up and down over two-second intervals. The mouth is drawn as an arc using `d3.arc` with specified inner and outer radii. The rendering is SVG-based, with all elements positioned relative to the center of the canvas.

Loading thumbnail…

Bowl of Fruit

This example shows a static bowl of fruit as five red circles arranged horizontally across an SVG canvas. It demonstrates fundamental DOM manipulation with D3.js by binding an array of fruit objects to circle elements, appending them on enter, and removing them on exit when the array shrinks. The code uses D3 v5’s `select`, `range`, `data`, `enter`, `exit`, and `remove` methods to update the visualization, with the final pop operation removing the last apple from the display.

Loading thumbnail…

Temperature in SF Line Chart

This example visualizes a week of temperature measurements in San Francisco as a smooth, maroon area chart. Time runs along the x-axis and temperature along the y-axis, with grid lines and clearly labeled axes. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map data, d3.area with a curveBasis generator to create the filled shape, and d3.axisBottom and d3.axisLeft for ticks. Data is loaded via d3.csv from a remote dataset, with timestamps parsed as dates.

Loading thumbnail…

Let's make a face with D3.js

This example shows a simple yellow smiley face built entirely with SVG shapes, with eyebrows that animate up and down to give the face a surprised expression. The code uses D3.js v4 selection methods to create circles for the face, eyes, and pupils, rectangles for the eyebrows, and a D3 arc generator to draw the mouth path. Transitions animate the eyebrow group’s transform attribute over two seconds, creating a repeated up-and-down motion. The face is centered using an SVG group translation based on the viewport dimensions.

Loading thumbnail…

Cars Report

This example demonstrates asynchronous data loading and text-based report generation in a React application. It displays a loading message while fetching car data via a simulated `getCars()` promise that resolves after two seconds, then renders a formatted list of cars under a specified price threshold. The `generateReport()` function filters cars by price, formats each entry using `formatCar()`, and displays the resulting multi-line string in an HTML `<pre>` element. The code illustrates Promise-based flow control and modular JavaScript ES6 imports within a browser environment.

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of used cars, filtered by price and formatted as a readable list. It begins with a "Loading..." message while the data loads. The code uses the React starter framework, though the core logic relies on JavaScript promises from `getCars` and string manipulation via `formatCar` and `generateReport`. The data is embedded as JSON and parsed with `JSON.parse`, then rendered into the DOM via `textContent`.