Skip to main content
Log in
O

optimizeresume

@optimizeresume·16 public vizzes

Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart compares three smartphone brands—iPhone, Samsung, and Nokia—across eight attributes like battery life, brand, and price. The code builds an SVG radar chart with circular grid levels, radial axes, and glow-filtered data polygons using D3 v3, with rounded strokes for a smooth appearance. A legend and tooltip are included, and the chart uses ordinal color scaling to differentiate each brand.

Jan 20, 2021
Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed radar chart compares the attributes of three smartphone brands—iPhone, Samsung, and Nokia—across eight dimensions such as battery life, brand, and price. Each brand is represented as a colored, closed polygon, with axes radiating from the center and concentric grid circles indicating value levels. The visualization uses D3.js version 3 to render SVG elements, including paths for the data blobs, circles for the grid, and text labels, with an applied glow filter for visual enhancement. Numerical values are displayed as percentages, and the chart is drawn using the `RadarChart` function originally designed by Nadieh Bremer.

Jan 20, 2021
Loading thumbnail…

Interactive Filtering on a Choropleth Map

A choropleth map of global economies uses color to represent each country’s economic group, with a clickable color legend enabling interactive filtering by dimming non-selected categories. Users can zoom and pan the geoNaturalEarth1 projection via d3.zoom, while d3.geoPath renders country boundaries from TopoJSON data enriched with World Atlas TSV attributes. The legend updates opacity through D3’s data-join and event handling, using schemeSpectral for the color scale.

Jan 17, 2021
Loading thumbnail…

Choropleth Map

This choropleth map visualizes countries colored by income group using a natural Earth projection. It loads world geometry from TopoJSON and joins it with TSV metadata via d3.json and d3.tsv, then renders paths with d3.geoPath. A d3.scaleOrdinal with a schemeSpectral range assigns colors, and an interactive legend built with d3-selection shows the categorical scale. The map supports zooming through d3.zoom and highlights countries on hover via CSS.

Jan 15, 2021
Loading thumbnail…

Color and Size Legends

This example demonstrates how to create reusable color and size legends in D3 v5. It uses two custom functions, `colorLegend` and `sizeLegend`, to render ordinal color scales and square-root size scales as SVG groups. The color legend maps fruit categories to distinct fills, while the size legend displays tick values with proportional circle radii. Both legends use D3’s selection joins and scale APIs (`scaleOrdinal`, `scaleSqrt`) to update efficiently.

Jan 15, 2021
Loading thumbnail…

Choropleth Map

This choropleth map displays world countries in green with a dark blue ocean sphere, highlighting each country in red on hover. Using D3 v5 and TopoJSON, it loads world-atlas data (50m resolution) to generate SVG paths via `d3.geoPath` with a `geoNaturalEarth1` projection, matching ISO country IDs to names from a TSV table. The map supports zoom and pan interactions through `d3.zoom`.

Jan 14, 2021
Loading thumbnail…

Fork of Cheap Tricks for Interraction

This example displays an interactive world map where each country is rendered as a green, stroked SVG path and highlighted in red on hover. The map uses a natural Earth projection and loads country boundaries and ISO ID-to-name mappings from the world-atlas package. It implements scroll-wheel zooming via d3.zoom, with the zoom transform applied to a group element. The visualization demonstrates the d3.geoPath generator, TopoJSON feature extraction, and event-driven hover styling through CSS.

Jan 14, 2021
Loading thumbnail…

Building a Tree Visualization

This visualization displays a hierarchical tree of world regions and countries, branching from a central root through continents and subregions to individual nations. The layout uses a left-to-right tree structure with horizontal connector lines, rendered as SVG paths. The code builds the hierarchy with `d3.hierarchy`, computes positions with `d3.tree`, and draws curved links using `linkHorizontal`. Text labels are positioned at each node with font sizes decreasing by depth, and a `d3.zoom` handler enables panning and scaling of the entire diagram. The data comes from the embedded `data.json` file.

Jan 13, 2021
Loading thumbnail…

Create a blank canvas

This example creates a full-screen, blank SVG canvas that fills the browser viewport. The code uses D3 v5’s `select` to target the SVG element, then reads the document’s `clientWidth` and `clientHeight` to set the SVG’s dimensions and append a solid rectangle covering the entire area. The underlying `styles.css` fixes the body to the viewport edges with zero margins, ensuring a seamless, borderless display. No data is loaded or manipulated; the visualization simply demonstrates a minimal setup for a fresh drawing surface.

Jan 12, 2021
Loading thumbnail…

Cheap Tricks for Interraction

A world map displays country outlines as light green paths with black strokes against a dark blue sphere. Hovering over any country turns it red, providing immediate visual feedback. The visualization uses D3.js v5 with the geoNaturalEarth1 projection and geoPath to render geographic features, while topojson processes the GeoJSON data. The dataset comes from the world-atlas package, loaded via JSON and TSV files that map ISO codes to country names.

Jan 12, 2021
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map with countries filled in light green against a dark blue ocean sphere, projected using the Natural Earth projection. The visualization is built with D3.js v5, using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate country boundaries from the world-atlas TopoJSON dataset. The `topojson.feature` library processes geographic features, and SVG paths render each country. The map is presented within an empty SVG canvas, with the sphere and country paths styled via CSS classes.

Jan 11, 2021
Loading thumbnail…

Fork of Bowl of Fruit - Samir

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are added, removed, and replaced over time. The view updates through a sequence of timed state changes, with each fruit rendered as an SVG circle and labeled text. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, and the `fruitBowl` function manages enter, update, and exit selections. Data is a simple array of fruit objects, manipulated through `setTimeout` calls to trigger re-renders.

Jan 10, 2021
Loading thumbnail…

Radar Analysis Test

This radar chart compares three smartphone brands—Apple, Samsung, and Nokia—across eight consumer preference axes such as Battery Life, Brand, and Price of Device. A dark-themed SVG rendering uses d3.lineRadial with curveLinearClosed to draw five concentric level lines, while d3.scaleOrdinal assigns distinct colors to each brand’s filled polygon. Axis lines and labels are generated from the dataset, with animated opacity and dot markers highlighting each brand’s value profile.

Jan 9, 2021
Loading thumbnail…

Making a Bar Chart with D3.js and SVG

This example shows the top 10 most populous countries using horizontal bars, with country names on the y-axis and population figures on the x-axis. It renders to an SVG canvas using D3.js v5 and loads its dataset from a CSV file containing population values. The code uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate the axes. Bar height comes from the band scale's `bandwidth()`, while a `d3.format` helper abbreviates large population numbers.

Jan 9, 2021
Loading thumbnail…

Let's make a face with D3.js

A yellow D3.js face with a black stroke, eyes, and a mouth is drawn in SVG and animates its rectangular eyebrows up and down over two-second transitions. The code uses `select` and `arc` from D3 v5, setting circle radii and positions, and applies chained `transition().duration()` calls to move the eyebrow group. The face is centered in a 960×500 SVG, with the mouth rendered as a donut-like arc path.

Jan 8, 2021
Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of car listings, filtering entries by price and formatting each match into a readable line. It shows how VizHub projects can load D3 via UNPKG and use ES6 module imports to organize code. The data is embedded as JSON and fetched asynchronously with a custom `getCars()` promise, while `generateReport()` applies a price filter and `formatCar` transforms each car object into a string. The output is displayed in a `<pre>` element, with a loading message shown until the data arrives.

Jan 7, 2021