Skip to main content
Log in
H

hxc20060903

@hxc20060903·10 public vizzes

Loading thumbnail…

Temperature of Multiple Cities

This visualization displays temperature trends across multiple cities over time, with each city represented by a distinct colored line. The data comes from a CSV file and is rendered using D3 v5, employing `scaleTime` and `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and a line generator with `curveBasis`. A custom color legend, positioned on the right, maps city names to their line colors via `colorLegend` function. The chart includes gridlines, axis titles, and a main title, all rendered as SVG elements with CSS styling for typography and line appearance.

Jan 30, 2021
Loading thumbnail…

Population worldmap

This worldmap visualization displays global population estimates for 2018, overlaying semi-transparent circles on each country’s centroid, sized by population using a square-root scale. The map supports zooming and panning, with a color legend and size legend for reference. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map projection, `geoCentroid` for circle placement, and `zoom` for interactivity. Population data comes from a UN CSV dataset, merged with country geometries from a TopoJSON world atlas.

Jan 4, 2021
Loading thumbnail…

Interactive Scatter Plot

This interactive scatter plot visualizes relationships between attributes of automobiles from a 1970s–80s dataset, with dropdown menus letting users choose which numeric columns map to the x and y axes. Circles transition from the center outward via `transition().duration()` as data updates. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while SVG circles render points with opacity and hover highlighting.

Jan 3, 2021
Loading thumbnail…

worldmap2

This example shows a choropleth map of the world colored by each country’s economy type, with an interactive legend that filters highlighted countries. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render country features from TopoJSON data loaded via d3.json and d3.tsv. Users can click legend items to toggle selection, and d3.zoom enables panning and zooming on the SVG map.

Jan 1, 2021
Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and region, as an interactive tree diagram. The data is nested from the global level down to individual nations. Using D3.js v5, the code applies the `tree` layout to compute node positions and renders SVG links with `linkHorizontal` paths. The chart supports zooming via `d3.zoom`, and country names appear as text labels with font sizes decreasing by depth.

Dec 31, 2020
Loading thumbnail…

worldmap

This example displays an interactive world map with countries rendered as individual SVG paths, colored light green with black outlines, and highlighted in red on hover. It uses D3 v5's `geoNaturalEarth1` projection with `geoPath` to draw the map, and a light blue sphere for the oceans. Country boundaries come from the `world-atlas` package's countries-50m GeoJSON data, and the `topojson-client` library converts TopoJSON to GeoJSON for feature extraction. The chart supports zooming via D3's `zoom` event, which updates the SVG group transform in real-time.

Dec 31, 2020
Loading thumbnail…

bowl of fruits

Five pieces of fruit update over time in a bowl, with apples changing size and color and one replaced by a lemon. The visualization uses D3 v5 with SVG and animation via `transition()`. A `scaleOrdinal` maps fruit types to radii and colors, while `data(fruits, i => i.id)` keys elements for enter, update, and exit states. A grey rounded rectangle renders the bowl, and `setTimeout` triggers sequential data changes.

Dec 31, 2020
Loading thumbnail…

Hello VizHub

This visualization displays the temperature in San Francisco over time with an area chart, where the filled curve represents temperature changes and dots mark individual data points. The code uses d3.scaleTime and d3.scaleLinear to map the time and temperature axes, d3.axisBottom and d3.axisLeft for the tick marks, and d3.area with a basis curve to draw the filled region. Data is loaded from a remote CSV file, and the chart is rendered as an SVG with circles for each observation and styled axis lines.

Dec 31, 2020
Loading thumbnail…

Hello VizHub

A yellow smiley face rendered in SVG demonstrates basic D3 shapes and transitions. The code uses d3.select and d3.arc from D3 v5 to draw the head, eyes, eyebrows, and mouth, with d3.transition animating the eyebrows downward and back upward. The SVG canvas is 960 by 480 pixels, and all elements are positioned programmatically via translation transforms. A static dataset is not present; instead, hardcoded dimensions and angles define the geometry.

Dec 21, 2020
Loading thumbnail…

Hello VizHub

A yellow smiley face rendered in SVG demonstrates basic D3 shapes and transitions. The code uses d3.select and d3.arc from D3 v5 to draw the head, eyes, eyebrows, and mouth, with d3.transition animating the eyebrows downward and back upward. The SVG canvas is 960 by 480 pixels, and all elements are positioned programmatically via translation transforms. A static dataset is not present; instead, hardcoded dimensions and angles define the geometry.

Dec 20, 2020