Skip to main content
SimilarExport ZIP
100%

Hello VizHub

✓ Published1🌍 Public
JJoker-tr
Last edited Feb 10, 2020
Created on Feb 10, 2020
Forked from Hello VizHub

This example visualizes the rise and fall of technological expectations over time, plotting a line chart of closing values against yearly dates. Circle markers highlight each data point, while red text labels annotate the phase of the hype cycle, such as "Technology Trigger" and "Trough of Disillusionment." The chart uses d3.scaleTime and d3.scaleLinear to map data to SVG coordinates, with d3.line and d3.curveMonotoneX generating the smoothed path. Axes are rendered via d3.axisBottom and d3.axisLeft, and date parsing relies on d3.timeParse.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

exercise1

D3 v4 renders a time-series line chart tracking VizHub user growth from 2018 to 2022, annotated with key milestones like a Medium post and the 2.0 Kickstarter. The SVG visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line for the path. Circles mark each data point, while d3-svg-annotation adds contextual callouts, all styled with custom CSS for gridlines and axis labels.

Ttgrex6
78% match
Loading thumbnail…

Hello VizHub

This example visualizes the daily closing price of a financial asset over time as a smooth line chart. The visualization uses D3 v5 with a basisspline curve, rendered as an SVG path. It employs D3's `scaleLinear` and `scaleTime` for the axes, with an `axisBottom` and `axisLeft` that include gridlines. The chart also applies a custom color scheme for the line. The data is loaded from a local CSV file using D3's `csv` function and parsed for date and numeric values.

GGlenn Henshaw
76% match
Loading thumbnail…

Hello VizHub

This example displays two synchronized visualizations of borehole water-depth data: a bar chart and a scatter plot. Both graphs use color to distinguish data points marked as "Old" or "New," and hovering over a bar highlights the corresponding circle in the other chart with a green stroke. Both views are rendered as SVGs using D3 v5. The bar chart creates rectangles with `d3.scaleLinear` for the y-axis and `d3.axisRight` for tick marks, while the scatter plot uses circles with a left-aligned axis. Data is loaded from a CSV file and parsed with `d3.timeParse`.

SShane Carey
75% match
Loading thumbnail…

linechart

This line chart tracks the growth in cumulative unique logged-in VizHub users over time, from the platform’s launch in August 2018 through early 2023. It shows the overall upward trend, with annotations highlighting notable events such as a Medium post, the VizHub 2.0 Kickstarter, and the Datavis 2020 course launch. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` for the chart, and `d3.axisBottom` and `d3.axisLeft` for axes. It also uses the d3-svg-annotation library to add explanatory labels directly on the chart.

Yyoonsun lee
75% match
Loading thumbnail…

Hello VizHub

This example renders a time series line chart of stock closing prices from a CSV file, with dates on the x-axis and price on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator to draw the path within an SVG. Grid lines are added via tick sizing, and the chart includes axis labels. The data is loaded asynchronously with `csv` and parsed before rendering.

GGlenn Henshaw
75% match
Loading thumbnail…

Hello VizHub

This example shows effective rainfall over time as a scatter plot of rounded rectangles, with a smaller brushed overview chart for zooming. The main chart displays date on the x-axis and rainfall values on the y-axis, while the context chart uses circles and a brushX selection to filter the date range. It loads data from a CSV file and uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.brushX to render interactive SVG elements with opacity styling.

SShane Carey
74% match
Loading thumbnail…

VizHub User Count Over Time

This visualization tracks the growth of VizHub’s user base from its August 2018 launch through December 2019, using a time-series line chart with green circular markers for each recorded data point. The chart encodes date on the x-axis and cumulative user count on the y-axis, revealing a steady upward trend with more pronounced growth spikes in mid-2019. Built with D3 v4, it uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.line` with `d3.curveMonotoneY` for the smoothed line. Data is loaded from a local CSV file via `d3.csv`, with each row parsed into a `Date` object and numeric user count, then rendered as SVG paths and circles.

NNita
74% match
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
74% match