Skip to main content
Log in
M

Marcelo

@rolecram·14 public vizzes

Loading thumbnail…

Hotel occupation scatter Plot

This scatter plot shows hotel room occupation rates for six amenities (spa, pool, restaurant, bar, beach, gym) across user-selectable time zones or weekdays. The D3 v5 visualization loads CSV data and renders animated circles whose size reflects each amenity's capacity and whose color encodes the amenity type via `schemeCategory10`. A dropdown menu dynamically re-renders the scatter plot, switching between hourly and daily time domains using `scaleBand` and `scaleLinear` axes. Interactive tooltips display amenity and occupation percentage on mouseover, while the legend lists amenities sorted by capacity.

May 11, 2021
Loading thumbnail…

Javascript classes kill FB React

A scatterplot matrix displays hotel guest demographics and preferences, with one column per certified place. Each circle represents a guest, positioned by age range on the y-axis and jittered horizontally within their place's column. A mouseover on a bucket reveals a tooltip with totals, work and holiday counts, average age, and rate. Built with ECMA6 classes and d3-array v2, it uses a d3 scaleBand for age categories, d3.count and d3.sum for aggregations, and SVG transitions to animate circle placement. A dropdown filters by city, refreshing the data.

May 9, 2021
Loading thumbnail…

Hotel messenger traffic

This visualization shows hotel messenger traffic across five service categories (Superhost, Restaurant, Bar, Beach, Room Service) over one week, with lines and circles representing daily message volumes. The chart uses D3.js v5 classes including `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to build axes, while `d3.line` with `d3.curveMonotoneX` renders the paths. Interactive tooltips appear on mouseover, and circles are colored red or green based on incident versus resolve counts. The legend uses `d3.nest` to group categories, and the data is procedurally generated in `useData.js` for this React-based example.

May 9, 2021
Loading thumbnail…

Hotel checkin and checkout by Cities

A world map displays simulated hotel check-ins and checkouts across multiple cities, with circles sized by guest counts and colored to indicate business versus leisure travel. A time-brushing histogram below filters the map data by date range. Built with React and D3, the visualization uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.scaleSqrt` for mapping and scaling, while `d3.brushX` enables interactive temporal selection. Data is generated procedurally, simulating guest arrivals and departures over 20 days.

May 8, 2021
Loading thumbnail…

Fork of Hello VizHub

A line chart displays weekly message totals across four service categories, with individual data points for sent messages overlaid as circles and text labels. The visualization uses D3 v5 with SVG rendering, constructing scales via `d3.scaleTime` and `d3.scaleLinear`, drawing the line with `d3.line` and `d3.curveMonotoneX`, and generating axes through `d3.axisBottom` and `d3.axisLeft`. Data is randomly generated from predefined category ranges in the `useData.js` module.

May 1, 2021
Loading thumbnail…

Fork of Fork of Hello VizHub

A line chart tracks daily message counts over one week, with each day marked by a black-outlined circle and a blue "note" label. The visualization uses d3.line with curveMonotoneX to smooth the path, d3.scaleTime for the x-axis, and d3.scaleLinear for the y-axis. Data is generated randomly from category arrays and parsed dates, rendered as an SVG with styled axes and grid lines. The code imports custom axis classes to build the chart.

May 1, 2021
Loading thumbnail…

Fork of GraphLayout

A fork of a graph layout example renders a node-link diagram from imported CSV data, using D3.js v5 to position circles and connecting lines within an SVG canvas. The nodes are colored according to a categorical variable `k` from the data, using an ordinal color scale with a reversed RdYlGn scheme. The visualization supports zoom and pan interactions through a zoom handler that updates the SVG group's transform. The graph structure is defined by separate input and output CSV files containing edge connections and node coordinates.

Apr 17, 2021
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

A React scatter plot displays the Iris Dataset with interactive dropdown menus for selecting which attributes map to the X and Y axes. Two ReactDropdown components control the axes, updating the visualization through React state and re-rendering D3 scales created with `scaleLinear` and `extent`. The SVG chart uses reusable `AxisBottom`, `AxisLeft`, and `Marks` components for rendering ticks, labels, and circles with tooltips via the `<title>` element, styled with Poppins typography and a muted color palette.

Apr 13, 2021
Loading thumbnail…

Fork of [TEST] Pie Chart

A pie chart displays the percentage distribution of credit rating categories, with "AAA Local" dominating at 73.2% and other categories ranging from 2.2% to 8.3%. The SVG visualization uses D3 v5 APIs including `d3.pie` and `d3.arc` to generate the pie segments, while `d3.scaleOrdinal` maps a custom color palette to each category. A legend on the right pairs each color swatch with its label and numeric value, sourced from a JSON file where string values are converted to numbers before rendering.

Apr 12, 2021
Loading thumbnail…

Fork of Time Preference

This chart compares the cumulative net benefits of programs over time, contrasting the raw totals with values discounted by a 10% annual rate. It calculates these series via `d3.groups`, `d3.cumsum`, and `d3.extent`, then renders them as natural curves using `d3.line` with the `curveNatural` method. Dashed, semi-transparent lines depict the undiscounted sums while solid lines show discounted figures, with the SVG output built in React and scales from `d3.scalePoint` and `d3.scaleLinear`. Data is fetched from a CSV using `d3.csv`.

Apr 10, 2021
Loading thumbnail…

Fork of Stylized Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries, using a stylized teal color scheme and Poppins font. The chart is rendered as an SVG via React, with D3 v5 utilities for data loading and scaling. Axes are drawn using `scaleBand` for the categorical country names and `scaleLinear` for population, formatted with D3's `format` function to abbreviate billions as "B". Data comes from the UN World Population Prospects 2019 CSV.

Apr 9, 2021
Loading thumbnail…

Fork of Stylized bar chart

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, with bars colored teal and labeled with population values in billions. The visualization is rendered as SVG using React components, with D3 v6 handling the data loading and scales. The `csv` function fetches UN population data, `scaleBand` and `scaleLinear` position the bars, and the `format` function converts tick labels to abbreviated notation.

Apr 9, 2021
Loading thumbnail…

Fork of VizHub User Count Over Time

A line chart tracks VizHub's cumulative user count from its August 2018 launch through March 2021. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime` and `d3.scaleLinear` for the axes and `d3.line` to draw the path. Data points are marked with circles, and each includes a tooltip via SVG `title` elements. The chart also incorporates the `d3-svg-annotation` library, though no annotations are configured in the visible code, and the data comes from `users.csv`.

Apr 9, 2021
Loading thumbnail…

Fork of Iris Parallel Coordinate Plots

This interactive parallel coordinate plot visualizes the classic Iris dataset, with each line representing a flower sample and colored by species. Users can drag the four vertical axes (sepal length, sepal width, petal length, petal width) to reorder dimensions, which triggers a redraw of all polylines and axes. Built with D3 v4, the example uses `d3.scaleLinear` for each axis, `d3.scalePoint` for axis positioning, and `d3.line` to generate the paths, while `d3.drag` enables the interactive axis reordering.

Apr 5, 2021