Chinzorigt Ganbat

@dschinzo·14 public vizzes

World Map

This example displays an interactive world map using a natural Earth projection, with countries rendered as filled paths that highlight red on hover. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, joining country names via ISO codes. It uses d3.geoPath with geoNaturalEarth1 for projection, d3.zoom for pan and zoom interactions, and TopoJSON’s feature method to convert topology to GeoJSON. The SVG sphere appears blue, while countries are light green with black strokes.

Sep 19, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, rendering continents as light green polygons on a blue sphere. It uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas package via `d3.json`. The code also draws a background sphere path and applies stroke styling to country boundaries. All visual elements are rendered as SVG in a single 960×500 viewport.

Sep 19, 2020

Loading thumbnail…

Bowl of Fruit - Hover to select

A bowl of fruit rendered as circles animates through a sequence of changes: fruits disappear, and one apple transitions into a lemon. Hovering over any fruit selects it, displaying a black outline until the mouse moves away. The example uses d3-selection with data joins and transitions to animate circle radii and positions, while d3-scaleOrdinal maps fruit types to colors and sizes. The application state manages a selected fruit ID and triggers re-renders through a custom `fruitBowl` function.

Sep 19, 2020

Loading thumbnail…

Bowl of fruit - Animated Transitions

A bowl of fruit demonstrates animated transitions as apples and lemons are added, removed, or swapped over time. The SVG visualization uses D3’s data join and `merge` pattern to update circle and text elements, with `scaleOrdinal` mapping fruit types to colors and radii. A React starter is referenced, though the visible code runs d3.v6 directly.

Sep 19, 2020

Loading thumbnail…

Bowl of fruit

A bowl of fruit depicts five apples as circles, which are eaten, replaced by a lemon, and otherwise removed over time, with each change animated via a one-second transition. The visualization uses D3 v6 with data joins and merge to update SVG circle elements, while ordinal scales map fruit types to colors and radii. The React framework wraps this D3 code, with SVG rendering driven by timed state changes.

Sep 18, 2020

Loading thumbnail…

Area Chart of APU stock volume historically

This area chart displays the daily trading volume of APU stock from January to September 2020, with filled maroon area under the curve to emphasize volume fluctuations. The y-axis uses abbreviated tick labels (e.g., "100k") via D3’s `format` function, while the x-axis shows months using `timeFormat`. The visualization is rendered as SVG using D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft`. Data comes from the `apu.csv` file, which provides date, value, and volume columns.

Sep 18, 2020

Loading thumbnail…

Line Chart of APU closed price historically

This line chart shows the historical closing price of APU stock across 2019 and 2020, with a line path emphasizing price fluctuations over time. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` to render an SVG path. Data is loaded from a CSV file containing date, value, and volume columns. The chart includes labeled axes for date and value, with a title and grid lines generated by the axis functions.

Sep 18, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set, with each car represented by a semi-transparent red circle. The visualization uses D3 version 5 to load CSV data, scale linearly with `d3.scaleLinear`, and render axes with `d3.axisLeft` and `d3.axisBottom`. SVG elements are positioned via data-bound circles, while axis labels and a title are appended as text. The axes use tick lines to create a grid, and all styling is handled through external CSS.

Sep 18, 2020

Loading thumbnail…

Barchart of Stock yields

This bar chart displays the stock yields on the Macedonian Stock Exchange in 2020, comparing the dividend-to-book-value ratio across companies. The data is loaded from a CSV file and sorted in descending order. Using D3 v6, the visualization employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and `axisLeft` and `axisBottom` to render the axes, with the yield formatted as a percentage. The chart is rendered as SVG with steel-blue bars.

Sep 18, 2020

Loading thumbnail…

Scatterplot of Stock yields

A scatterplot displays stock yields for 13 companies on the MSE in 2020, calculating each yield as dividend divided by book value and sorting companies in descending order. Circles are positioned using d3.scaleLinear for the x-axis and d3.scalePoint for the categorical y-axis, with axes rendered via d3.axisBottom and d3.axisLeft. The code loads data from a CSV file with d3.csv and uses SVG rendering with d3.v6.

Sep 18, 2020

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of dividend values for seven companies, with company names on the y-axis and a linear scale for the dividend amounts on the x-axis. The chart uses `d3.csv` to load the data, `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisLeft` and `axisBottom` to render the axes. Bars are drawn as SVG `rect` elements with `fill: steelblue`, using `csv` loading and a margin-based layout with an inner plotting area.

Sep 18, 2020

Loading thumbnail…

Make a face with D3.js

A yellow face built from SVG primitives sits centered in the canvas, with two circles for eyes, two rectangles as eyebrows, and a path-based mouth using `D3.arc`. The eyebrows animate upward and then back down over two seconds using D3’s `.transition().duration()` API, creating a subtle, repeated motion. The code imports `select` and `arc` from D3 v6 within a React framework, and renders entirely through SVG elements positioned via transforms.

Sep 17, 2020

Loading thumbnail…

SVG shapes

This example demonstrates basic SVG shape rendering in a React visualization, showing circles, rectangles, lines, and a path. The shapes appear in three groups, with the first two displaying default and explicit fill colors, while the third uses a combined fill and stroke style. The line and path elements use a CSS class to apply black strokes with rounded joins. The SVG is scaled by 1.5 and uses inline transformation attributes like `translate` to position groups, with rendering handled directly through SVG markup rather than a charting library.

Sep 17, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based car report generator. It displays a list of vehicles under a specified price, showing their year, make, model, and cost. The code uses JavaScript modules, promises, and array methods like `filter` and `map`. A `setTimeout` simulates asynchronous data loading before the report is rendered into the HTML page.

Sep 17, 2020