TCSMFrogdance

@TCSMFrogdance·9 public vizzes

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries in 2019 as a horizontal bar chart, with country names on the y-axis and population on the x-axis. The visualization uses React components to render SVG bars, axes, and labels, leveraging D3 scales such as `scaleBand` and `scaleLinear` for positioning. Data comes from the United Nations World Population Prospects, loaded via `d3.csv` and formatted with `d3.format` for tick labels. The chart includes styled gridlines, axis text, and a loading state, with tooltips showing exact population values.

Jun 16, 2021

Loading thumbnail…

test

This example presents a bar chart of sales figures for nine retail stores, sourced from a JSON file. The visualization encodes each store’s sales value as a horizontal bar’s width, with a fixed height and blue fill. Built with D3 v4, the code loads the data via `d3.json`, then appends SVG rectangles to a canvas using the `data`, `enter`, and `append` methods, mapping the `Sales` field to a scaled width.

May 30, 2021

Loading thumbnail…

Fork of Making a Bar Chart

This example visualizes the population of the 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. Horizontal bars represent each country’s population, with a linear scale mapping values to bar width and a band scale positioning rows. The SVG chart is built with d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, while data is loaded asynchronously from a JSON file. The chart renders static bars and axes with no interactivity, styled via a linked CSS file.

May 30, 2021

Loading thumbnail…

rank

An interactive scatter plot displays relationships among car attributes from the Auto MPG dataset. Dropdown menus allow users to select which of the dataset’s numeric columns—such as horsepower, weight, or acceleration—map to the plot’s X and Y axes. The visualization uses D3’s `scaleLinear`, `axisBottom`, and `axisLeft` for the coordinate system, while a custom `dropdownMenu` component handles column selection. When the mapping changes, circles animate to their new positions over two seconds, with a staggered delay per point.

May 12, 2021

Loading thumbnail…

Fork of Fork of Scatter Plot with Menus

This interactive scatter plot from the Auto MPG dataset lets users explore relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus dynamically reassign the X and Y axes, triggering a new scatterPlot rendering with animated circle transitions. The code uses D3 v5 modules including `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration(2000).delay()`, alongside a custom `dropdownMenu` component. SVG circles transition from the center to their new positions, with axis labels updating to reflect selected columns.

May 12, 2021

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, with dropdown menus letting users choose which columns map to the x- and y-axes. The visualization uses D3 v5 to render SVG circles, with animated transitions repositioning points smoothly when axis selections change. The code leverages `d3.csv` for data loading, `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for tick marks, and custom dropdown menu logic built with standard HTML `<select>` elements. Axis labels update dynamically to reflect the selected columns.

May 12, 2021

Loading thumbnail…

Rank Chart Plot with Menus

This interactive scatterplot lets users explore the relationship between any two numeric columns from the auto-mpg dataset by selecting variables from two dropdown menus. The plot renders red, semi-transparent circles for each car model, with axis labels updating dynamically to reflect the chosen columns. Built with D3 v5, the visualization uses `csv` to load data, `scaleLinear` and `extent` for scaling, `axisLeft` and `axisBottom` for axes, and a custom `dropdownMenu` component that binds `select` elements. The SVG rendering updates in place whenever a menu selection changes.

May 12, 2021

Loading thumbnail…

Rank Chart with Menus

This visualization displays a rank chart comparing two selected data attributes from a CSV dataset, with dropdown menus controlling which fields appear on the x- and y-axes. The SVG rendering uses D3 v5 to plot data points as semi-transparent red circles, with axis ticks and labels styled via CSS. The example demonstrates a reusable `dropdownMenu` function that creates HTML select elements with options from the dataset’s column headers. The underlying data includes sales figures by person, store, country, and region, loaded from an external CSV file.

May 12, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page that displays the text "Hello HTML" centered in the browser, with a font size of 13em defined via inline CSS. The page also runs a JavaScript script that logs the message "Hello JavaScript!" to the browser’s developer console. It demonstrates a bare-bones setup using raw HTML, CSS in a `<style>` block, and a `<script>` tag, requiring no external libraries or frameworks.

May 12, 2021