wangqin2215

@wangqin2215·6 public vizzes

plot test

This scatter plot displays the relationship between temperature and a corresponding measure value from a small dataset. Two data points are plotted as circles using D3.js v5, with axes scaled linearly to fit the data range. The visualization reads from a CSV file and renders as an SVG, leveraging D3's selection and scale APIs (`d3.select`, `d3.scaleLinear`) to position the marks.

May 23, 2019

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 data set. Each red, semi-transparent circle represents a car, with its position determined by the d3.scaleLinear scales mapping horsepower and weight to the SVG canvas. The code uses d3.select, d3.csv, d3.extent, d3.axisBottom, and d3.axisLeft to load the data, compute domains, and render axes with grid lines. Axis labels and a title are added using SVG text elements.

May 23, 2019

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses D3.js to visualize the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between car attributes like horsepower, weight, and acceleration. Two dropdown menus allow users to select which columns map to the X and Y axes using the custom `dropdownMenu` function. The scatter plot renders as an SVG with animated transitions, using D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs to display axes and data points.

May 23, 2019

Loading thumbnail…

Ordinal Scatter Plot

This ordinal scatter plot displays the population of the top 10 most populous countries, using a linear scale for population on the x-axis and a point scale for country names on the y-axis. Data comes from the 2018 United Nations World Population Prospects estimate. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the chart. Circle radius is fixed at 18 pixels, with steelblue fill, and the population axis uses custom tick formatting to abbreviate large numbers with letters.

May 23, 2019

Loading thumbnail…

plot test

An empty SVG canvas is prepared for a chart, but the visualization itself is not implemented in the provided code. The page loads D3 v5.9.2, sets up a 960-by-500-pixel SVG element, and links to external styles and JavaScript files. While the current code shows only the setup, the structure indicates the intended chart would be drawn as vector graphics using D3’s selection and attribute methods. The data source and rendering approach are not yet defined in this partial example.

May 23, 2019

Loading thumbnail…

bar chart

This bar chart visualizes the population of continents in 2018, with population values and percentage shares for each region. The chart is rendered as an SVG using D3 v5, with data parsed from an embedded CSV string via `d3.csvParse`. The visualization displays six inhabited continents plus Antarctica, showing the dominance of Asia and Africa in global population distribution. The code defines the SVG dimensions and imports the CSV data, though the actual bar drawing logic is not present in the visible source files.

May 22, 2019