Sunny-DV

@Sunny-DV·5 public vizzes

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and city miles per gallon for a dataset of cars from the UCI Machine Learning Repository. Each vehicle is represented by a symbol whose shape encodes its type (e.g., sedan, SUV) and whose color reflects its retail price, using a quantitative color scale. The plot is rendered as an SVG, with axes labeled and a tooltip area prepared for interaction. The implementation uses D3 v5, specifically `d3.scaleLinear` for axis scaling, `d3.scaleQuantize` for color encoding, and `d3.symbols` for categorical symbol shapes.

Nov 10, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each circle representing a vehicle. It reads data from a local CSV file (car1.csv) based on the UCI Auto MPG dataset, parsing numeric fields and rendering an SVG. The visualization uses d3.csv for data loading, d3.scaleLinear for both axes, and d3.axisBottom/axisLeft for ticks. Red semi-transparent circles are positioned using d3’s scale functions, with axis labels and a title added as SVG text elements.

Nov 10, 2019

Loading thumbnail…

Ordinal Scatter Plot

This example uses a scatter plot with an ordinal y-axis to show the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The code uses D3 v5’s `scalePoint` for the categorical country axis, `scaleLinear` for the population axis, and `axisLeft` and `axisBottom` to render grid lines and ticks. Circles are drawn using SVG, with population values parsed from a CSV and reformatted in billions.

Nov 10, 2019

Loading thumbnail…

Bar chart

This bar chart visualizes the relationship between a car’s retail price and its city miles per gallon, with each bar representing a vehicle from the cardata.csv dataset. The chart uses D3 v5 to load the CSV data and render the visualization as an SVG. Axis labels and titles are styled using CSS classes, while the bars themselves are positioned and scaled based on the data values. The example demonstrates how D3’s `csv` method loads external tabular data for chart construction.

Nov 10, 2019

Loading thumbnail…

Making a bar chart

This example demonstrates a minimal bar chart using D3.js version 5 within a Vue.js framework. It loads car specification data from a local CSV file using the `csv` function and logs the parsed data to the console. The visualization itself is not implemented; instead, the code sets a text message using `select` and serves as a template for building charts with the D3 API.

Nov 10, 2019