celtic660

Mass/Height

This visualization prints a summary of a dataset containing the mass and height of 500 people, along with their gender, sourced from Kaggle. It loads the CSV file using D3’s `csv` function, then displays the row count, column count, and estimated file size in kilobytes via `csvFormat`. The interface presents the first 100 rows as pre-formatted JSON text on a black background with green terminal-style text. The code relies on D3 v5’s `select`, `append`, and `text` methods to build the output without any graphical chart.

Dec 5, 2018

Mass/Height

This example prints a summary of a dataset containing the mass and height of 500 people, along with their gender. It displays the row and column counts, the estimated file size in kilobytes, and the first 100 rows as formatted JSON. The code loads the CSV from a Kaggle-sourced URL using `d3.csv`, then uses `select` and `append` to render the text into `<pre>` elements, with `csvFormat` calculating the data size.

Dec 5, 2018

Mass/Height Menu

This interactive scatter plot from the Auto MPG dataset (UCI Machine Learning Repository) lets users select which columns to map to the X and Y axes via dropdown menus. Using D3 v5, the visualization updates the axes and animates data points smoothly into their new positions as selections change. The code leverages `scaleLinear`, `axisBottom`, `axisLeft`, and transition methods to render SVG circles. The animation uses `transition().duration(200)` and per-point delays, with the dropdowns built through a reusable `dropdownMenu` component.

Mass/Height Menu

This interactive scatter plot from the Auto MPG dataset (UCI Machine Learning Repository) lets users select which columns to map to the X and Y axes via dropdown menus. Using D3 v5, the visualization updates the axes and animates data points smoothly into their new positions as selections change. The code leverages `scaleLinear`, `axisBottom`, `axisLeft`, and transition methods to render SVG circles. The animation uses `transition().duration(200)` and per-point delays, with the dropdowns built through a reusable `dropdownMenu` component.

Mass/Height Menu

This interactive scatter plot from the Auto MPG dataset lets users explore relationships between numeric car attributes by selecting X and Y columns from dropdown menus. The visualization updates dynamically with a 2-second animated transition, using D3 v5’s scaleLinear, axisBottom, axisLeft, and transition methods. Each circle represents a car, colored red with opacity, while dropdown menus are built using a reusable dropdownMenu function that binds to HTML select elements. Data loads from a CSV file containing car specifications, offering flexible comparison across all numeric columns.

Car Sales

This example displays a text-based summary of a car dataset. It outputs the number of rows, columns, and file size in kilobytes, followed by the first 100 rows in JSON format. The visualization uses D3’s `select` and `csv` functions to load data from a UCI Machine Learning Repository dataset, and renders the output as black-and-green monospaced text. The code relies on `csvFormat` to calculate the data size.

Car Sales

This example displays a text-based summary of a car dataset. It outputs the number of rows, columns, and file size in kilobytes, followed by the first 100 rows in JSON format. The visualization uses D3’s `select` and `csv` functions to load data from a UCI Machine Learning Repository dataset, and renders the output as black-and-green monospaced text. The code relies on `csvFormat` to calculate the data size.

Scatter Plot with Menus

This interactive scatter plot displays car data from the UCI Machine Learning Repository Auto MPG dataset. Dropdown menus let users choose which numeric columns map to the X and Y axes, with the plot updating through animated transitions. Built with D3 v5, the visualization uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while a custom `dropdownMenu` module handles the selection controls. SVG circles render with opacity, and the code leverages `transition().duration()` and `.delay()` to animate points as the selected variables change.

Mass/Height

This example displays metadata about a car dataset, including row count, column count, and size in kilobytes, followed by a JSON preview of the first 100 records. It uses D3 v5’s `csv` method to load the data from a VizHub URL and `csvFormat` to calculate the kilobyte size. The output is rendered as plain text in `pre` elements, with a terminal-style black background and green monospace styling.

500 Weight/Height

This example displays a plain-text summary of a dataset containing Norwegian new car sales by model. It shows the total number of rows, columns, and file size in kilobytes, followed by the first 100 rows formatted as JSON. The code uses d3.csv to load the data from a VizHub-hosted CSV file, then appends the summary and data to the page using d3.select and append. The dataset comes from the UCI Machine Learning Repository, though the visualization is an early iterative check rather than a finished chart.

Scatter Plot with Menus

This scatter plot displays car data from the UCI Machine Learning Repository Auto MPG dataset, letting users select which columns to map to the X and Y axes via dropdown menus. The plot uses d3.csv to load data, d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom for scaling and axes, with SVG circles rendered at 10px radius. Menu interactions trigger transitions that animate each circle’s position over 2 seconds with staggered delays. Axes labels update dynamically based on the selected columns, and the visualization includes tick gridlines and rotated Y-axis text.

Weigh/Height Comparison on Gender

This scatter plot compares weight and height across genders, with each red circle representing an individual’s measurements. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes and gridlines, while `csv` loads the gender weight and height dataset from VizHub. The SVG rendering emphasizes correlation patterns, though gender differentiation is not visualized despite the title. Data preprocessing converts string values to numbers via unary plus operations before plotting.

Scatter Plot with Menus

This interactive scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which columns map to the X and Y axes via two dropdown menus, built with a reusable `dropdownMenu` function. The plot uses D3 v5 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` for scaling and axes. Circles are rendered with SVG and animate into position via `transition().duration(2000)` with staggered delays, while axis labels reflect the current column selections.

Nov 30, 2018

Weigh/Height Comparison on Gender With Menus

This scatter plot compares height and weight across gender, using data loaded from a CSV file. It includes dropdown menus for filtering by category, though the menu options are placeholders. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while circles represent individual data points. The chart is defined within a single `render` function that attaches to a pre-selected SVG element.

Nov 30, 2018

Weigh/Height Comparison on Gender

This scatter plot compares weight and height across genders, with each red circle representing an individual’s measurements. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes and gridlines, while `csv` loads the gender weight and height dataset from VizHub. The SVG rendering emphasizes correlation patterns, though gender differentiation is not visualized despite the title. Data preprocessing converts string values to numbers via unary plus operations before plotting.

Nov 29, 2018

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes such as horsepower, weight, and acceleration. Two dropdown menus let users select which columns map to the X and Y axes, with the plot smoothly transitioning to show the new relationship. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, alongside SVG circles with animated transitions. The reusable `dropdownMenu` and `scatterPlot` modules handle updates, and the code leverages D3’s `csv` loading and data-binding patterns.

Nov 28, 2018

Weigh/Height Comparison on Gender

This scatter plot visualizes the relationship between height and weight across genders using a dataset from UCI Machine Learning Repository. The visualization displays individual data points as semi-transparent red circles, with height mapped to the x-axis and weight to the y-axis using D3 v5’s `scaleLinear` functions. The code employs D3’s `csv` loader to fetch external data, `axisBottom` and `axisLeft` for tick marks, and SVG circle elements for rendering. Axes labels and a title are added to clarify the quantitative comparisons shown.

Weigh/Height Comparison on Gender

This scatter plot compares height and weight across genders, with each circle representing an individual and color-coded by gender. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map data from a CSV file onto an SVG canvas. Points are rendered as semi-transparent red circles, with axes labeled “Height” and “Weight” and a title “Height/Weight.” The code loads data from VizHub, parses numeric fields, and applies margins and tick formatting to create a clean, readable chart.

500 Weight/Height

This example displays a plain-text summary of a dataset about cars sourced from the UCI Machine Learning Repository’s Auto MPG Data Set. The visualization reports the total number of rows, columns, and file size in kilobytes, followed by a JSON-formatted listing of the first 100 rows. It uses the `d3.csv` and `d3.csvFormat` APIs to fetch and measure the data, then appends the output to the page using the `select` method, with styling defined in a separate CSS file.

500 Weight/Height

This example displays a table summary of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing row count, column count, and file size in kilobytes. It also renders the first 500 rows as formatted JSON text. The visualization uses `d3.csv` to load the data, `csvFormat` to calculate byte size, and `select` to append `<pre>` elements displaying the summary and data in a terminal-style monospace layout. The black background and green text evoke a classic command-line interface.

Population in Different Countries

This line chart shows one week of temperatures in cities around the world, using a multi-line layout where each city is a colored path. The visualization orders the lines by their final temperature value and includes a color legend for city identification. The code uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, d3.nest, and d3.axisBottom/axisLeft, rendering SVG with a custom colorLegend function. Data originates from the Data Canvas - Sense Your City dataset.

Nov 26, 2018