Millycc

@Millycc·6 public vizzes

Cars Scatterplot

This visualization displays Citi Bike trip data from 2020, comparing trip durations at both the start and end stations across different months. A scatterplot shows the correlation between these two duration measurements, with an interactive slider to filter by month, while a bar chart below displays the number of trips starting from each station. The visualization uses D3 v6 scales, axes, and SVG shapes for both charts, with data loaded from a CSV file and parsed into numeric values.

Nov 22, 2020

Loading thumbnail…

Test Bar chart

This bar chart displays the number of bike trips starting from each station in Jersey City for a selected month, based on the Citi Bike 2020 dataset. It uses a range slider to switch between monthly views. The visualization is built with D3 v5, using `scaleLinear` and `scaleBand` for axes, and `axisLeft` and `axisBottom` for rendering, with data loaded via `csv`.

Nov 22, 2020

Loading thumbnail…

Total Number of Rockets Throughout The Years

This bar chart shows the total number of rockets launched each year, using bar height to represent the absolute count of launches over time. The visualization aggregates the dataset from Kaggle's global space launches by grouping records by year and counting occurrences with `vl.groupby` and `vl.count` in vega-lite-api. The chart uses D3 v5 via `d3.csv` for data loading, while rendering is handled through vega-lite and vega with SVG output. Bars encode the count as quantitative values on the y-axis, with years on the x-axis, and tooltips provide exact counts for each year.

Nov 22, 2020

Loading thumbnail…

Tax Payers: Occupation Vs Income

This bar chart shows the number of bike trips starting at each station in Jersey City, with a slider to filter by month from January to September. It uses D3 v5 to load the CSV data with `d3.csv`, scale the bars with `scaleLinear` and `scaleBand`, and render the axes with `axisLeft` and `axisBottom`. The SVG is 800 by 900 pixels, with bars styled in steelblue and an interactive range input controlling the displayed month. The x-axis is labeled "station" and the chart title is "Bikers start from."

Nov 22, 2020

Loading thumbnail…

Interactive barChart (v12.11.20:00)

This interactive bar chart displays the number of park-and-ride parking spaces available in each Randstad city, sourced from NPR data. A checkbox filter toggles between showing individual parking garages and aggregated capacities per city. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear` and `scaleBand` for scales, `axisBottom` and `axisLeft` for axes. Bars animate in with a transition over one second, and the same transition updates, enters, and exits bars when the filter changes. The chart rotates x-axis labels for readability.

Nov 22, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The visualization uses D3 v5’s scaleLinear, scaleBand, axisLeft, and axisBottom to map population values to bar widths and country names to rows. The x-axis tick format abbreviates large numbers (e.g., converting gigas to billions), and gridlines are drawn via tickSize. Data is loaded from a CSV file using d3.csv, and the SVG bars are styled with steelblue fills.

Nov 22, 2020