O

OhayouKaminari

@OhayouKaminari·22 public vizzes

Loading thumbnail…

World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion. It shows the parent-child relationships from the "World" root down to individual nations, with text labels positioned along the branches. The data comes from a JSON file containing the geographic hierarchy. The implementation uses D3 v5 with a custom tree layout and horizontal link generator to position nodes and draw connecting paths. Interactive zooming is enabled through D3's zoom utility, which applies a transform to the SVG group element. Text styling uses the Playfair Display font with a white shadow to improve legibility over the connecting paths.

Loading thumbnail…

BlankCanvas

BlankCanvas fills the browser viewport with a single rounded rectangle, using the full window dimensions captured from `document.body.clientWidth` and `document.body.clientHeight`. The example demonstrates a minimal SVG setup where D3 v5 selects the `<svg>` element and appends a `<rect>` with a 40-pixel corner radius. The rectangle remains static, illustrating basic attribute assignment and responsive sizing without interaction or data binding. Styles in CSS keep the page fixed and hide overflow, ensuring the shape always matches the visible area.

Loading thumbnail…

Zoomable World Map

This example presents an interactive world map with natural Earth projection, rendered as SVG paths. Users can zoom and pan via d3.zoom, with the `event.transform` applied to the map group. Country boundaries are drawn using d3.geoPath from TopoJSON data loaded from world-atlas, shaded light green with dark blue oceans. Hovering highlights countries in red, and each country includes a tooltip title populated from TSV metadata with country names.

Loading thumbnail…

d3.js learning

This example demonstrates a stacked bar chart built with D3.js, visualizing changes in fruit production (apples, oranges, and pears) over multiple years. The chart uses D3’s `d3.layout.stack` to create the stacked series, `d3.scale.ordinal` for the x-axis, and `d3.svg.axis` for the axes. Hovering over a bar segment reveals a tooltip displaying the exact value. The chart is rendered as SVG, with a legend identifying each fruit series and colors assigned to each category.

Loading thumbnail…

Parallel Coordinates

This parallel coordinates chart compares countries across multiple demographic dimensions, including happiness, environmental concern, and membership in groups like religious or professional organizations. Grey background lines show all data for context, while blue foreground lines can be filtered by brushing along an axis, which hides unrelated countries. Built with d3.v3, it uses d3.svg.brush and d3.svg.axis to support interactive dimension dragging and brushing. Data comes from the local total4.csv file, with most values normalized to a 0–100 scale.

Loading thumbnail…

Test

This example visualizes survey data on happiness and organizational participation across countries, with each country represented as a colored region on a world map. The visualization shows how varying levels of happiness ("very" or "quite") correlate with activity in different organizations (art, environment, unions, politics, etc.), though it currently only loads and logs the data without rendering the map. The code uses d3.csv to parse the dataset and converts all numeric strings to numbers, while the SVG map is prepared with dark blue sphere and light green country paths that turn red on hover. The implementation relies on d3.v5, React, and TopoJSON (loaded but unused in this snippet).

Loading thumbnail…

Let'smakeamap

This example displays a world map using the Natural Earth projection, with countries filled in light green against a dark blue sphere. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `d3.json` and converts them with `topojson.feature`. The SVG paths are generated using `d3.geoPath` and `d3.geoNaturalEarth1`, with styling applied through CSS classes for the sphere and individual countries.

Loading thumbnail…

Hey there, fruity hovery selecty!

A fruit bowl of five apples and one lemon demonstrates interactive selection and dynamic data updates with animated transitions. D3.js binds circles to fruit data, using ordinal scales for color and radius, while mouseover and mouseout events set a selected fruit ID that triggers a stroke highlight. The `fruitBowl` function manages enter, update, and exit selections, animating circle radii and positions over 1000 milliseconds as fruits are removed or type-changed.

Loading thumbnail…

Hey there, fruity clicky selecty!

Five apples animate into a row, then one disappears, another transforms into a lemon, and clicking any fruit highlights it with a black outline. The example uses D3 v5’s data join with `enter`, `merge`, and `exit` selections, ordinal color and radius scales, and `transition().duration()` for smooth circle resizing and repositioning. The `fruitBowl` function handles click events via an `onClick` callback, while `setTimeout` triggers array mutations to demonstrate live updates.

Loading thumbnail…

Hey there, fruity nesty!

A fruit bowl holds five apples rendered as SVG circles, which shrink as apples are eaten and transform one apple into a lemon over time. The example uses d3-v5 with `scaleOrdinal` for color and radius mapping, and demonstrates data joins via `selection.merge` and exit/remove patterns. State changes trigger re-renders through `fruitBowl`, showing how nested groups animate position and size for each fruit type.

Loading thumbnail…

Hey there, fruity!

Five apples appear as red circles in an SVG bowl, then shift through a sequence of updates: one disappears, another turns yellow and shrinks into a lemon, and a third is removed. The D3 data join uses `selection.enter`, `merge`, and `exit` with inline transitions, while `scaleOrdinal` maps fruit types to colors and radii.

Loading thumbnail…

World Population Area Chart

This area chart displays world population growth over time, using a smooth, filled curve to emphasize the overall trend. The visualization is rendered as an SVG using D3 v5, with an area generator that applies a basis curve to create the smooth shape. The axes are configured using `scaleTime` and `scaleLinear`, with formatted tick labels that abbreviate large numbers. Data is loaded from a CSV file containing population figures by year, and the chart includes labeled axes and a title.

Loading thumbnail…

Temperature in San Francisco Area Chart

A temperature area chart for San Francisco displays a week of readings as a smooth maroon-filled curve, with time on the x-axis and degrees on the y-axis, clearly labeled and gridded. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `area` with `curveBasis` to generate the SVG path. Data is loaded from a CSV via `csv()`, and axes are rendered with `axisBottom` and `axisLeft`. The code includes custom styling for ticks, labels, and the title.

Loading thumbnail…

Temperature in San Francisco Line Chart

This example shows a week of temperature measurements in San Francisco as a smooth line chart, plotted over time on the x-axis and temperature on the y-axis. The SVG rendering uses D3 v5's `scaleTime`, `scaleLinear`, `line`, and `curveBasis` to construct the path, with axes and labels generated by `axisBottom` and `axisLeft`. Data comes from a CSV file loaded via `csv()` from D3, and styled with CSS classes for ticks, grid lines, and the maroon line.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

A scatter plot displays temperature readings over the course of a week in San Francisco, with time on the x-axis and temperature on the y-axis, using circles to mark each data point. The visualization uses D3 v5 to scale the time and linear axes, render grid lines via axis ticks, and apply SVG circle elements. Data arrives from a CSV file hosted on VizHub, parsed with D3’s `csv` function, then drawn with axis labels and a title using the `axisLeft` and `axisBottom` APIs.

Loading thumbnail…

Cars Scatter Plot

This example visualizes the relationship between horsepower and weight for cars from the Auto MPG dataset, sourced from the UCI Machine Learning Repository. Each car is represented as a semi-transparent red circle, with axes labeled accordingly. The implementation uses D3.v5, employing `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the plot. The data is loaded from a CSV file, parsed, and rendered as an SVG, with grid lines, axis labels, and a title styled via CSS.

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries, with each circle’s horizontal position representing population and vertical position listing the country name. The visualization uses d3.csv to load population data from a local CSV file, then d3.scaleLinear and d3.scalePoint for axes, with d3.axisBottom and d3.axisLeft rendering grid lines and labels. Circle radii are fixed at 18 pixels, and the population axis uses a custom tick formatter that converts values to abbreviated billions. The chart is rendered as SVG with steelblue circles, with margins and axis labels styled via CSS.

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with axes customized to improve readability. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population and country names, while `axisBottom` and `axisLeft` generate the axes. The x-axis tick labels are reformatted from scientific notation (e.g., “1.4G”) to a clearer “B” suffix using D3’s `format` with string replacement, and grid lines extend across the plot area. The y-axis labels and domain line are removed, and data comes from a local CSV file loaded via `d3.csv`.

Loading thumbnail…

Making a Bar Chart

The chart displays population figures for ten countries as horizontal bars, sorted from most to least populous. It initializes SVG dimensions, then maps population values to a linear x-scale and country names to a band y-scale. Using d3.csv, it loads data from data.csv, converts population numbers by multiplying by 1000, and renders rectangles with attributes derived from those scales. Axes are added via d3.axisLeft and d3.axisBottom, with bars styled steelblue through CSS.

Loading thumbnail…

Let'smakeaface

This example draws a simple, animated face using D3.js v5. A yellow circle serves as the head, with eyes, eyebrows, and a mouth composed of SVG shapes. The code uses `d3.select` and `d3.arc` to construct the facial features, and it animates the eyebrows by chaining `transition().duration()` calls to move the eyebrow group vertically. The face is centered using SVG attribute retrieval and a `transform` translation.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and paths—rendered as scalable vector graphics. The SVG markup uses presentation attributes like `fill` and `stroke` alongside CSS rules in a separate `styles.css` file, where the `.lines` class assigns stroke properties to the polyline and path elements. Styling is applied both directly on elements and through CSS selectors, showing how SVG attributes and stylesheet rules coexist for visual customization. The graphics are scaled by a factor of 1.5 via a transform, with shapes stacked using translations for layered composition.

Loading thumbnail…

HTML Cars Report

This example demonstrates a basic HTML-based cars report listing three vehicles with their model years and prices. The page relies on plain HTML elements—a heading and an unordered list—styled with CSS. The stylesheet sets a monospace font at a large size, while the `.highlighted` class applies red text to the first list item. No JavaScript libraries or data-loading mechanisms are used; the content is hardcoded directly in the markup. The example serves as a minimal illustration of static data display within VizHub’s environment.