J

Joker-tr

@Joker-tr·54 public vizzes

Loading thumbnail…

Hello VizHub

This example demonstrates two text blocks positioned side by side using CSS floating and overflow properties. The first block is floated left with a fixed width, while the second block uses `overflow: hidden` to prevent wrapping beneath it. The layout is defined in an external `styles.css` file, with borders on each element and the wrapper to visualize their dimensions. The HTML structure contains two divs with static Stack Overflow content, and no JavaScript or data visualization libraries are involved.

Loading thumbnail…

Fishbone Layout

This example demonstrates a fishbone (Ishikawa) cause-and-effect diagram, with the root cause "Incorrect Deliveries" branching into four major categories and their sub-causes. It uses the GoJS library with the `FishboneLayout` extension and custom `FishboneLink` templates to position nodes and draw angled connectors. The diagram is read-only, with node text and font styling bound directly to structured JSON data.

Loading thumbnail…

Untitled

A radial dendrogram displays a hierarchy of car-related terms, with "cars" at the center and ten categories—including "owned," "traded," and specific models like "325ci"—arranged as leaf nodes. D3’s `d3.stratify()` builds the hierarchy from the CSV-like data, while `d3.cluster()` computes the radial layout. The code draws SVG paths using `d3.linkRadial()` and renders circles and labels via `d3.pointRadial()`, with the root node emphasized by a larger radius.

Loading thumbnail…

Hello VizHub

This example visualizes the rise and fall of technological expectations over time, plotting a line chart of closing values against yearly dates. Circle markers highlight each data point, while red text labels annotate the phase of the hype cycle, such as "Technology Trigger" and "Trough of Disillusionment." The chart uses d3.scaleTime and d3.scaleLinear to map data to SVG coordinates, with d3.line and d3.curveMonotoneX generating the smoothed path. Axes are rendered via d3.axisBottom and d3.axisLeft, and date parsing relies on d3.timeParse.

Loading thumbnail…

Hello VizHub

A static value chain diagram classifies business activities into two categories: supporting and primary. Rows and columns of colored rectangles are labeled with activity names. D3 v5 builds the SVG with `data` joins and appended `rect` and `text` elements. A triangle symbol marks the margin between the two groups. A custom `wrap` function uses `getComputedTextLength` to break long labels across multiple `tspan` lines.

Loading thumbnail…

Hello VizHub

This example displays a single-line chart of five categorical attributes—Price, Meals, Lounges, Seating Choices, and Speed—with numeric values between 0 and 1, rendered inside a fixed-size container. The code uses AnyChart’s `anychart.line()` and `chart.line()` API to create and plot the series, while loading D3 v5 from a CDN but not using it for drawing. The data is provided as a static array within the `data2.node2` object, and the chart is drawn into the specified `#container` div. The visualization demonstrates a basic line-series layout without axes or interactive features.

Loading thumbnail…

Untitled

Users answer two yes/no questions about a task's importance and urgency using the noYesBtns custom reusable component, which wraps D3 button creation and a click dispatch. Based on the combined boolean state, D3 transitions change the opacity of one of four Eisenhower matrix items from 0.1 to a highlighted value. Both questions default to a neutral background, and the answer buttons update their own background color when selected.

Loading thumbnail…

Hello VizHub

A scatterplot maps the popularity of seven JavaScript frameworks, plotting years in use against GitHub stars, with circle size representing fork counts. The visualization is divided into four quadrants by reference lines, labeling categories like "In Fashion" and "Rock Stars." Built with D3 v5 and React, the code uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and SVG elements rendered via `d3.select` and data joins. Static HTML, CSS, and a pre-bundled JavaScript file load the chart.

Loading thumbnail…

Fault Tree

This interactive fault tree diagram uses GoJS 2.1.2 to display a hierarchical reliability structure, with each non-root node shaped as an AND gate, OR gate, circle, or triangle based on its fault condition. The TreeLayout arranges nodes vertically at 30-pixel layer spacing, while the sample data loads from an embedded JSON model. Nodes use gradient fills via a figure converter, and orthogonal links with 20-pixel curviness connect parent and child elements. The diagram supports tree dragging, undo/redo, and saving the modified model back to JSON.

Loading thumbnail…

Rounded Groups With a Header and a Footer

This example shows a tree diagram where nodes are grouped into containers, each with a header, a body, and a footer. The container’s header and footer use custom GoJS shapes, `RoundedTopRectangle` and `RoundedBottomRectangle`, from the `RoundedRectangles` extension, while the body holds child nodes via a `Placeholder`. Node templates similarly combine these shapes to display role-based coloring and optional loop indicators using `BpmnActivityLoop`. The diagram uses `go.TreeLayout` for automatic positioning, and links are drawn with orthogonal routing and triangular arrowheads. Data is provided as a static JSON-like array of nodes and groups.

Loading thumbnail…

Org Chart Editor

This org chart editor displays a hierarchical tree of employee nodes with color-coded depth levels, supporting interactive editing of names, titles, and comments. Users can create or delete nodes, change relationships through draggable links, and edit properties via the inspector panel. The visualization uses the GoJS diagramming library, with a custom TreeLayout arrangement and a modified commitNodes function to apply linear gradient strokes based on tree depth. The code includes undo/redo management and clears boss information when nodes or links are removed.

Loading thumbnail…

Page Flow

Page Flow is a workflow diagram that visualizes navigation paths between web pages, distinguishing source pages, desired events, and undesired outcomes with color-coded nodes. Built with the GoJS diagramming library, it supports editable node labels, a layered digraph layout, and an undo manager. Users can click an adornment button to add new connected nodes, and the diagram zooms via mouse wheel events, following forward-only linking rules.

Loading thumbnail…

Untitled

A bubble chart displays countries as circles positioned by GDP per capita (x-axis) and life expectancy (y-axis), with circle size encoding population. Each bubble is colored by continent, drawn as SVG circles using `d3.forceSimulation` with custom forces for positioning. The code loads data from a JSON array and uses `d3-scale-chromatic` for categorical color mapping. Hovering a bubble changes its stroke from white to black via CSS.

Loading thumbnail…

Untitled

A parallel coordinates plot displays two data records across five categorical axes—Style, Intelligence, Focus, Magic, and Gender—with values scaled linearly from 1 to 10. Solid and dashed polylines represent each row, distinguishing the two series. Built with D3 v4, it uses `d3.scaleLinear` for y-axes, `d3.scalePoint` for x-axis positioning, and `d3.axisLeft` for rendering. SVG paths are generated via `d3.line`, with a custom legend annotating “Achieved Performance” and “Requirement.” Data loads from a CSV file containing two numeric rows.

Loading thumbnail…

Untitled

This visualization plots demand and supply curves as red and blue monotone lines against price and quantity axes, using a small CSV dataset. The chart displays the inverse relationship between demand and supply, with labels positioned at the end of each curve. Built with D3 v5, the code uses `d3.csv` to load data, `d3.scaleLinear` for both axes, and `d3.line` with `d3.curveMonotoneX` to generate the SVG paths. Axis labels and curve annotations are added manually via SVG text elements.

Loading thumbnail…

Hello VizHub

A force-field analysis diagram visualizes drivers for and against an organizational change, displayed as aqua and yellow rectangles on opposite sides of a central plan label. The chart reads supporting factors from a hardcoded JavaScript array and renders them as SVG elements using D3 v5, with dashed connector lines between corresponding opposing forces. Text labels accompany each rectangle, and the layout adjusts spacing based on the maximum column length.

Loading thumbnail…

Interactive Force Directed Layout

This interactive example uses the GoJS library’s `ForceDirectedLayout` to create a continuously updating network diagram. Users can push and pull nodes, with selected nodes remaining fixed while others respond to simulated spring and electrical forces. The layout is invalidated during dragging, and the network is cached for efficiency, updating only when structural changes occur. Data is rendered as labeled circular nodes connected by directed links with arrowheads and gradient-backed text labels.

Loading thumbnail…

Concept Map

A concept map diagram visualizes the relationships between concepts and ideas, using labeled links to show connections such as "represent" and "is necessary for." The graph arranges nodes automatically with the go.js `ForceDirectedLayout`, using its spring and electrical charge physics to space concepts evenly. Nodes are rendered as gradient-filled rectangles with bold text labels, while links feature arrowheads and Radial-brush label backgrounds for readability. The data comes from a static `GraphLinksModel` containing node and link arrays, demonstrating a hierarchical knowledge structure with crosslinks between segments.

Loading thumbnail…

PERT chart

This PERT chart visualizes task dependencies and bottlenecks in a project schedule. Each node displays early start, length, early finish, late start, slack, and late finish times, with critical tasks highlighted in pink and non-critical tasks in blue. Links connecting critical nodes are also colored pink to emphasize the critical path. The example uses GoJS Diagram, LayeredDigraphLayout, and custom binding converters to dynamically compute node and link colors based on the critical property in the data.

Loading thumbnail…

Untitled

This chart displays the critical path through a small project network using a PERT diagram. Six tasks, labeled A through BC, are shown as nodes with their durations, while arrows indicate dependencies between tasks. The AnyChart PERT API (`anychart.pert`) renders the layout, with the chart title "cpm Critical Path" and data supplied as a table. It visualizes which sequence of tasks determines the overall project timeline based on the provided durations and dependency links.

Loading thumbnail…

Gantt Chart

This Gantt chart visualizes project tasks, including development, coding, promotion, and celebration phases, as horizontal bars positioned along a linear time scale. The chart uses D3 v5 to parse dates with `d3.timeParse`, scale time with `d3.scaleTime`, and render colored rectangles within an SVG container. Task categories are distinguished by a gradient color scale using `d3.scaleLinear` with HCL interpolation. Hovering over a task reveals a tooltip with its name and duration details, while the grid and labels are also generated with D3.

Loading thumbnail…

Layer Bands using a Background Part

This example demonstrates a tree diagram that arranges connected nodes into distinct horizontal bands, each representing a stage in an airport process flow from entry to departure. Using the GoJS library with a custom BandedTreeLayout, the visualization overlays colored background panels and rotated labels onto the diagram’s Background layer to highlight each layer’s range. The layout’s commitLayers method updates the band positions and sizes dynamically, with data binding managing the panel bounds and visibility.

Loading thumbnail…

Untitled

Five vertical strands of connected name-labeled nodes branch across the SVG canvas, with each strand colored distinctly. The visualization renders family or group relationships from a CSV file, where each row represents a generation and each column a lineage. Users can drag individual nodes or labels to reposition them, which dynamically updates the connecting Catmull-Rom curves via d3.line and curveCatmullRom. The implementation uses D3 v5 with SVG elements, custom drag handlers, and a manual data parsing loop from the loaded CSV.

Loading thumbnail…

Untitled

This interactive tree diagram visualizes a decision tree for classifying Iris flowers based on petal measurements. It shows hierarchical split rules and resulting class distributions at leaf nodes. The visualization uses D3.js v4 with SVG rendering and animated transitions, implementing a collapsible tree layout where nodes can be clicked to expand or collapse branches. The code employs `d3.hierarchy`, custom transition methods, and a durational animation to smoothly reposition nodes and links when the tree state changes.

Loading thumbnail…

Swim Lanes (vertical)

This vertical swim lane diagram uses GoJS to organize workflow stages into labeled pools and lanes, with lanes that can be collapsed or resized by dragging. A custom `GridLayout` aligns lane lengths, while the `LaneResizingTool` enforces minimum sizes and synchronizes all lanes when one is lengthened. The diagram supports dragging nodes between lanes and relayouts the pools dynamically after any modification.

Loading thumbnail…

Table

This interactive visualization gallery presents a collection of chart types, including bar charts, pie charts, line charts, and scatter plots, all built using D3.js v5. Each chart is rendered as an SVG element and can be selected from a dropdown menu, with the underlying data displayed in a preview table. The example uses various D3 APIs such as `d3.scaleBand`, `d3.axisBottom`, and `d3.pie` to create the visualizations, with some charts featuring animation and tooltip interactions. Data is loaded from a CSV file and processed by the dashboard module.

Loading thumbnail…

Timeline

A stretchable timeline visualization using GoJS v3 displays a horizontal bar with tick marks and date labels, along with event nodes positioned above it. Users can resize the bar by dragging its right handle, which dynamically updates the tick and label intervals. The code implements a custom `TimelineLayout` and `BarLink` (not shown) to connect event nodes to the timeline, using graduated shape features for ticks and `graduatedFunction` for date formatting. Event data includes Persian-language meeting titles with corresponding dates in 2016.

Loading thumbnail…

System Dynamics

This example shows an interactive system dynamics editor for creating and editing stock-and-flow diagrams. Users can switch between pointer, node, and link modes to add stocks, clouds, variables, valves, and flows, with editable labels and adjustable link curves. The implementation uses GoJS Diagram, LinkingTool, ClickCreatingTool, and the NodeLabelDraggingTool extension, all rendered on an HTML canvas with animation disabled. The interface highlights mode-specific toolbar buttons and tracks node creation counts to generate unique identifiers.

Loading thumbnail…

Hello VizHub

This example shows a concentric ring visualization of market segmentation data, progressing from total population inward to target market. Each circle is labeled with its category, with font sizes decreasing for inner rings. The code uses d3 v5 to bind an array of text objects, rendering SVG circles with d3.scaleOrdinal and a sequential orange color scheme. Text elements are positioned using the same radius calculations, while styles.css controls basic layout and typography.

Loading thumbnail…

Untitled

This example displays an interactive map centered on Iran, using Leaflet to render tile layers and enable zooming and panning. It shows how to switch between three different OpenStreetMap base layer styles—standard, Hot, and OSM French—via a control menu. The map initializes at coordinates [33, 54] with a zoom level of 5, and each tile layer loads raster imagery from the respective OpenStreetMap tile servers. The code explicitly defines tile layer objects and adds them to a layer control, allowing users to toggle the visual style of the basemap.

Loading thumbnail…

PERIODIC TABLE

This interactive periodic table maps common data visualization types onto a grid of colored circles, each labeled with a two-letter abbreviation. Users can hover to see the full chart name, click to log it to the console, and press to temporarily change the fill. Built with D3 v5, it uses SVG rendering, CSV data loading via `d3.csv`, and mouse event handlers for tooltips and interaction.

Loading thumbnail…

Untitled

A force-directed network diagram visualizes character relationships from Les Misérables, with nodes representing characters and curved links indicating interactions between them. The graph uses d3.forceSimulation with link, charge, and center forces to position elements, while zoom and drag interactions enable exploration. The code loads miserables.json data and renders the network as SVG, assigning colors by group membership and using intermediate nodes to create curved edge paths.

Loading thumbnail…

Untitled

A force-directed bubble chart visualizes a small dataset of 12 items, each with categorical attributes. The visualization initially displays all nodes as colored circles that can be dragged and selected. Buttons allow users to split the bubbles into separate clusters by Location, Group, Class, or Type, with titles indicating the active categories. Using D3 v4, the chart employs `d3.forceSimulation` with `d3.forceCollide`, `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to position the nodes. The SVG circles and text labels are rendered from a CSV file. Users can interactively drag and select individual bubbles to highlight them.

Loading thumbnail…

System Dynamics

This example presents an interactive system dynamics model of a grass-sheep ecosystem using the GoJS diagramming library alongside D3. The visualization distinguishes between stocks (grass, sheep), clouds (external sources/sinks), valves (flow regulators), and variables (weather, wolves) that influence connections. Users can modify the underlying JSON model data, which defines nodes and links—both material flows and causal influences—and redraw the diagram. The interface supports creating new nodes and links via buttons, with custom categorization for flows versus influences, while a label-dragging tool adjusts node annotations.

Loading thumbnail…

Untitled

This example shows an interactive flowchart generator where users input flowchart syntax into a textarea and press a button to render the diagram. The visualization uses the flowchart.js library to parse the text and draw the chart onto an SVG canvas, while D3.js (v5) handles DOM manipulation to create the input interface and dashboard layout. The code defines flow states like "past", "current", and "future" with custom colors and styles, and includes click handlers for subroutines that trigger alerts. It integrates Raphael for SVG rendering, jQuery for event handling, and custom CSS for end-element styling.

Loading thumbnail…

Untitled

This example is an interactive flowchart editor that renders diagrams from text-based descriptions. Users input flowchart syntax into a text area, and the flowchart.js library parses and draws the result onto an SVG canvas. The code demonstrates custom styling options, including colored start and end nodes, conditional branches, and parallel tasks. It integrates D3.js for DOM manipulation to build the interface elements, while Raphael and jQuery handle the flowchart rendering and click interactions on subroutines.

Loading thumbnail…

Scatter Plot with Menus

This interactive example presents a system dynamics diagram using the GoJS library, letting users add stocks, clouds, variables, and valves to model material flows. The interface offers modal creation tools: users click buttons to switch between pointer, node, and link modes for building flow and influence connections. The diagram supports saving and loading models as JSON via the `GraphLinksModel`, with custom templates built in `buildTemplates()`. Node and link styling is handled through GoJS’s `GraphObject.make`, and the `NodeLabelDraggingTool` extension enables label repositioning through mouse move tools.

Loading thumbnail…

SpectrogramJS

This interactive spectrogram visualizes audio frequencies in real time, displaying a scrolling heatmap of sound data across time. The project uses the Web Audio API to analyze audio buffers and D3.js (v5) for rendering the SVG axes and canvas-based spectrogram. Playback controls allow users to load and analyze sound files, with the frequency analysis performed via `AnalyserNode.getByteFrequencyData`. The visualization animates as audio plays, building up the spectrogram view.

Loading thumbnail…

SpectrogramJS

A spectrogram visualization displays the frequency spectrum of an audio file over time, rendered as a scrolling heatmap across a canvas. The example loads a duck sound effect, analyzes it with the Web Audio API’s `AnalyserNode`, and records frequency data during playback. D3.js draws the axes and scale grid as SVG overlays, while the spectrogram’s pixel data is painted onto the canvas. Playback and analysis run via `ScriptProcessorNode` and `requestAnimationFrame`, and the visualization updates in real time until the sound finishes.

Loading thumbnail…

Let's make a face with D3.js!

This visualization displays a choropleth map of Iran, coloring each province based on a selected dataset column. A dropdown menu lets users switch between different attribute values, triggering a white flash transition before the new colors settle. The map uses `d3.geoMercator` and `d3.geoPath` to render GeoJSON boundaries, with `d3.scaleLinear` mapping log-transformed data values to random generated colors. A custom `colorLegend` shows the most and least value range, while `d3.zoom` enables panning and scaling of the SVG output.

Loading thumbnail…

Code Speaking

Typed characters appear in a running transcript alongside their ASCII decimal codes, while a corresponding symbol image fades in for each code. The animation proceeds character by character, with a two-second delay between steps. D3 v5 loads a CSV table that maps ASCII values to image links, and the code also uses `d3.select` to update the text area. User input comes from an HTML form and is processed via a JavaScript loop with `setTimeout` to sequence the transitions.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays fuel efficiency data for cars from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization compares any two selected columns, such as weight or horsepower, through an SVG scatter plot with translucent red circles. Users switch axes via dropdown menus, which trigger a re-render of the plot. The visualization uses d3’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` functions, with circles animating to their new positions via a two-second `transition` with a staggered `delay`.

Loading thumbnail…

H1B Petition with Interactive Legend for Year

This map visualizes H1B petition locations across the United States, with each city represented by a circle colored according to the petition year. An interactive legend on the right allows users to highlight petitions from a specific year, dimming all other circles. The visualization uses React with D3 v5 for map projection via `d3.geoPath` and `geoAlbers`, while `scaleOrdinal` maps years to colors. US state shapes come from the US-Atlas TopoJSON, and the petition data is loaded from a CSV file.

Loading thumbnail…

From Chen Ding: Aggregation by Country using Excel + Dropdowns!

This example visualizes the number of video views for Harvardx/MITx online courses in 2013, with circles sized proportionally to view counts and positioned by geographic coordinates on a world map. A dropdown menu filters the view by specific course, and hovering over a circle reveals the country and total views. The map uses a Mercator projection via D3’s `geoMercator` and `geoPath` for landmasses and graticules, while `scaleSqrt` determines circle sizes. Data is loaded as CSV and TopoJSON, with the view rendered as React-driven SVG elements.

Loading thumbnail…

Final Project: Map of Nuclear Explosions

This map visualization displays the geographic distribution of nuclear explosions, with point size representing explosion magnitude and color indicating the responsible country. Users can hover over points to see specific details like name and coordinates, click points for additional information, and filter by deployment purpose or type. The visualization also includes a brushing-enabled time histogram for temporal filtering. Built with React and D3 v5, it uses `d3.geoPath` with Natural Earth TopoJSON map data, `scaleSqrt` for sizing, `scaleOrdinal` for colors, and `brushX` for the interactive histogram, pulling data from a nuclear explosions CSV dataset.

Loading thumbnail…

Final Project: Map of Nuclear Explosions

This map visualization displays the geographic distribution of nuclear explosions, with point size representing explosion magnitude and color indicating the responsible country. Users can hover over points to see specific details like name and coordinates, click points for additional information, and filter by deployment purpose or type. The visualization also includes a brushing-enabled time histogram for temporal filtering. Built with React and D3 v5, it uses `d3.geoPath` with Natural Earth TopoJSON map data, `scaleSqrt` for sizing, `scaleOrdinal` for colors, and `brushX` for the interactive histogram, pulling data from a nuclear explosions CSV dataset.

Loading thumbnail…

Final Project: Map of Nuclear Explosions

This map visualization displays the geographic distribution of nuclear explosions, with point size representing explosion magnitude and color indicating the responsible country. Users can hover over points to see specific details like name and coordinates, click points for additional information, and filter by deployment purpose or type. The visualization also includes a brushing-enabled time histogram for temporal filtering. Built with React and D3 v5, it uses `d3.geoPath` with Natural Earth TopoJSON map data, `scaleSqrt` for sizing, `scaleOrdinal` for colors, and `brushX` for the interactive histogram, pulling data from a nuclear explosions CSV dataset.

Loading thumbnail…

Final Project: Map of Nuclear Explosions

This map visualization displays the geographic distribution of nuclear explosions, with point size representing explosion magnitude and color indicating the responsible country. Users can hover over points to see specific details like name and coordinates, click points for additional information, and filter by deployment purpose or type. The visualization also includes a brushing-enabled time histogram for temporal filtering. Built with React and D3 v5, it uses `d3.geoPath` with Natural Earth TopoJSON map data, `scaleSqrt` for sizing, `scaleOrdinal` for colors, and `brushX` for the interactive histogram, pulling data from a nuclear explosions CSV dataset.

Loading thumbnail…

Final Project: Map of Nuclear Explosions

This interactive world map visualizes over 2,000 nuclear explosions from the Nuclear Explosions dataset, plotting each event by latitude and longitude using d3.geoPath with a Natural Earth TopoJSON basemap. Point size encodes yield magnitude via d3.scaleSqrt, while color represents the responsible country using d3.scaleOrdinal. Users can filter deployments by purpose and type through dropdown menus, hover over the color legend to isolate countries, and click points to view details. A d3.brushX-enabled histogram below displays yearly event counts, allowing time-range selection that filters the map.

Loading thumbnail…

Final Project: Map of Nuclear Explosions

This map visualization displays the geographic distribution of nuclear explosions, with point size representing explosion magnitude and color indicating the responsible country. Users can hover over points to see specific details like name and coordinates, click points for additional information, and filter by deployment purpose or type. The visualization also includes a brushing-enabled time histogram for temporal filtering. Built with React and D3 v5, it uses `d3.geoPath` with Natural Earth TopoJSON map data, `scaleSqrt` for sizing, `scaleOrdinal` for colors, and `brushX` for the interactive histogram, pulling data from a nuclear explosions CSV dataset.

Loading thumbnail…

Final Project: Map of Nuclear Explosions

This interactive world map visualizes over 2,000 nuclear explosions from the Nuclear Explosions dataset, plotting each event by latitude and longitude using d3.geoPath with a Natural Earth TopoJSON basemap. Point size encodes yield magnitude via d3.scaleSqrt, while color represents the responsible country using d3.scaleOrdinal. Users can filter deployments by purpose and type through dropdown menus, hover over the color legend to isolate countries, and click points to view details. A d3.brushX-enabled histogram below displays yearly event counts, allowing time-range selection that filters the map.

Loading thumbnail…

Final Project: Map of Nuclear Explosions

This map visualizes nuclear explosions worldwide, plotting each deployment by latitude and longitude on a Natural Earth map. The size of each point corresponds to the explosion's yield, while color indicates the responsible country. Users can hover over points to see details, filter by purpose and type via dropdowns, and brush over the accompanying histogram to focus on specific time periods. The visualization uses d3.geoPath and d3.projection for the map, while the histogram uses d3.bin and d3.brushX for temporal filtering.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. Each semi-transparent red circle represents a car, revealing the positive correlation between the two variables. The visualization uses D3 v5’s `scaleLinear` for axes and `axisBottom`/`axisLeft` for tick marks, with grid lines rendered via tick sizing. Data is loaded as CSV via `d3.csv` and mapped to numeric values before being drawn as SVG circles.

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economic classifications, with countries colored via an ordinal spectral scale from World Atlas TopoJSON and TSV data. Hovering a legend item filters the map, dimming non-matching countries to 0.1 opacity and highlighting matches, while clicking toggles the filter. Built with `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.zoom`, and `d3.scaleOrdinal`, the SVG renders country paths and a custom color legend with interactive `onClick` handlers.