Skip to main content
Log in
P

Praneeth Varma

@praneethvarmamantina·11 public vizzes

Loading thumbnail…

Making a Bar graph

This example displays the top ten most populous countries as circles, using a bar-chart-like layout where circle position encodes population on a linear scale and country on a point scale. The chart uses D3 v5’s `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the axes and `selectAll`/`append` to render SVG circles. Data originates from a UN report, loaded from a CSV file.

May 8, 2020
Loading thumbnail…

Making a Bar graph

This example visualizes the top ten most populous countries using a bar chart built with SVG circles and D3.js. It displays population data from the UN, with each circle’s position encoding country and population size. The code uses `d3.csv` to load data, `scaleLinear` and `scalePoint` for scales, and `axisLeft` and `axisBottom` for axes. Population values are formatted with `d3.format`, and circle radii are fixed at 15 pixels.

May 8, 2020
Loading thumbnail…

Making a Bar graph

This horizontal bar chart displays the ten most populous countries using data from a UN report. D3 version 5 loads the CSV and scales the population values by a thousand. The visualization uses `scaleLinear` for population, `scaleBand` for country names, and `axisBottom` with a custom tick formatter to convert units like G to B. SVG rectangles are positioned and sized according to the scales, with axis labels and a title styled via CSS.

May 7, 2020
Loading thumbnail…

Making a Bar graph

This horizontal bar chart displays the ten most populous countries using data from a UN report. D3 version 5 loads the CSV and scales the population values by a thousand. The visualization uses `scaleLinear` for population, `scaleBand` for country names, and `axisBottom` with a custom tick formatter to convert units like G to B. SVG rectangles are positioned and sized according to the scales, with axis labels and a title styled via CSS.

May 7, 2020
Loading thumbnail…

Making a Bar graph

This horizontal bar chart displays the ten most populous countries using data from a UN report. D3 version 5 loads the CSV and scales the population values by a thousand. The visualization uses `scaleLinear` for population, `scaleBand` for country names, and `axisBottom` with a custom tick formatter to convert units like G to B. SVG rectangles are positioned and sized according to the scales, with axis labels and a title styled via CSS.

May 7, 2020
Loading thumbnail…

Making a Bar graph

This bar chart displays the ten most populous countries in the world according to UN data, with horizontal bars ranked by population. The visualization uses D3 v5’s scaleLinear, scaleBand, axisBottom, and axisLeft to map population values to bar lengths and country names to rows. Population figures are formatted using the d3.format function with a custom replace for billions. The chart draws SVG rectangles with a steelblue fill, includes gridlines via tickSize, and labels the x-axis “Population.”

May 7, 2020
Loading thumbnail…

Making a Bar graph

This example shows a horizontal bar chart of the ten most populous countries, with population values from a UN report. The code loads data from a CSV file, multiplies the raw population figures by 1000, and renders bars using SVG `rect` elements. It uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for the axes, with data loaded via `d3.csv`.

May 7, 2020
Loading thumbnail…

SVG and CSS

This example creates an animated SVG face using React and D3 v5. The visualization shows two large eyes and eyebrows rendered as circles and rectangles within a yellow circle on a black stroke, with a smile drawn using an arc path. The eyebrows animate upward and back down over two seconds via chained `transition()` calls that modify the group’s transform attribute. The code imports `select` and `arc` from D3 to manipulate SVG elements and generate the mouth shape, all within a fixed 960x500 canvas.

May 7, 2020
Loading thumbnail…

SVG and CSS

This example demonstrates basic SVG shapes styled with CSS properties. It shows circles, rectangles, lines, and a path rendered on a 960x500 SVG canvas. The code uses inline SVG elements like `circle`, `rect`, `line`, and `path`, with visual attributes such as `fill`, `stroke`, and `stroke-width` applied directly. A `<g>` element groups shapes and applies a transform to offset them vertically. The rendering approach is purely declarative SVG markup within an HTML page, with no external libraries or data sources involved.

May 6, 2020
Loading thumbnail…

HTML Starter

This example displays the brand of the first car from a static dataset of car objects. The HTML page renders a large text element, while the JavaScript module imports an array of car data from `cars.js` and uses `document.getElementById` to update the page content. The car data is parsed from a JSON string embedded in the module, and the result is displayed directly in the browser without any external visualization library.

May 5, 2020
Loading thumbnail…

HTML Starter

This example shows a single numeric value—the price of the first car in a small dataset—displayed as large text on a blank HTML page. It imports an array of car objects from a `cars.js` module using ES module syntax, parses the embedded JSON with `JSON.parse`, and writes `cars[0].price` into a paragraph element via `document.getElementById` and `textContent`. The page uses plain HTML, a CSS style block for centering and font size, and external scripts loaded from `index.js` and `bundle.js`.

May 5, 2020