Skip to main content
Log in
P

pradeep90605

@pradeep90605·12 public vizzes

Loading thumbnail…

Making a Bar chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The visualization highlights the relative scale of each nation, from China’s leading figure down to Mexico. Built with D3 v5, the code loads data from a CSV file and renders an SVG bar chart with customized axes. It notably uses d3.csv to parse the data and D3’s scale functions to map population values to bar heights.

Jun 28, 2020
Loading thumbnail…

Making a Bar chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The visualization highlights the relative scale of each nation, from China’s leading figure down to Mexico. Built with D3 v5, the code loads data from a CSV file and renders an SVG bar chart with customized axes. It notably uses d3.csv to parse the data and D3’s scale functions to map population values to bar heights.

Jun 28, 2020
Loading thumbnail…

Making a Bar Chart

This example demonstrates how to build a basic bar chart using D3.js, reading population data from a CSV file. The SVG canvas displays the chart, though the code currently only loads and logs the data to the console, without rendering bars. It uses the D3 `select` and `csv` functions to fetch and parse the dataset, with the SVG element defined in the HTML and styled via an external CSS file. The chart is set to 960 by 500 pixels.

Jun 28, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, using D3 v5 to load a CSV file and render an SVG graphic. The visualization reads the `data.csv` file with the `csv` function and selects the SVG element via `select`. The chart’s layout and bars are constructed using D3’s SVG rendering, with the page styled by an external CSS file. The example demonstrates a straightforward data-to-visualization pipeline without interactive features.

Jun 28, 2020
Loading thumbnail…

Making a Bar chart

A bar chart displays the relative populations of ten countries, with each bar's height corresponding to the population value from the CSV data. The code uses D3's `select` and `csv` functions to load the data, convert the population strings to numbers, and bind the data to `rect` elements for SVG rendering. All bars are drawn on an empty SVG canvas, and the chart initially renders without the styling defined in the CSS.

Jun 21, 2020
Loading thumbnail…

Responding to Resize

This example demonstrates a responsive SVG visualization that redraws itself to match the browser window’s dimensions. The chart fills the entire viewport via CSS, and a `redraw()` function extracts the container’s `clientWidth` and `clientHeight` to set the SVG’s width and height attributes. It then draws a green semi-transparent X composed of two diagonal lines, using D3’s data binding and merge operators to update the line positions. The code relies on D3 v5’s selection API and listens for window resize events to trigger the redraw, ensuring the graphic always spans the available space.

Jun 21, 2020
Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” centered on the screen with a very large font size. The page uses plain HTML and CSS, with a `body` style that sets `text-align: center` and `font-size: 13em`. There are no external libraries or data sources involved; the rendering relies solely on the browser’s built-in HTML and CSS parsing. It serves as a bare-bones starting point for creating visualizations, contrasting with the more complex React-based starter available in the accompanying link.

Jun 18, 2020
Loading thumbnail…

Cars Report

This example demonstrates a JavaScript module workflow for generating a text-based car report. It defines a data array of five car objects embedded in `getCars.js`, then uses `Array.filter` and `Array.map` in `generateReport` to select vehicles priced below 2000, formatting each result with `formatCar`. The asynchronous `getCars` function returns a Promise that resolves after a two-second delay, mimicking an API call. The final report is displayed inside an HTML `<pre>` element using the browser’s `document.getElementById` API.

Jun 18, 2020
Loading thumbnail…

Cars Report

This example displays a plain-text report for a cars dataset, rendering a message element in large font. It uses React to manage the component structure and updates the page content dynamically. The visualization relies on a minimal HTML setup with a pre-formatted text container that receives the data-driven message. The code demonstrates a straightforward approach to data reporting without complex charts or interactive elements, focusing instead on presenting textual information clearly.

Jun 18, 2020
Loading thumbnail…

Cars Report

This example displays a minimal "Cars Report" page consisting of a single line of static text, "Hello HTML," centered on a white background. It uses React as its framework and renders a basic HTML page via a simple `index.html` file, with styling applied through a CSS style block that sets the font size and center alignment. The visualization does not load any data or produce charts; it serves as a bare-bones starter template for a web application.

Jun 18, 2020
Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that centers the text “Hello HTML” on the screen with a large font size. It uses a plain HTML file with embedded CSS to demonstrate the fundamental structure of a web page. The code defines a `body` style with `text-align: center` and `font-size: 2em`, and then renders the static content directly in the markup. It is a bare-bones starting point for web development, with no external libraries or dynamic data.

Jun 18, 2020
Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” centered on the screen with a very large font size. The page uses plain HTML and CSS, with a `body` style that sets `text-align: center` and `font-size: 13em`. There are no external libraries or data sources involved; the rendering relies solely on the browser’s built-in HTML and CSS parsing. It serves as a bare-bones starting point for creating visualizations, contrasting with the more complex React-based starter available in the accompanying link.

Jun 18, 2020