Skip to main content
Log in
S

ShokoLocoMocco

@ShokoLocoMocco·10 public vizzes

Loading thumbnail…

Customizing Axes [complete]

This bar chart displays the population of the top 11 most populous countries, using data from the 2019 UN World Population Prospects. The chart highlights customized axes: the y-axis uses a band scale with minimal styling, while the x-axis uses a linear scale with tick marks extending across the plot and formatted labels (e.g., "1.4B" using d3.format). The chart is rendered as an SVG using d3.selection, d3.scaleLinear, d3.scaleBand, and d3.axisBottom/axisLeft.

Dec 28, 2020
Loading thumbnail…

Let's make a face with D3.js! [complete]

A smiling cartoon face is drawn using D3.js v6 in an SVG canvas, with a yellow circular head, gray eyes, white highlights, black eyebrows, and an arc-shaped mouth. The face is assembled from basic SVG shapes—circles, rectangles, and a path generated with the `arc()` helper function from D3’s shape module. React is used for the surrounding framework, while the animation comes from a chained `transition()` on the eyebrow group, which temporarily shifts it upward before returning, creating a blinking or winking effect. The pink background and centered layout are styled with CSS.

Dec 26, 2020
Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red semi-transparent circle represents a car, with position determined by its horsepower on the x-axis and weight on the y-axis. The visualization uses D3 v5 to load CSV data, scale linearly with `scaleLinear`, and render axes via `axisBottom` and `axisLeft`. Titles and axis labels are added as SVG text elements, with styling applied through an external CSS file.

Dec 26, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2019 estimates from the United Nations World Population Prospects 2020. The visualization uses D3 v6 with an SVG rendering approach, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Data is loaded from a CSV file, with populations multiplied by 1000 to represent actual figures. The chart includes axes generated via `axisLeft` and `axisBottom`, with dark blue bars against a light blue background.

Dec 25, 2020
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js v5 visualization can respond dynamically to browser resize events. An SVG element fills the viewport via CSS positioning, and a redraw function extracts the container’s current pixel dimensions using `clientWidth` and `clientHeight`. The code then sets the SVG’s `width` and `height` attributes accordingly and renders two green diagonal lines to form an X, with an event listener on `window` for the `resize` event triggering the redraw. The visualization uses a data join with `selectAll` and `enter` to update the lines.

Dec 23, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements and styled with CSS rules. It shows how SVG markup can be combined with CSS classes, such as `.lines`, to apply stroke properties like color and width, while inline attributes control fill and transform behaviors, including scaling and translation. The code uses raw HTML, CSS, and JavaScript within a React starter template, with no external visualization libraries.

Nov 16, 2020
Loading thumbnail…

HTML Cars Report

This example displays a static HTML page titled “Cars Report” that lists three used vehicles with their model years and prices. The page uses plain HTML for structure, CSS for styling, and JavaScript is referenced in the README but not present in the visible code. A single CSS rule highlights the first car listing in red via the `.highlighted` class. The rendering relies on standard browser APIs without external libraries.

Nov 15, 2020
Loading thumbnail…

Cars Report [complete]

This example demonstrates a text-based report of cars filtered by price, displaying each car’s year, make, model, and cost in a large, preformatted HTML element. The page initially shows “Loading...” and then, after a simulated two-second delay, renders the filtered list. The code uses JavaScript promises with `getCars` to fetch a hardcoded JSON array, and `generateReport` with `formatCar` to filter and stringify the data. It relies on plain DOM manipulation via `document.getElementById` to update the message element, with no external visualization libraries.

Nov 15, 2020
Loading thumbnail…

Hello D3

This example demonstrates the simplest possible D3 visualization, rendering the text "Hello D3 ver. 6" directly into the page body. It uses D3’s `select` method to target the `body` element and set its text content. The page also includes a separate script that logs "Hello JavaScript!" to the browser console, while CSS centers the text at a large font size. The code relies on the d3.v6 library loaded from a CDN, with the main logic in `index.js`.

Nov 3, 2020
Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying the text “Hello HTML” in large, centered type, with a JavaScript console message. It demonstrates the fundamental structure of a web document using plain HTML, CSS, and JavaScript. The code includes an inline `<style>` block for the body’s text alignment and font size, and a `<script>` tag that calls `console.log()` to output “Hello JavaScript!” to the browser’s developer tools. This serves as a bare-bones starting point for building more complex web-based visualizations, offering no external libraries or data sources.

Nov 3, 2020