Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published2🌍 Public
MMarcelo
Last edited May 1, 2021
Created on Apr 29, 2021
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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.

MMarcelo
91% match
Loading thumbnail…

Fork of Hello VizHub

This visualization displays the number of messages and shares over time as a grouped bar chart. The data, spanning from July 2020 to July 2021, is rendered as SVG with D3.js v5. It leverages `d3.scaleBand` for the axes and `d3.scaleOrdinal` for colors, with interactive tooltips on mouseover. The chart includes rotated x-axis labels and a legend, while the code imports `select` from D3 and uses local modules and a CDN-loaded D3 library.

Mmegshe
83% match
Loading thumbnail…

Fork of Hello VizHub

This visualization shows sales figures across different product categories as a filled area chart. The SVG is rendered using D3 v7, with a steelblue area path encoding values through the vertical axis. The chart loads its data from a public GitHub gist and uses D3's `d3.json` to parse it, `d3.scalePoint` and `d3.scaleLinear` for axes, and the `d3.area` generator for the path. Axis ticks are added via `d3.axisBottom` and `d3.axisLeft`, with manually placed text labels.

Ssairohithchada@gmail.com
80% match
Loading thumbnail…

Fork of Hello VizHub

This area chart visualizes a dataset loaded from a CSV file hosted on GitHub. The chart displays values over time, with dates parsed via `d3.timeParse` and a linear scale for the y-axis. The area path is generated using `d3.area` and rendered as a steelblue SVG path. Axes are created with `d3.axisBottom` and `d3.axisLeft`, and the chart is built with D3 v7.

SSeema Shrestha
79% match
Loading thumbnail…

Fork of Hello VizHub

A stacked bar chart visualizes regional sales across three product categories, with each bar showing total value per region and segments colored by category. The visualization loads data from a CSV file and renders SVG graphics using D3 v7, employing `d3.csv` for data parsing, `d3.scaleBand` and `d3.scaleLinear` for positioning, and `d3.stack` to compute stacked series. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while regions are ordered alphabetically on the vertical axis.

KKhushi Desai
78% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates D3.js version 5 charting within a minimal VizHub template, rendering a time-series line chart of stock data loaded via CSV. It shows the construction of an SVG visualization with time-scaled x-axis and linear y-axis, using `d3.svg.axis` for tick marks and `d3.svg.line` for the data path. The code imports D3 functions via UNPKG and local ES6 modules, with the chart styled through inline CSS. The data is parsed with `d3.time.format` and scaled with `d3.time.scale` and `d3.scale.linear`.

Hh-siraj
78% match
Loading thumbnail…

Fork of Hello VizHub

This example shows an area chart of time-series data from a diabetes CSV file, with a steelblue fill and labeled axes for date and value. It loads D3 via UNPKG and uses the `d3.csv` method to fetch the data, `d3.scaleTime` and `d3.scaleLinear` for scaling, `d3.area` for the area shape, and `d3.axisBottom` and `d3.axisLeft` for axes. The visualization also demonstrates ES6 module imports, including a local `message` module that sets text in the page, while the chart is rendered as SVG inside a dedicated `#chart` div.

LLakshmiPrasannaValdas@my.unt.edu
77% match
Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub demonstrates three linked D3.js visualizations. It shows total sales by brand and region in a bar chart, units sold versus sales in a scatter plot, and profit alongside average price in a multi-series chart with bars and a line. The code uses `d3.csv` to load a remote dataset and `d3.scaleBand`, `d3.scaleLinear`, `d3.rollups`, and `d3.schemeTableau10` to bind data to SVG rects, circles, and a path via `d3.axisBottom` and `d3.axisLeft`. A dual y-axis is implemented for the final chart.

Aankitgoudpoodhari07@gmail.com
77% match