Z

zhangfa

@zhangfaholleword·19 public vizzes

Loading thumbnail…

CVOID-19 Data

This interactive choropleth map displays cumulative and current COVID-19 case counts by country, with a toggle between the two metrics and a color-coded legend showing case severity bins. Built with D3.js, it uses `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering country boundaries, and `topojson.feature` for geographic data processing. The map pulls CSV data from a GitHub gist and GeoJSON from andybarefoot’s map data, coloring countries via `d3.scaleOrdinal` with a red sequential scheme. Users click buttons to switch between cumulative and existing (cases minus deaths) patient counts.

Loading thumbnail…

world map

This example shows a choropleth world map colored by each country's economy classification, with a clickable color legend that filters and highlights matching countries while dimming others. The map uses d3.geoNaturalEarth1 and d3.geoPath to render TopoJSON world-atlas data, with d3.zoom enabling pan and zoom interactions. A d3.scaleOrdinal maps the spectral color scheme to the economy categories, and tooltips display country names and values. The SVG rendering includes CSS hover effects and opacity transitions for non-selected regions.

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economic classifications by country, with an interactive color legend that filters the map by hovering or clicking on a category. The d3-scaleOrdinal and schemeSpectral color scale map each economy type to a distinct color, while d3-geoPath and geoNaturalEarth1 render the world geometry from TopoJSON data. Clicking a legend item dims non-matching countries and highlights the selected group, with zoom support via d3.zoom. The map uses SVG and d3.v5 for all rendering and interaction.

Loading thumbnail…

world map

This example displays a world map using an equal-area natural Earth projection, with countries rendered as paths that fill with a soft beige color and turn red on hover. The visualization initially shows a blue sphere backdrop, and users can pan and zoom via mouse interaction. The code loads country boundaries and names from the world-atlas package (50m resolution) and uses `d3.geoPath` with `d3.geoNaturalEarth1` for projection, while `topojson.feature` extracts geometry. Interactivity is handled through `d3.zoom`, which adjusts the SVG group's transform on zoom events, and each country path includes a tooltip title with its name from the TSV data.

Loading thumbnail…

Circles on a Map

This visualization combines a choropleth map with proportional circles to display population data by country. The map uses D3’s geoNaturalEarth1 projection and geoPath, while circles are positioned via pathGenerator.centroid and sized with a square-root scale. Population data from a CSV is joined to TopoJSON world boundaries, and countries missing 2018 data are shaded red. An interactive size legend is rendered using custom D3 components, and zooming is enabled through the event and zoom APIs.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes the unemployment rates of multiple U.S. metropolitan areas over time, with each area represented by a colored line. The chart uses D3.js APIs such as `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `axisBottom`/`axisLeft`, and it renders SVG elements. The data is sourced from a static `data.js` file, and the axis labels are localized in Chinese using `timeFormatLocale`.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays temperature readings from multiple cities over a week, with each city represented by a colored line and a corresponding color legend. The visualization uses d3.csv to load the dataset, d3.nest to group records by city, and d3.line with curveBasis to generate smooth paths. Axes are created with d3.axisBottom and d3.axisLeft, while the ordinal color scale uses d3.schemeCategory10. The chart renders as SVG with grid lines and a simplified custom legend.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes temperature variations in San Francisco over a week, with the x-axis representing dates and the y-axis measuring temperature in degrees Celsius. The chart includes grid lines, axis labels, and a filled area beneath the line to emphasize the temperature trend. Built with D3.js v5, the code uses `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to render the smooth path, while loading data from a CSV file hosted on VizHub. The SVG output is styled with custom CSS, including a maroon fill for the area and tick marks formatted using a localized time format.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays the daily temperature variation in San Francisco over one week, with a smooth curved line connecting data points. The visualization uses D3.js v5 to render an SVG, employing `scaleTime` for the date axis and `scaleLinear` for temperature, with `axisBottom` and `axisLeft` for labeled axes. The data is loaded from a CSV file via `d3.csv`, and the line path is generated using `d3.line` with `curveBasis` for smooth interpolation.

Loading thumbnail…

Color and Size Legends

The example demonstrates two reusable legend components rendered in SVG: a color legend built with `d3.scaleOrdinal` mapping fruit names to categorical colors, and a size legend using `d3.scaleSqrt` for continuous numeric values with circular markers. Both legends are generated through custom functions that bind data to groups, with the color legend encoding categories via circle fill and the size legend varying circle radius. The code relies on D3 v5 selections, `.enter()`, and `.merge()` patterns to update the legends dynamically.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot lets users explore the relationship between pairs of numeric car attributes, choosing axes from dropdown menus built with the `dropdownMenu` function. Rendered as an SVG, the visualization updates via a unidirectional data flow, passing selected options from the menus to the `scatterPlot` component, which uses `scaleLinear`, `axisBottom`, and `axisLeft`. The 1970s–80s auto-mpg dataset is loaded with `d3.csv`. Circles animate from the center to their positions using a `transition`, with a duration and delay per point.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3 by animating a bowl of fruit as apples are eaten and replaced with lemons over time. The code uses `selection.data()`, `enter()`, `merge()`, and `exit()` to handle circles and text labels, with `d3.scaleOrdinal` mapping fruit types to colors and radii. Rendering occurs as SVG within a fixed-width viewport, driven by a simple `render()` function called after each timed mutation to the fruits array. The visualization relies on D3 v5 and vanilla JavaScript to coordinate data joins and smooth transitions.

Loading thumbnail…

Bowl of Fruit

A bowl of fruit shows a row of apples and lemons rendered as colored circles on a rounded rectangle, with each fruit labeled by type. The visualization updates over time as apples are removed or replaced with lemons, demonstrating data joins. Built with D3 v5, it uses `scaleOrdinal` for color and radius mappings, `selectAll` with enter/merge/exit patterns, and SVG groups with `translate` transforms. The rendering is SVG, with the bowl drawn as a `<rect>` and fruit as `<circle>` elements.

Loading thumbnail…

Bowl of Fruit

A bowl of five apples appears as red circles; the animation then shows one apple being removed, a second apple changing into a lemon, and a third apple disappearing, with each fruit’s size and color encoded by its type. The visualization uses d3 scales (`scaleOrdinal`) to map fruit type to color and radius, and d3 transitions to animate circle position and radius over one-second durations. The SVG is rendered in `index.html`, with data mutations triggered by timed `setTimeout` calls in `index.js`.

Loading thumbnail…

make a face

A yellow circle forms a cartoon face with two eyes and a mouth, while the eyebrows animate upward and downward. The example uses D3.js to construct the SVG scene, including a mouth path built with the `arc` function. The animation relies on chained `transition().duration()` calls to move the eyebrow group between two translate positions. The code operates entirely within an SVG canvas and does not reference any external dataset.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes the world population from 1960 to 2015, using a filled area curve to show the trend over time. The visualization is rendered in SVG using D3.js, employing `scaleTime` for the x-axis (years), `scaleLinear` for the y-axis (population), and the `area` generator with `curveBasis` to create the smooth, filled shape. Data is loaded as CSV from a remote URL, and axis labels and titles are styled with CSS.

Loading thumbnail…

scatter plot

This scatter plot displays the relationship between horsepower and weight for cars, using red semi-transparent circles scaled along linear axes. The visualization loads data from a remote CSV file and renders it as an SVG, with D3’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs generating gridlines and tick marks. Axis labels and a title clarify the chart, while margins and redundant axis titles structure the layout. The code imports specific functions from D3 v5 and applies CSS styling for opacity and typography.

Loading thumbnail…

customzing axes

This example visualizes the population of nine countries as horizontal bars, ranked from most to least populous, with a title and axis label. The chart uses D3 v5 with `csv` to load data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and custom tick formatting to abbreviate population numbers with `format('.3s')`, converting “G” to “B”. Axes are configured with `axisBottom` and `axisLeft`, while the grid lines and labels are styled via SVG attributes and CSS. The data is multiplied by 1000 in `forEach` to match actual population figures.

Loading thumbnail…

making a bar chart

This bar chart displays population figures for the nine most populous countries, using horizontal bars sorted by descending value. The visualization uses D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with `axisLeft` and `axisBottom` rendering the labels. Data is loaded via `csv` from a local CSV file, and the SVG is rendered with margin-based layout and steelblue rectangles.