B

battlescarredshogun

@battlescarredshogun·19 public vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis to render smooth, semi-transparent temperature trends per city. Colors are assigned via d3.scaleOrdinal with schemeCategory10, and a custom colorLegend module generates the interactive legend. d3.nest groups measurements by city, while axis labels and a title are added as SVG text elements.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Each city is represented by a distinct colored line, with a legend positioned to the right. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time, temperature, and city categories, respectively. Lines are generated with `d3.line` and `curveBasis` smoothing, while axes are rendered via `axisBottom` and `axisLeft`. Data is loaded from a CSV and nested by city using `d3.nest`.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of global temperatures across multiple cities, using colored lines to compare trends over time. The visualization uses D3 v5 with SVG rendering, employing `d3.nest` to group data by city and `d3.line` with `curveBasis` for smooth paths. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, while a custom color legend maps city names using `d3.scaleOrdinal` with `schemeCategory10`. Temperature data is loaded from a CSV file sourced from Data Canvas - Sense Your City.

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of automobile data from the UCI Auto MPG dataset allows interactive exploration by switching the X and Y axes via dropdown menus. Each circle represents a car, with color and opacity fixed by CSS. The visualization uses D3's `csv` loader, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` for axes. SVG circles animate with `transition().duration()` when the selected columns change, while `dropdownMenu` updates the menus.

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of automobile data from the UCI Auto MPG dataset allows interactive exploration by switching the X and Y axes via dropdown menus. Each circle represents a car, with color and opacity fixed by CSS. The visualization uses D3's `csv` loader, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` for axes. SVG circles animate with `transition().duration()` when the selected columns change, while `dropdownMenu` updates the menus.

Loading thumbnail…

Temperature In San Francisco - Line Chart

This line chart visualizes a week of temperature data in San Francisco, with a filled area under a smoothed curve showing temperature over time. The title “A Week in the Bay” and labeled axes for Time and Temperature frame the data, which is loaded from a CSV file. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate an SVG path, with `axisBottom` and `axisLeft` for the scales, and includes gridlines and axis labels styled via CSS.

Loading thumbnail…

Temperature In San Francisco - Line Chart

This line chart displays temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smooth maroon path on an SVG canvas. Data is loaded from a CSV file, parsed with timestamps as dates, and drawn with a grid of tick lines and rotated axis labels.

Loading thumbnail…

AutoMotor Plot: Model S

This scatter plot visualizes San Francisco temperature readings over a week, with time on the x-axis and temperature on the y-axis. It uses d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear for the scales, and d3.axisBottom and d3.axisLeft to render the axes with grid lines. Each data point is drawn as a teal circle using SVG. The chart includes custom axis labels and a title, with a clean, minimal design that highlights temperature variations throughout the period.

Loading thumbnail…

AutoMotor Plot: Model S

This scatter plot maps horsepower on the x-axis against weight on the y-axis for a dataset of cars from the auto-mpg CSV. Each semi-transparent teal circle represents a vehicle, with axes, gridlines, and descriptive labels rendered using D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft`. The SVG chart is built by appending circles and axis groups within a margin-based layout, with data parsed and converted to numeric values before rendering.

Loading thumbnail…

AutoMotor Plot: Model S

This scatter plot maps horsepower on the x-axis against weight on the y-axis for a dataset of cars from the auto-mpg CSV. Each semi-transparent teal circle represents a vehicle, with axes, gridlines, and descriptive labels rendered using D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft`. The SVG chart is built by appending circles and axis groups within a margin-based layout, with data parsed and converted to numeric values before rendering.

Loading thumbnail…

AutoMotor Plot: Model S

This scatter plot maps horsepower on the x-axis against weight on the y-axis for a dataset of cars from the auto-mpg CSV. Each semi-transparent teal circle represents a vehicle, with axes, gridlines, and descriptive labels rendered using D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft`. The SVG chart is built by appending circles and axis groups within a margin-based layout, with data parsed and converted to numeric values before rendering.

Loading thumbnail…

Jackscatterson Plottock

This visualization displays the population of the top 10 most populous countries from a 2018 United Nations estimate, with each country represented as a circle scaled along a linear axis. The y-axis uses a point scale for categorical country labels, and the x-axis shows population with custom tick formatting that abbreviates values (e.g., billions as "B"). The code uses d3.csv, scaleLinear, scalePoint, axisBottom, and axisLeft, rendering circles and axes as SVG elements. Styling and gridlines are customized through CSS.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red, semi-transparent circles represent individual vehicles, with axes labeled accordingly. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the plot, while data is loaded via `csv`. The SVG rendering includes custom axis labels and a title, with margins and tick formatting applied through D3’s selection and scale APIs.

Loading thumbnail…

Axel Rows

This example presents a horizontal bar chart of population figures for ten countries, using a CSV dataset where population values are multiplied by 1,000. It demonstrates custom axis configuration with D3 v5, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` to render the axes. The visualization renders as SVG, with steel-blue rectangles whose widths map to population and heights derived from the band scale’s `bandwidth`.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population by country, with bars scaled linearly along the x-axis and sorted alphabetically along the y-axis. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand to compute positions, and d3.axisLeft and d3.axisBottom to render the axes via SVG. The bars are appended as SVG rect elements with a steelblue fill.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the 2018 population estimates for the top 10 most populous countries, with data loaded from a local CSV file. Built with D3 v5, it uses `d3.csv`, `scaleLinear`, and `scaleBand` to map populations to bar lengths, while customizing `axisBottom` and `axisLeft` with tick formatting and removed gridlines. The chart’s SVG rendering includes a title, axis label, and steelblue bars, with a companion video tutorial explaining the construction process.

Loading thumbnail…

Making a Bar Chart

This example demonstrates the initial step of building a bar chart from a CSV dataset of country populations. The code loads data using D3’s `csv` method and logs it to the console, while an empty SVG element with fixed dimensions is prepared for rendering. The visualization currently shows no bars, only the data-loading foundation. It uses D3 v5’s `select` and `csv` APIs with an SVG-based rendering approach, leaving the actual chart construction for later development.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the 2018 population estimates for the top 10 most populous countries, with data loaded from a local CSV file. Built with D3 v5, it uses `d3.csv`, `scaleLinear`, and `scaleBand` to map populations to bar lengths, while customizing `axisBottom` and `axisLeft` with tick formatting and removed gridlines. The chart’s SVG rendering includes a title, axis label, and steelblue bars, with a companion video tutorial explaining the construction process.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors. It displays the file size in kilobytes, the number of rows, and the number of columns in a large text element. The visualization uses D3’s `d3.csv` method to fetch and parse the remote CSV, then `d3.csvFormat` to measure the data size. The code also includes commented-out alternative approaches using `fetch` with `async`/`await` and `d3.csvParse`.