Koundinya

@kndnya·8 public vizzes

Fork of D3 Starter

This example displays a simple bar chart constructed from a fixed JavaScript array of 25 numeric values. It demonstrates a minimal setup for D3 version 7 by using the d3.select and d3.append functions to create an SVG canvas, then the selectAll and data methods to generate rectangles for each data point. The bars are positioned horizontally with a fixed spacing and height proportional to each value, showing basic data binding and SVG rendering without any interaction or animation.

Dec 28, 2021

Loading thumbnail…

html

This example demonstrates a basic bar chart using the HTML div element as the visual container. The code binds an array of 25 numeric values to div elements via D3’s data join, appending each as a bar with a height proportional to its data value multiplied by five. The visualization relies on D3 v7’s selection and data-binding APIs, while the styling is handled through inline CSS height properties set via `.style()`. The bars are rendered inside a single root div, with no axes or scales, showing the minimal steps for creating a data-driven layout.

Dec 28, 2021

Loading thumbnail…

HTML

This example presents a scatter plot showing the relationship between automobile origin, model year, and vehicle name from the auto-mpg dataset. The visualization uses data fetched from a CSV file via `d3.csv()`, with points encoded by origin as both color and x-axis position, while the y-axis represents model year. The code leverages the vega-lite-api library to construct the specification, registering Vega and Vega-Lite, and includes tooltip functionality through the vega-tooltip `Handler`. The plot is rendered as an SVG with custom styling for readability.

Dec 28, 2021

Loading thumbnail…

TopoJSON

This visualization displays a world map rendered as a sphere using the TopoJSON format. The map shows country boundaries in blue with no fill, projected using the geoEqualEarth projection. The code loads geographic data from a gist, converts TopoJSON to GeoJSON using topojson’s `feature` function, and renders paths with d3’s `geoPath`, all within a React component drawing to SVG.

Dec 27, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars, with no axes or labels, using color intensity to encode population size. The visualization loads data from the United Nations World Population Prospects 2019 CSV file, filtering for countries with over 100,000 people. It uses React hooks (`useState`, `useEffect`, `useCallback`) to manage asynchronous data loading, and renders SVG rectangles via React. The chart employs `d3.csv` for parsing, `scaleBand` for vertical positioning, `scaleLinear` for bar widths, and `scaleSequential` with `interpolateOranges` for the color scale.

Dec 26, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst of CSS named colors, loaded from a CSV file, visualizes all entries as equal-width slices in a circular pie chart. The code uses D3 utilities `csv`, `arc`, and `pie` to parse and compute the arc geometry, while React manages the application state and renders each slice as an SVG `<path>` element. The fill color for each slice comes directly from the dataset's RGB hex values, with an opacity of 0.6. Loading state is shown with plain text before the chart appears.

Dec 26, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates the relationship between automobile origin, model year, and name using a scatterplot of the auto-mpg dataset. The visualization reveals patterns in vehicle attributes across different manufacturers and time periods. It combines the Vega-Lite API for declarative chart specification with D3’s `csv` loader for data ingestion. The code registers Vega, Vega-Lite, and vega-tooltip, then renders an interactive SVG with origin-based color encoding, tooltips, and a fitted, full-window layout.

Dec 26, 2021

Loading thumbnail…

CSS Colors

This example displays the text “CSS Colors” in a massive, centered font using CSS styling on a minimal HTML page. It fetches a CSV file of named color values from a GitHub gist via the Fetch API, then logs the raw text response to the browser console. The visualization is a simple demonstration of loading external data with JavaScript and rendering styled HTML, without any data-binding or charting library. The page relies entirely on native browser APIs and CSS for its presentation.

Dec 25, 2021