Lozakaka

@Lozakaka·8 public vizzes

123 of Making a Bar Chart

A horizontally oriented bar chart displays the populations of the ten most populous countries, with bars extending from left to right. The chart uses D3 v5’s `scaleLinear` for both the x-axis (population values) and the y-axis (categorical country names), with `axisLeft` for country labels and `axisBottom` for the value scale, all rendered as SVG rectangles. The data is loaded from a CSV file with `csv('data.csv')` and processed by multiplying the population values by 1000. Only the x-axis and y-axis ticks are shown, as the axis lines and tick marks are removed.

Oct 10, 2022

Loading thumbnail…

real of Lab2-4

This scatterplot maps NDX_price on the x-axis against META_price on the y-axis for stock data from early 2022, with each circle representing a single trading day. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while gridlines are drawn via tick sizing. The CSV data is loaded with `d3.csv` and parsed to numeric values. Styling relies on CSS for circle fills, tick marks, and axis labels, with the chart rendered as an SVG.

Oct 10, 2022

Loading thumbnail…

Lab2-4

This bar chart displays the population of the top 10 most populous countries, with data from the 2018 estimate in the United Nations World Population Prospects 2017. It builds on a prior bar chart by customizing axes, including tick formatting that converts large numbers to abbreviated forms like "G" for billions. The visualization uses D3 v5 APIs such as `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`, rendering circles in SVG. Population values are multiplied by 1000 in the data-loading step, and the chart includes labeled axes and a title.

Oct 10, 2022

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the population of the top 10 most populous countries, with circles positioned along a linear scale for population and a point scale for country names. The code uses D3 v5 to load CSV data, create SVG elements, and render axes with custom tick formatting that abbreviates large numbers (e.g., converting millions to billions). The chart includes axis labels and a title, with styling applied via CSS for circle fill and text appearance.

Oct 10, 2022

Loading thumbnail…

Scatter Plot

This scatter plot displays population figures for a single country over the years 2017–2021. The visualization uses a linear scale for the population values on the x-axis and a band scale for the years on the y-axis. The chart is rendered using D3 v5 with an SVG output, where steel-blue rectangles represent each year's population. Data is loaded from a CSV file, and the scales are created using `scaleLinear` and `scaleBand`, with axes added via `axisLeft` and `axisBottom`.

Oct 10, 2022

Loading thumbnail…

Making a barChart

This bar chart displays population figures per year, with horizontal bars extending from a linear scale up to the maximum value. The code loads data from a CSV file and renders it as SVG, using D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the axes. The chart is built declaratively with `select`, `csv`, and `max`, while styling is applied via CSS.

Oct 10, 2022

Loading thumbnail…

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

A yellow smiley face rendered in SVG uses D3.js v5 to demonstrate chained transitions on the eyebrows. The face, built with `d3.select` and `d3.arc` for the mouth, animates both rectangular eyebrows upward over two seconds, then returns them to their original position. The eyebrows move as a group via `transition.attr` on the transform attribute, while static circles and rectangles define the eyes and brows. This example shows basic DOM manipulation and timed animation without external data.

Oct 10, 2022

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

A line chart visualizes annual automobile sales in India from 1999 to 2012, showing sales volume on the y-axis against years on the x-axis. The chart uses D3 v5 APIs including `d3.csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render an SVG path. Data is loaded from a GitHub-hosted CSV file, with years parsed as dates and sales values converted to numbers. The chart includes labeled axes, gridlines, a title, and a blue stroke for the sales trend.

Oct 10, 2022