B

bukbukbukka

@bukbukbukka·17 public vizzes

Loading thumbnail…

Number Guesser

A browser-based guessing game where the player attempts to identify a random number between 1 and 10 within three tries. The interface displays the number range, an input field for guesses, and live feedback on remaining attempts. The logic uses plain JavaScript with DOM manipulation through `querySelector` and `getElementById`, while the layout relies on the Skeleton CSS framework. The game tracks wins and losses, disables input after game over, and offers a replay option via a reload button, all without any external data or visualization libraries.

Loading thumbnail…

First Area Chart

This area chart shows hourly temperature readings in San Francisco over time, with a smooth curved line and a filled region beneath it. The visualization loads data from a remote CSV file using `d3.csv`, parses timestamps with `Date`, and renders the chart as SVG. It employs `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for axes, and generates the filled area using the `d3.area` generator with `curveBasis`. Axis grid lines, title, and rotated y-axis label are included.

Loading thumbnail…

Number Guesser

This interactive game challenges a player to guess a number between one and ten within three attempts. It shows the range and remaining guesses, then reveals the winning number if the player loses, and offers a play-again button. The interface is built with Skeleton CSS, while the game logic uses JavaScript and the DOM API for event handling. Random winning numbers are generated using the `Math.random` and `Math.floor` functions.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be styled with CSS, using primitive elements such as circles, rectangles, lines, and paths. The graphic shows default black fills, an explicitly filled red circle and green rectangle, and a group with a light blue fill and black stroke, all scaled via a transform. It also includes a polyline path and a line rendered without fill. The code relies on standard SVG markup within an HTML document, linked to an external stylesheet, and does not use any JavaScript libraries.

Loading thumbnail…

Hello VizHub

This example renders a simple text message, “Hello VizHub!”, centered on a dark blue background using the Ubuntu font. It shows how to combine a minimal HTML page with D3.js and ES6 modules in a VizHub project. The code uses `d3.select` to set the text content of a div, imports the message from a separate `myMessage.js` module, and applies styling through an external CSS file loaded via `@import`. The example demonstrates basic D3 selection and module import syntax without any data or complex visualization.

Loading thumbnail…

S&P 500 Index

A line chart displays the nominal closing price of the S&P 500 index from 1980 to 1998, rising from roughly 135 to over 1200. Data points are marked with circles along the path. Using D3 v5, the visualization builds SVG axes with `scaleTime` and `scaleLinear`, renders the polyline with the `line` generator and `curveLinear`, and appends circles for each yearly observation from `data.csv`.

Loading thumbnail…

Task List

This interactive task list demonstrates how to add, filter, and delete tasks in a web application. Users type a new task into a form, submit it to create a list item, and can click a remove icon to delete individual entries with a confirmation dialog. A search field dynamically filters visible tasks as the user types, while a “Clear Tasks” button removes all entries at once. The code uses vanilla JavaScript event listeners for form submissions and clicks, jQuery for DOM manipulation, and Materialize CSS for styling the interface.

Loading thumbnail…

Intro to Nested Objects

Five fruit circles start as apples and animate through a scripted sequence of updates, removals, and a type change to lemon. The example demonstrates the nested update pattern using `selection.data`, `enter`, `merge`, and `exit` with `d3.transition` to animate SVG circle radii, fills, and positions, plus text labels. It uses `d3.scaleOrdinal` for color and radius mapping, and stores a random `id` in each fruit object for keyed data binding.

Loading thumbnail…

First Line Chart

This example visualizes daily temperature records in San Francisco as a smooth line chart, using a time-scaled x-axis for dates and a linear y-axis for temperature values. Drawn with SVG paths, the line employs D3's `line()` and `curveBasis` for smoothing, while axes are generated with `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. The CSV data is loaded asynchronously, with margins, labels, and title configured programmatically.

Loading thumbnail…

Intro to Transitions

Five circles representing fruit transition smoothly as they are added, updated, and removed. The example demonstrates D3's data join with enter, update, and exit selections. Using d3.transition with a one-second duration, each circle's radius, fill color, and x-position animate via attribute interpolation. The code uses scaleOrdinal for categorical color and radius mapping, and random IDs to track elements as apples are replaced by lemons and removed over timed intervals.

Loading thumbnail…

First Scatter Plot

This scatter plot displays population figures for ten countries, with each circle positioned by its country on the vertical axis and population on the horizontal axis. The example uses D3 v5’s `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` APIs. It loads data from `data.csv`, multiplies population values by 1,000, and renders SVG circles with a fixed radius. The axes include formatted tick labels and the chart adds a title and axis label via SVG text elements.

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth over time, using latitude and longitude coordinates to plot the data. The visualization is rendered with SVG and built using D3 v5, employing the `area()` generator with `curveBasis` to create a smooth filled path. It reads population data from a CSV file and uses `scaleTime` and `scaleLinear` for the axes. The chart includes formatted tick labels, axis titles, and a maroon fill for the area.

Loading thumbnail…

Temperatures - San Francisco

This visualization displays the temperature in San Francisco over time as a scatterplot of circles, with time on the x-axis and temperature on the y-axis. The code reads the data from a CSV file using d3.csv, then renders an SVG chart. It employs d3.scaleTime and d3.scaleLinear to map data, d3.axisBottom and d3.axisLeft with tick lines to form the grid, and formats axes with labels and a title. Circle positions are set via xScale and yScale attributes.

Loading thumbnail…

Auto MPG Summary

This scatterplot visualizes the relationship between fuel efficiency (mpg) and vehicle weight for a dataset of cars. Each circle represents a car, with its position determined by its mpg and weight values. The visualization uses D3 v5 to load data from a CSV file and render SVG circles. It employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.extent` to compute scale domains. Gridlines are created using negative tick sizes, and axis labels are rotated for clarity.

Loading thumbnail…

Customizing Axes

This example demonstrates how to customize both axes in a bar chart showing population data for ten countries. The horizontal axis uses a linear scale with formatted tick labels that abbreviate numbers (e.g., converting “G” to “B” for billions), while the vertical axis displays country names using a band scale. The code removes default axis lines and gridlines, then adds custom labels and a title. It relies on d3.csv for data loading, d3.scaleLinear, d3.scaleBand, d3.axisBottom, d3.axisLeft, and d3.format for tick formatting, rendering with SVG.

Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG smiley face with black facial features demonstrates D3.js’s core DOM manipulation and transition APIs. The head, eyes, eyebrows, nose, and mouth are built by appending SVG circles, rectangles, and arcs via `d3.select` and `d3.arc`. Concurrent two-second `transition` chains animate the eyebrow group upward, eyeballs sideways, nose sideways, and mouth downward before returning all groups to their original positions. The example is rendered entirely in SVG and uses D3 v5 from a CDN.

Loading thumbnail…

First Bar Chart

This example displays a horizontal bar chart of food sales, using D3.js (v5) with SVG rendering. The chart maps food types to a band scale and sales numbers to a linear scale, with axes generated via `axisLeft` and `axisBottom`. Population data for the top 10 countries is sourced from the 2017 World Population Prospects, though the code loads `moreData.csv` with food sales figures. Bars are drawn as SVG rectangles with steelblue fill, and the layout includes explicit margins and padding.