SurajQWERTY

@SurajQWERTY·6 public vizzes

Let's make a customizing axis Bar Graph with D3.js

This bar chart displays the population of the top 10 most populous countries, with horizontal bars ranked from China to Mexico. The visualization uses D3.js v7 with SVG rendering. The code employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` to generate customized axes with removed domains and tick lines. Population values from a CSV file are multiplied by 1000 and formatted using `d3.format`.

Mar 5, 2022

Loading thumbnail…

Let's make a Bar Graph with D3.js

This bar chart displays the populations of the world’s most populous countries using horizontal bars, with countries on the y-axis and population values on the x-axis. The visualization reads population data from a CSV file and uses D3’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map values and render axes. Rectangles are appended to an SVG group to represent each bar, with the data converted to numeric values before rendering. The chart is built with D3 v7 and styled using steelblue fills.

Mar 4, 2022

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG, whose eyebrows animate by moving up and down in a repeating two-second cycle. The face is centered using a translation transform on a group element, with circles for the eyes and an arc path for the mouth. The code uses D3 v5’s `select`, `arc`, and `transition` APIs to construct the shapes and drive the eyebrow motion, with dimensions and offsets defined as constants. The animation runs once on load, moving the shared eyebrow group downward, then back to its original position.

Feb 26, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js version 7 setup, rendering the text “hello world” inside a pre element on a webpage with an extremely large 13em font size. The code uses the `select` function from D3 to target the body element and set its text content, while also directly manipulating the HTML element’s innerHTML property. It loads the D3 library from a CDN and serves as a basic template for starting new D3 projects, showing the simplest possible way to integrate D3 with plain HTML and JavaScript.

Feb 12, 2022

Loading thumbnail…

Fork of Fork of D3 Starter

This example displays a large, centered “Hello D3 version 7” message in the browser window. It demonstrates a minimal setup for using D3 v7 with a modular import of the `select` function from the `d3` package, applied to an HTML body element. The page loads d3.min.js from unpkg and uses a separate bundle.js file to run the script, which sets the body’s text content. The styling uses a 13em font size and centered text alignment, rendering the greeting prominently.

Feb 12, 2022

Loading thumbnail…

Fork of HTML Starter

A bare-bones HTML page displays the text “Hello HTML!” centered in large type, styled with a CSS class that sets a 13em font size. The page uses plain HTML markup with embedded `<style>` and a single `<div>` element, relying on the browser’s default rendering for content. No JavaScript or external libraries are involved; the example demonstrates minimal setup for a static, styled document.

Feb 12, 2022