Skip to main content
SimilarExport ZIP
100%

Fork of CSV Dataset Test

✓ Published2🌍 Public
Wweird_danger
Last edited Oct 15, 2024
Created on Sep 7, 2024

This fork of the CSV dataset template renders a bar chart of population estimates for select countries, sourced from the penguins dataset’s CSV-loading pattern. The chart uses `d3.scaleLinear` and `d3.scaleBand` to map populations to bar widths and countries to vertical positions, with axes from `d3.axisLeft` and `d3.axisBottom`. Data is parsed in `index.js` by converting each population string to a number and multiplying by 1000, then drawn as SVG rectangles.

AI-generated description

The Penguins Dataset, loaded and parsed as CSV.

Fork and modify this template to import your data to VizHub and export it for use in other vizzes! To do that:

  • Fork this viz
  • Clear out the README
  • Update the README with details about your dataset (including original source)
  • Replace data.csv with your own data
  • Replace the parsing logic in index.js with your own
  • Set the custom URL so you can import from it easily

Challenge

  • Find 3 datasets on a topic you are interested in
  • For each of those, fork this viz and replace the data
  • Parse the quantitative attributes into numbers
  • Update README.md to indicate the original data source
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Making a Bar Chart22

This bar chart displays population figures for ten countries from a CSV file, using horizontal bars sorted by country name. The visualization is built with D3 v5 and rendered as SVG, employing `scaleLinear` for the population axis and `scaleBand` for categorical spacing. The code loads data via `d3.csv`, transforms population values to numbers, and draws axes with `axisLeft` and `axisBottom`. Bars are appended as rectangles with widths proportional to population, styled with steelblue fills and a custom margin layout.

Ggaowxx@qq.com
83% match
Loading thumbnail…

Fork of Making a Bar Chart22

This bar chart displays population figures for ten countries from a CSV file, using horizontal bars sorted by country name. The visualization is built with D3 v5 and rendered as SVG, employing `scaleLinear` for the population axis and `scaleBand` for categorical spacing. The code loads data via `d3.csv`, transforms population values to numbers, and draws axes with `axisLeft` and `axisBottom`. Bars are appended as rectangles with widths proportional to population, styled with steelblue fills and a custom margin layout.

Ggaowxx@qq.com
83% match
Loading thumbnail…

Fork of barGraph

This fork of barGraph displays population data rows from a CSV file as a series of uniform SVG rectangles, each sized to a fixed width and height but positioned by the order of the data. The example loads D3 via UNPKG and uses the `select` and `csv` functions from the D3 module to fetch the dataset, logging each country’s name and 2022 population to the console before rendering the bars. The visualization relies on D3’s selection and data-binding methods (`append`, `selectAll`, `enter`) to create the static bar elements within a 960 by 500 SVG canvas.

IIndira120
82% match
Loading thumbnail…

Fork of barGraph

This fork of a bar chart visualizes population data from a CSV file, displaying each country as a circle on an SVG canvas. The chart uses D3 v5, loading data via the `csv` function and manipulating SVG elements through the `select` API. Hovering over a circle turns it black, as defined in the CSS. The visualization presents the dataset without additional encoding, showing raw data points for each country.

MMathieuZenone
82% match
Loading thumbnail…

Fork of data visulization

This bar chart displays population data for six countries, sourced from a local CSV file, with each bar’s length proportional to the population value (scaled by 1,000). Using D3 v6, the code employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical y-axis spacing, and `d3.axisLeft`/`d3.axisBottom` to render axes. The SVG is appended and styled via CSS, with margins applied to position the chart within a 960×500 viewport.

Yyingzhe-z
82% match
Loading thumbnail…

Fork of barGraph

This example loads a CSV file of global population data and renders placeholder rectangles for each row. The code uses `d3.csv` to parse the data, logs each country’s name and 2022 population to the console, and appends empty, black-outlined squares to an SVG canvas. The rectangles do not encode any data values; the visualization demonstrates the basic workflow of loading and iterating over external data with D3, leaving data binding and scaling unimplemented.

Ffkara09
81% match
Loading thumbnail…

Fork of Bar Chart

This bar chart displays population figures for ten countries, with each bar’s width proportional to its population using a `d3.scaleLinear` for the x-axis and a `d3.scaleBand` for the y-axis to position countries. Data is loaded from a CSV via `d3.csv`, with population values converted from strings to numbers. The chart renders as SVG rectangles inside a fixed 960×500 viewport, using D3 v5’s data join to append elements. The code omits vertical bar positioning, leaving the default y-coordinate, while the x-scale domain spans from zero to the maximum population.

Jjlspangl
81% match
Loading thumbnail…

Fork of barGraph

This bar chart example loads population data from a CSV file with d3.csv and renders a static set of rectangles using D3’s selection and data-join methods. The code imports `select` and `csv` from D3 v5, appends a group element to an SVG, and binds the dataset to `rect` elements with fixed width and height attributes. The visualization displays each country’s population values from the 2022 column, though the chart does not scale the bars to the data values and only logs the country names and populations to the console.

MMaeva B
81% match