Skip to main content
Log in
E

eleshaky

@eleshaky·5 public vizzes

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries in 2020 as a bare bar chart without any axes, labels, or scales shown. The data comes from the United Nations World Population Prospects 2019 dataset, loaded via `d3.csv`. The visualization uses React with `useState` and `useEffect` hooks to fetch and store the data, then renders SVG rectangles positioned with `d3.scaleBand` and sized by `d3.scaleLinear`. Red gridlines are drawn at each tick of the x-axis using D3’s `ticks()`, though no tick labels appear.

May 5, 2022
Loading thumbnail…

Fork of Rendering Data with React & D3

This example loads UN population data from 2019 as CSV using D3’s `csv` utility, then renders the countries as vertical bars in an SVG via React components. The code defines both a `scaleBand` for country positioning and a `scaleLinear` for value mapping, but leaves the bar widths incomplete, so the visualization is unfinished. It uses React hooks like `useState` and `useEffect` to manage asynchronous data fetching and rendering, demonstrating a React-D3 integration pattern with a production build of both libraries.

May 4, 2022
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a time-series line chart of weekly temperature data for San Francisco, using the Vega-Lite API to declare marks and encodings for time on the x-axis and temperature on the y-axis. The `getData.js` file loads CSV data from a remote URL via `d3.csv`, and the chart renders with a custom dark theme and tooltips. It leverages `vega`, `vega-lite`, `vega-lite-api`, and `vega-tooltip` to build the visualization in an SVG view.

May 4, 2022
Loading thumbnail…

mouse follower

A React component loads a CSV file of CSS named colors via the `d3.csv` method and displays a summary message about the dataset. The message shows the formatted data size in kilobytes, the number of rows, and the number of columns using `d3.csvFormat` and the data’s `columns` property. While loading, the text shows "loading...". The example demonstrates a simple data-loading and text-rendering workflow with React, the `useEffect` and `useState` hooks, and D3’s CSV parsing and formatting utilities.

May 4, 2022
Loading thumbnail…

csv data

This example displays basic metadata about a CSV file in large text, reporting its size in kilobytes, row count, and column count. It loads the data from a GitHub Gist containing CSS named colors using d3.csv in D3 v7, then formats and measures the parsed data with d3.csvFormat. The page is a minimal HTML document with inline JavaScript and CSS, updating a pre element’s text content through the DOM API.

May 2, 2022