sunilthkGmail

@sunilthkGmail·14 public vizzes

Fork of STACKBAR Group Colours

This example presents a horizontal stacked bar chart where each bar represents an animal, and the bar segments correspond to values across four categories (A, B, C, D). The bars are colored by animal group, such as Domestic, Pest, or Marine, using a D3 scale that maps each group to a distinct set of fill colors per segment. Built with D3 v5, the visualization defines linear and band scales for the axes, stacks the data with `d3.stack()`, and renders SVG rectangles. Data loads from a CSV file using `d3.csv` and `d3.autoType`, with axes and a legend drawn via `d3.axisTop` and `d3.axisLeft`.

Jan 23, 2023

Loading thumbnail…

population_by_country

This visualization shows a bar chart of population by country for 2015, with bars sorted in descending order along the x-axis. The chart uses the vega-lite-api library to define the bar marks and encodings, while d3.csv loads the dataset from a GitHub gist. The vega and vega-lite libraries handle rendering, and a custom config adjusts axis styling and font sizes for readability.

Jan 23, 2023

Loading thumbnail…

v1_Fork of Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values from a CSV file scaled by 1,000. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG bars, while customizing axes by removing domain lines, applying tick formatting that converts billions to “B” via `format('.3s')`, and adding axis labels. The chart also demonstrates styling tick text, gridlines, and the title through CSS classes.

Jan 23, 2023

Loading thumbnail…

v1_Fork of Vega-Lite API Template

This visualization displays automobile data as a scatter plot, mapping engine displacement on the x-axis against horsepower on the y-axis, with points colored by model year and sized according to vehicle weight. The chart uses the Vega-Lite API to declaratively encode these fields, with D3’s CSV loader fetching the auto-mpg dataset from a GitHub gist. Custom axis and label styling in the configuration enhance readability, while tooltips reveal each car’s name. The visualization renders as an interactive SVG, automatically sizing to fill the browser window.

Jan 23, 2023

Loading thumbnail…

bar_chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects 2017. It uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft and d3.axisBottom to render axes. D3’s format method customizes tick labels, replacing ‘G’ with ‘B’, while the SVG output includes a title, axis label, and styled steelblue rectangles.

Jan 23, 2023

Loading thumbnail…

line_chart_stylezed

This example displays a smoothed line chart of weekly temperature readings over time from the Data Canvas Sense Your City dataset. The visualization uses React to render SVG elements, with D3 v5's `scaleLinear`, `scaleTime`, and `line` generator with `curveNatural` for the path. The axes are custom components (AxisBottom, AxisLeft) that map ticks and labels, while the Marks component draws the curved temperature line. The styling uses a Poppins font, muted gray tick marks, and a teal stroke for the line.

Jan 23, 2023

Loading thumbnail…

scatter_plot

This scatter plot visualizes the relationship between engine displacement and horsepower for a collection of automobiles, with each point representing a vehicle and its name available via tooltip. The visualization uses the vega-lite-api library to define the chart, which is rendered through Vega-Lite’s SVG backend, and pulls data from a CSV file using d3.csv. The plot is configured with custom axis styling and a dark color scheme, while points are rendered with a subtle opacity to reveal density in overlapping regions.

Jan 23, 2023

Loading thumbnail…

V3_Loading data with React and D3

This example demonstrates how to build a React application that asynchronously loads a CSV file and visualizes it as a pie chart. The chart maps CSS color names from the loaded data into a semicircular arc, with each color’s RGB hex value filling its corresponding segment. The code combines React’s `useState` and `useEffect` hooks with D3’s `csv` parsing and `arc` generator to create the SVG paths. Data is fetched from a GitHub Gist URL, and a loading message displays while the data is pending.

Jan 23, 2023

Loading thumbnail…

v2_Loading data with React and D3

This example demonstrates how to load and display a dataset within a React application using D3.js. It fetches a CSV file of CSS color names and hex values from a GitHub Gist, then renders each row as a small colored div. The code uses D3's `csv` function for data parsing and React's `useState` and `useEffect` hooks to manage asynchronous loading. Console logging confirms the fetched data structure, while a separate `getMessage` module calculates and displays the dataset's size in kilobytes, row count, and column count.

Jan 23, 2023

Loading thumbnail…

Loading data with React and D3

This example demonstrates a minimal React application that loads and summarizes a CSV dataset from a GitHub gist using D3’s `csv` method. It shows how to integrate React hooks like `useEffect` and `useState` with asynchronous D3 data loading. The app displays dataset statistics—including size in kilobytes, row count, and column count—via a custom local ES6 module called `getMessage`. React renders the result, while D3 is imported directly from the `"d3"` package. The page also loads React, ReactDOM, and D3 from CDN links in the HTML.

Jan 23, 2023

Loading thumbnail…

mouse_move1

This example demonstrates a real-time interactive visualization of a circle that follows the mouse cursor across an SVG canvas. The React application tracks mouse movement using a `useCallback` event handler, updating the circle’s position with each `clientX` and `clientY` coordinate. The circle is rendered as an SVG `<circle>` element, with its center bound to the stored mouse position state. The code showcases importing local ES6 modules and D3’s `arc` function for constructing geometric paths.

Jan 23, 2023

Loading thumbnail…

csv Loading and parsing csv data

This example demonstrates how to load and parse a CSV file with D3 v5, fetching CSS color data from a GitHub gist via `d3.csv()`. The code logs the parsed data array to the browser console, then displays a static “Hello HTML!” message in the page body. A commented-out section illustrates an alternative approach using the `fetch` API with `d3.csvParse()`, showing potential file size, row, and column counts. The example highlights the asynchronous nature of CSV loading and the standard D3 pattern for handling external data sources.

Jan 23, 2023

Loading thumbnail…

Intro_to_d3

This example displays a grid of identical cartoon faces rendered as SVG using React components. The faces are built from modular pieces like `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth path generated using the D3 `arc` generator with configured inner and outer radii and angles. D3 version 5 is loaded via UNPKG, and the code demonstrates ES6 module imports from local files as well as from the `d3` package. The `App` component maps over a `range` from D3 to produce multiple face instances.

Jan 20, 2023

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the modular capabilities of VizHub, importing data from a local ES6 module and using D3.js to render static SVG shapes. The page displays a hard-coded dataset of five cars, loaded via a promise and filtered by price using a custom report generator. The visualization features basic SVG primitives, including circles, rectangles, and lines, with D3's `select` API used to manipulate page elements, though the main output is a text report.

Jan 18, 2023