Skip to main content
Log in
P

Pioustu

@Pioustu·15 public vizzes

Loading thumbnail…

Fork of Cities on a Globe

This interactive visualization presents a rotatable orthographic globe populated with circles representing cities of over 100,000 inhabitants, sized by population. Users can drag to rotate the globe and zoom, with low-resolution country boundaries shown during movement and higher-resolution shapes when stopped. The code uses d3.geoOrthographic, d3.geoPath, and d3.drag, with TopoJSON world atlas data for countries and a preprocessed Geonames dataset for cities. Hovering over a circle reveals a tooltip via d3-tip, displaying the city name and population.

Dec 3, 2022
Loading thumbnail…

Fork of Old Faithful Contour Plot

This interactive contour plot visualizes the Old Faithful dataset, showing the density of eruption and waiting times through colored bands. The visualization displays contours rendered as filled SVG paths using `d3.geoPath`, with colors mapped from a sequential greens scale. Users adjust the density bandwidth by moving their mouse across the plot, which triggers a re-render of the contour data via `d3.contourDensity` and `d3.select` event handling. Axes and labels are drawn using `d3.axisBottom` and `d3.axisLeft`, and the density estimate uses a Gaussian kernel with a bandwidth that ranges from 0 to 40 pixels as the mouse moves horizontally.

Nov 25, 2022
Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes temperature measurements in San Francisco over a three-day period, with a smooth curve showing fluctuations from lows near 16°C to highs around 26°C. The visualization uses D3.js v5 with an SVG rendering approach, employing `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` with `curveBasis` to generate the filled path. The chart includes labeled axes for time and temperature, grid lines, and a title, with data loaded from a local CSV file containing hourly timestamp-temperature pairs.

Nov 25, 2022
Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by economy category using a spectral ordinal scale, with a legend rendered as circles and text. Built with D3 v5, it loads world geometry from TopoJSON and country metadata from TSV, then projects paths via `d3.geoNaturalEarth1` and `d3.geoPath`. Map panning and zooming use `d3.zoom`, while hover effects highlight countries in red. The legend is created by a custom `colorLegend` module that binds to color scale domains and updates in place.

Nov 1, 2022
Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes the relationship between time and temperature in San Francisco, with each circle representing a data point sampled over time. The chart uses D3 v5 to load CSV data from a remote URL, parse timestamps, and render an SVG with axes and circles. It employs `scaleTime` and `scaleLinear` for positioning, along with `axisBottom` and `axisLeft` for the axes. The visualization includes labeled axes, grid lines, and a title, with styling applied via CSS.

Sep 21, 2022
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays temperature measurements from San Francisco over time, using a smooth curve to connect data points across the hourly timestamp series. The x-axis represents time with a bottom-oriented scale, while the y-axis indicates temperature values, formatted through `d3.scaleTime` and `d3.scaleLinear`. Built with D3 v5, the visualization uses `d3.line` with `curveBasis` for smoothing, and renders axis labels and gridlines via `d3.axisBottom`, `d3.axisLeft`, and custom SVG text elements. The chart loads temperature data from a CSV file and encodes it entirely through SVG paths and tick marks.

Sep 17, 2022
Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth from 1950 to 2015, with the x-axis showing years and the y-axis showing population in billions. The area under the curve is filled with steelblue using d3.area and curveBasis for smoothing. Axes are rendered with d3.axisLeft and d3.axisBottom, featuring rotated labels and tick formatting that abbreviates large numbers. Data is loaded from a CSV file using d3.csv, with years parsed as dates and populations as numbers, then scaled with d3.scaleTime and d3.scaleLinear.

Jun 3, 2022
Loading thumbnail…

Eating apples Tags

Color-coded circles represent fruits in a static SVG bowl, with steelblue apples and an orange lemon positioned along a row. The example demonstrates a data join pattern, updating the visualization when fruits are removed or one apple changes to a lemon. Using d3 v5, it employs `scaleOrdinal` for color and radius mappings, and selection methods like `merge` and `exit` to handle dynamic data changes. The fruits are generated in code, not from an external dataset.

Jun 1, 2022
Loading thumbnail…

Eating apples

Five apples sit in a bowl, drawn as steelblue circles in an SVG. A sequence of timed updates removes apples, and one apple changes into an orange lemon, with each change animated over one second using D3 v5 transitions and data joins. The code imports `scaleOrdinal` for color and radius mappings, and the `fruitsBowl` function uses `selection.enter` and `exit` to add, update, and remove circles based on array modifications driven by `setTimeout`.

Jun 1, 2022
Loading thumbnail…

Hello Smile

A yellow circle with a black border forms a smiling face, complete with two black eyes and a curved mouth drawn as an arc. The visualization uses D3 v5 to construct the SVG elements, with the face centered by translating a group to the middle of the viewport. The eyes are positioned using fixed offsets, while the mouth is generated with the `d3.arc` shape generator, defining inner and outer radii and angular extents to create the smile’s curve.

Jun 1, 2022
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between a car's fuel efficiency (mpg) and its horsepower using data from the auto-mpg.csv dataset. The plot uses circles to represent individual car models, with the x-axis showing mpg and the y-axis showing horsepower. The visualization is built with D3 v5, using `scaleLinear` for both axes, `axisLeft` and `axisBottom` for the axes, and `select` to target the SVG element. The data is loaded via `csv` and processed before rendering.

May 29, 2022
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the ten most populous countries, with populations scaled in thousands from a CSV file. The chart uses D3 v5 to build linear and band scales and axis generators, then customizes the axes by removing domain lines and default grid lines, adding a rotated x-axis label, and formatting tick labels to abbreviate large numbers (e.g., "1.42B"). The SVG rendering includes a title and styled tick marks, axis labels, and bars in steel blue.

May 29, 2022
Loading thumbnail…

Make a Bar Chart

This bar chart displays the population of ten countries, from China’s 1.4 billion to Mexico’s 131 million, using horizontal bars scaled linearly. The visualization uses D3 v5 with `d3.csv`, `scaleLinear`, and `scaleBand` to map data to SVG rectangles, axes via `axisLeft` and `axisBottom`, and imported styling from CSS.

May 29, 2022
Loading thumbnail…

HTML CSS SVG

This example demonstrates how to draw basic SVG shapes—circle, rectangle, line, and path—within an HTML page, using CSS for styling. The SVG element is scaled and includes nested groups, with the inner group translated and filled with steel blue. JavaScript is not used; only the markup and stylesheet are presented. The CSS applies default margins, hides page overflow, and styles the path with a green stroke while the highlighted class is defined but unused.

May 27, 2022
Loading thumbnail…

Cars Report

This example shows a text-based report of car listings filtered by price. It demonstrates asynchronous data loading and ES6 module imports in VizHub. The code uses `getCars()` to return a promise that resolves after two seconds, then applies `generateReport` with a filter and formatting via `formatCar`. D3 is loaded from UNPKG, and local modules handle data parsing and report generation. The output renders as a plain text message in an HTML element.

May 27, 2022