Skip to main content
Log in
J

jingwg3@163.com

@Wzhudou·13 public vizzes

Loading thumbnail…

Fork of IMDb Movie ratings

This visualization uses a stacked bar chart to show the percentage of movies within six genres across five rating bands, from below 5.0 to above 8.5 on IMDb. Each bar is segmented into colored strips representing a rating category, with the full bar totaling 100% for the genre. The chart is built with D3 v7, using `d3.stack()` on the CSV data to compute the stacked segments, `d3.scaleBand` for the y-axis categories, and `d3.scaleLinear` for the percentage x-axis. Hovering over any rectangle triggers a tooltip that displays the exact percentage for that genre-rating combination via `d3.select` and event handlers. Text labels are rendered as SVG elements, and the chart is styled with custom CSS importing the Yanone Kaffeesatz font.

Dec 12, 2023
Loading thumbnail…

test v3

This example demonstrates a minimal D3.js v3 setup within a VizHub environment, showing an ordinal scale with padded range bands and a plain-text message rendered on the page. It loads D3 via UNPKG, imports the `select` function from the `d3` module, and defines a local ES6 module for the message string. The page displays the message using CSS styling, while the console logs the computed `rangeBand()` value from the ordinal scale.

Dec 1, 2022
Loading thumbnail…

Scatter Plot with Menu

This interactive scatter plot displays the relationship between various car attributes, such as horsepower and weight, using data from a CSV file. A dropdown menu allows users to select which attribute is plotted on the x-axis. The visualization is built with D3 v5, using SVG for rendering and animated transitions for the circles. The code specifically utilizes D3's `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` to load data and render the chart, with a `dropdownMenu` component driving the dynamic updates.

Oct 13, 2022
Loading thumbnail…

World Population Area Chart

This area chart displays global population growth from 1950 to 2015 using an SVG canvas. The visualization employs D3.js v5 with a time-scaled x-axis and linear y-axis formatted in billions, with the population data drawn as a smoothed maroon area using `d3.area` and `d3.curveBasis`. The chart includes labeled axes, a title, and a grid created through D3’s `scaleTime`, `scaleLinear`, and `axisBottom`/`axisLeft` APIs, with data loaded from a CSV file.

Sep 21, 2022
Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart shows the temperature in San Francisco over a week, with time on the x-axis and temperature in degrees on the y-axis. The chart is rendered as an SVG using D3 v5, with data loaded from a CSV file via `d3.csv`. The visualization uses `d3.scaleTime` and `d3.scaleLinear` for the axes, and `d3.area` with a basis curve to draw the filled area. Axis labels and a title are added using SVG text elements.

Sep 21, 2022
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes hourly temperature readings in San Francisco over a week in March 2015. The SVG graphic uses a smooth curved line to show temperature fluctuations from roughly 16 to 27 degrees Celsius. The visualization is built with D3 v5, employing `csv` to load the data, `scaleTime` and `scaleLinear` for axes, and `d3.line` with `curveBasis` for the path. Axis labels, tick marks, and a title provide clear context for the temporal trend.

Sep 21, 2022
Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays hourly temperature readings in San Francisco over a week, using a blue circle per data point positioned by time on the x-axis and temperature on the y-axis. The visualization uses D3 v5 with an SVG rendering, employing d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for tick marks, and d3.csv to load the timestamp-temperature pairs from the included CSV file.

Sep 21, 2022
Loading thumbnail…

cars scatter plot

This scatter plot shows the relationship between horsepower and weight for a dataset of cars, with each point representing a vehicle. The visualization uses D3.js (v5) to load CSV data and render an SVG chart with linear scales for both axes. The code employs `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` functions to construct the plot, with circles colored red and semi-transparent. Axis labels, a title, and grid lines are included via D3 axis methods and appended text elements.

Sep 20, 2022
Loading thumbnail…

scatter plot

This scatter plot displays the populations of the top ten most populous countries, with each circle representing a country along a categorical y-axis and its population on the linear x-axis. The visualization uses D3 v5 to load CSV data, scaleLinear and scalePoint for positioning, and axisBottom/axisLeft with tick formatting. Circles are rendered as SVG elements, with a title and rotated axis labels clarifying the data source, which lists countries and their populations in thousands.

Sep 20, 2022
Loading thumbnail…

Fork of Customizing axes of a bar chart

This horizontal bar chart ranks the top 10 most populous countries, using population values derived from a CSV file where the raw numbers are multiplied by 1,000. Built with D3 v5, it employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical y-axis labels, and custom axis tick formatting via `d3.format` to display abbreviations like "B" for billions. The SVG rendering includes a title, rotated axis labels, and styled grid lines and ticks.

Sep 19, 2022
Loading thumbnail…

Customizing axes of a bar chart

This example displays a horizontal bar chart of the ten most populous countries, using a CSV dataset. It customizes both axes by removing domain lines, adding grid lines via tick sizing, and formatting population values with the `d3.format` method to abbreviate billions. The chart also includes labeled axis titles and a main title, all rendered with SVG elements and styled through CSS. The implementation uses D3 v5 functions like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, with margins defining the inner plot area.

Sep 19, 2022
Loading thumbnail…

making a bar chart

This example shows a horizontal bar chart ranking the populations of ten countries, from largest to smallest. The visualization uses a linear scale to map population values to bar widths and a band scale to position the categorical country labels, with axes rendered using d3.axisBottom and d3.axisLeft. The SVG is drawn using D3 v5, with data loaded from a CSV file via d3.csv and population values converted to numbers before rendering. Bars are appended as SVG rect elements with a steelblue fill.

Sep 18, 2022
Loading thumbnail…

start

This example demonstrates a simple asynchronous data-loading workflow in a VizHub project. It shows a “loading…” message that is replaced only after a simulated two-second delay, using a promise returned by the `getCars` function. The code exercises local ES6 module imports, importing `getCars` from a separate file, and imports D3 via a CDN script tag in the HTML. The loaded car objects are logged to the console, while the initial message element is updated using plain DOM text assignment.

Sep 13, 2022