Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published0🌍 Public
Hh-siraj
Last edited Mar 13, 2021
Created on Mar 13, 2021
Forked from 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`.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

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
86% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple bar chart visualization created with D3.js, displaying data from a CSV file loaded from a GitHub repository. The code uses `d3.select` to append a paragraph to the page and `d3.csv` to fetch the dataset, then renders axes with `d3.axisBottom` and `d3.axisLeft`. The chart includes dollar-formatted tick labels on the y-axis and uses a height-based translation for proper positioning. The implementation relies on D3 v5, imported via ES6 modules, with the page structure defined in an HTML file and styling in a linked CSS stylesheet.

HHelen-Luwei-Zhang
85% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This fork of Hello VizHub displays a multi-series area chart rendered as SVG, with axes, tick labels, and a bold title. It loads D3 from UNPKG and uses `import` to access `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, `d3.axisBottom`, and `d3.axisLeft` for chart construction, while a local ES6 module supplies the message. The example demonstrates importing from both external and local modules.

Aamulyabhagwat1999@gmail.com
85% 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
85% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that draws two thick lines on an SVG canvas—a black line from (100,100) to (200,200) and a blue path from (200,200) to (400,450). It also displays the text “Hello VizHub!” centered in a div using D3’s `select` function. The code imports D3 v5 from UNPKG and a local ES6 module, showcasing modular JavaScript and basic SVG shape rendering.

SStolasIn
84% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, showing a static SVG icon and text element. The code imports the `select` function from D3 via ES6 modules and uses it to position the text at specified coordinates. The SVG is defined in the HTML with an embedded path for the VizHub logo, while styles are applied through an external CSS file. D3 v5 is loaded from UNPKG, and the visualization renders entirely as SVG without dynamic data or interaction.

PPiotr Paszek
84% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This example displays two D3.js v7 visualizations in a single SVG: a pie chart categorizing stock closing prices into three ranges and an area chart showing closing prices over time. The pie chart uses `d3.pie` and `d3.arc` with ordinal color scaling, while the area chart employs `d3.area` and `d3.scaleTime`/`d3.scaleLinear` axes. Both render from the same CSV dataset fetched via `d3.csv`, showing the date and closing price values.

Ssohith kampalli
84% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to set up a minimal visualization project using D3 v5 loaded from a CDN. It displays a single message in a div element, showing the basic structure of importing D3, local CSS, and an ES6 module bundle. The code uses the `d3` library via UNPKG and illustrates how to organize files for a VizHub project.

AAdam Usmani
83% match