Skip to main content
Log in
Z

zren2

@zren2·7 public vizzes

Loading thumbnail…

Borehole Dummy Data - Areachart

This visualization uses D3 v5 to plot borehole depth measurements over time as an interactive scatter plot. It displays dummy data approximating future GSI borehole data, with depth on the y-axis and formatted dates on the x-axis. The chart applies `d3.scaleLinear` for both axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and renders semi-transparent red circles via SVG. The data is loaded from an external CSV file using `d3.csv` and parsed with `d3.timeParse`.

Mar 16, 2019
Loading thumbnail…

Homework2(a1-cars.csv)-Zhenyong Ren

This scatterplot visualizes the relationship between horsepower and acceleration for a dataset of cars, with each circle representing an individual vehicle. The visualization uses D3 v5 to load CSV data, apply linear scales for both axes, and render the plot as an SVG. Custom axes are configured using `axisBottom` and `axisLeft` with grid lines, while labeled titles and axis labels clarify the chart’s purpose. The data comes from a remote `mpg.csv` file, and circles are styled with red fill and partial opacity.

Mar 14, 2019
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays population figures for the top 10 most populous countries, with data derived from the 2018 United Nations World Population Prospects estimate. The visualization customizes both axes: the y-axis removes its domain and tick lines, while the x-axis uses a `d3.axisBottom` scale with a tick format that converts gigayears to billions, and gridlines extend across the plot. The chart is rendered as SVG using D3 v5, with countries arranged on a `d3.scaleBand` y-axis and bars drawn as `rect` elements.

Mar 13, 2019
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays population figures for the top 10 most populous countries, with data derived from the 2018 United Nations World Population Prospects estimate. The visualization customizes both axes: the y-axis removes its domain and tick lines, while the x-axis uses a `d3.axisBottom` scale with a tick format that converts gigayears to billions, and gridlines extend across the plot. The chart is rendered as SVG using D3 v5, with countries arranged on a `d3.scaleBand` y-axis and bars drawn as `rect` elements.

Mar 13, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 to load CSV data, scale linearly for population values, and scale band for country categories. SVG rectangles are rendered with axes generated by d3.axisLeft and d3.axisBottom, with the data formatted by multiplying each population value by 1,000.

Mar 13, 2019
Loading thumbnail…

Scatter Plot

This scatter plot shows the relationship between vehicle horsepower and weight, with each circle representing a car from the provided dataset. The D3 v5 code uses `scaleLinear` to map the data to SVG coordinates, and `axisBottom` and `axisLeft` to generate the axes with gridlines. Data is loaded via `csv` from a remote URL, and the circles are rendered with a red fill and opacity. The chart includes axis labels and a title, styled through CSS.

Mar 13, 2019
Loading thumbnail…

Homework2(a1-cars.csv)-Zhenyong Ren

This visualization displays car data from the a1-cars.csv dataset, mapping acceleration values to horizontal bar lengths across car models. The chart uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for labels. Acceleration values are multiplied by 1000 before drawing, and bars appear in steelblue via `g.selectAll('rect')`.

Mar 13, 2019