BazarbayevManas

Blank Canvas

This example presents a blank, interactive canvas as an SVG element that fills the entire browser viewport. The visualization consists of a single large rectangle with rounded corners, rendered in a default black color against the white page background. The SVG is sized dynamically to match the dimensions of the browser window using the client dimensions. The code relies on D3 version 5 to select the SVG element and append the rectangle, while CSS positioning ensures the canvas remains fixed to the viewport edges.

Blank Canvas

This example presents a blank, rounded-rectangle canvas that fully fills the browser viewport. It demonstrates a minimal setup for a D3.js visualization using the `d3.select` API to target the SVG element and set its dimensions based on the document's client width and height. The code then appends a single `rect` element with rounded corners (`rx` attribute), whose size matches the viewport. The visualization is rendered as a static SVG using D3 v5, with CSS positioning that fixes the body to the screen edges and hides overflow.

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with countries filled in light green and a blue sphere representing the globe. The map uses the Natural Earth dataset from the world-atlas package, loaded as TopoJSON and converted into geographic features via the `topojson` library. The code projects these features using D3’s `geoNaturalEarth1` projection and draws them with `geoPath`. The sphere background is created by passing a `{ type: 'Sphere' }` object to the same path generator, and styling is applied via CSS classes.

Let's make a face with D3.js!

A yellow circle with black facial features is drawn as a smiling face using D3.js v5. The code builds the face from SVG elements—a circle for the head, two circles for eyes, and an arc path for the mouth—positioned within a centered group. The eyebrows are animated with chained `transition().duration()` calls, shifting them downward and upward repeatedly. It uses `select` and `arc` from the d3 module on a static SVG canvas.

Bowl of Fruit - Click to Select

This example shows a dynamic bowl of fruit where clicking a circle selects it, highlighting it with a black stroke. The visualization uses D3 v5's selection API and ordinal scales to map fruit types to colors and radii, with SVG circles entering through a zero-radius transition and exiting by shrinking. The code demonstrates animated data updates, including removing a fruit, changing an apple to a lemon, and filtering the array, all with 1000-millisecond transitions. The implementation uses `scaleOrdinal`, `selection.selectAll`, and `transition().duration()` to manage the stateful rendering.

Bowl of Fruit - Click to Select

Bowl of Fruit - General Update Pattern

Animated SVG demonstrates the D3 general update pattern with a bowl of fruit. Five apples render as colored circles, then a data join removes, replaces, and filters fruits through timed intervals. D3 v5’s `selection.data`, `enter`, `merge`, `exit`, and `transition` animate circle radii and positions, while `scaleOrdinal` maps fruit types to colors and sizes. The example updates a static dataset through explicit function calls, showing enter, update, and exit behaviors with smooth 1-second transitions.

Bowl of Fruit - General Update Pattern with Transitions

A bowl of fruit visualizes a data update sequence where apples are eaten, replaced by lemons, and removed, demonstrating the D3 general update pattern. D3’s `selectAll`, `enter`, `merge`, and `exit` methods handle the transitions, with `scaleOrdinal` mapping fruit types to colors and radii. The SVG rendering uses `rect` for the bowl and `circle` elements for the fruit, with timed `setTimeout` calls triggering state changes.

Bowl of Fruit - General Update Pattern

Five colored apples sit in a row inside an SVG, then transform through a sequence of update operations: one apple disappears, another changes to a lemon, and a third is removed. This demonstrates the D3 general update pattern, where data joins drive enter, update, and exit selections. The code uses `scaleOrdinal` for color and radius, `selection.merge()`, and `transition().duration(1000)` to animate changes smoothly.

World Population Area Chart

This area chart shows world population growth over time from a CSV dataset, using a filled path with a smoothed curve to emphasize the escalating trend. The visualization relies on D3.js v5 functions including `scaleTime` and `scaleLinear` for axes, `area` and `curveBasis` for the filled shape, and `axisLeft`/`axisBottom` for gridlines. Data is loaded via `csv`, parsed into numeric and date values, then rendered as an SVG with custom styling from an external stylesheet.

Temperature in San Francisco Line Chart

This line chart visualizes a week of temperature readings in San Francisco, highlighting temperature variation over time with an area fill beneath the curve. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `axisBottom`, and `axisLeft` to render SVG elements. Data is loaded via `csv` from a remote dataset, with timestamps parsed as dates and temperatures as numbers. The chart features a maroon area path generated with `curveBasis`, along with labeled axes and a title.

Temperature in San Francisco Line Chart

This line chart visualizes temperature measurements in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The code loads CSV data from a remote URL, parses timestamps and numeric temperatures, then renders an SVG chart using D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a smooth `curveBasis` line generator. Grid lines are drawn via axis tick marks, and the chart includes axis labels and a title. The visualization uses a simple margin-based layout with an SVG container of 960 by 500 pixels.

Temperature in San Francisco Scatter plot

This scatter plot shows a week of hourly temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis, using blue circles to mark each observation. The chart is rendered as an SVG using D3 v5, with scales created via `scaleTime` for the temporal axis and `scaleLinear` for temperature. Data is loaded from a CSV file and parsed with `csv`, while the axes are generated using `axisBottom` and `axisLeft`, complete with labeled tick lines and a title.

Cars Scatter plot

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each red semi-transparent circle representing a vehicle. The visualization uses d3.csv to load the data, d3.scaleLinear with .nice() to map values, and d3.axisBottom and d3.axisLeft to render labeled axes with grid lines, all drawn as SVG elements.

Scatter plot

This scatter plot displays the populations of the top 10 most populous countries, using a linear scale for population on the x-axis and a point scale for country names on the y-axis. The visualization highlights each data point as a large steel-blue circle, with gridlines and formatted tick labels (e.g., “1.4B”) for readability. The code loads data from a CSV file using D3 v5’s `csv` method and renders the chart as an SVG, employing `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the plot.

Customizing Axes

A horizontal bar chart displays the populations of the ten most populous countries, with population values formatted in billions using a custom tick format that replaces 'G' with 'B'. The chart uses d3.scaleLinear and d3.scaleBand to map data from a CSV file, while d3.axisLeft and d3.axisBottom generate the axes. Custom axis styling removes domain lines and adds tick lines, with the x-axis label and chart title styled via CSS.

Making a Bar chart

This bar chart displays the populations of ten countries, using horizontal bars ordered from largest to smallest. The visualization loads data from a CSV file using `d3.csv` and renders it as SVG. The code employs `d3.scaleLinear` for the x-axis population values and `d3.scaleBand` for the categorical y-axis, while axes are generated with `d3.axisLeft` and `d3.axisBottom`. Population numbers are converted from integers with a thousand multiplier before scaling.

Aug 17, 2019

Making a Bar chart

Aug 17, 2019

Shapes with SVG and CSS

This example demonstrates how to construct geometric shapes—circles, rectangles, lines, and paths—using raw SVG elements and style them through CSS. It shows shape customization via inline attributes, such as fill colors and stroke widths, alongside CSS classes that apply shared stroke properties and a fill override for a specific group. The SVG is scaled using a transform, and elements are organized with nested groups and translations. The rendering relies on standard SVG markup and the stylesheet’s `stroke` and `stroke-linejoin` properties, with no external JavaScript libraries.

HTML Cars Report

This example shows a basic HTML cars report listing three used vehicles with their model years, names, and prices. It demonstrates how static data can be presented as a styled web page using plain HTML elements like `ul` and `li`. The code relies on standard HTML markup and a linked CSS file (`styles.css`) to apply larger monospace font sizing and highlight the first car entry in red via the `.highlighted` class. No JavaScript libraries or dynamic rendering APIs are used.

Cars Report

This example displays a list of cars filtered by price. After a brief loading message, the page shows each car’s year, make, model, and price—for example, “2009 Ford F150: $1950”—for all vehicles under $2000. The application uses `getCars()`, a Promise that resolves with hardcoded JSON data after a two-second delay, then applies `generateReport()` to filter and format the entries via `formatCar()`. The result is placed into the text content of a `<pre>` element, updating the initial “Hello” placeholder.

Hello VizHub

This example demonstrates a minimal VizHub project that renders a static greeting message in large, stylized text on a dark background. It shows how to combine a basic HTML page, CSS styling, and an ES6 module structure to produce a simple visual output. The code uses the D3.js `select` API to target the `#message` div and set its text content, while the `myMessage.js` module exports the message string. Styling relies on a Google Fonts import for the Ubuntu typeface and a custom color scheme defined in the stylesheet.

Cars Report

This example displays a filtered list of cars priced under $2000, formatted as text lines in a large HTML `<pre>` element. It demonstrates simple data handling in JavaScript, using a hardcoded JSON array of car objects (make, model, year, price) and the `Array.filter` method to select qualifying entries. The `formatCar` function, imported from a separate module, converts each car object into a readable string, and the results are joined with newlines before being injected into the DOM via `document.getElementById` and `textContent`.