My first block

100%

My first block

✓ Published0🌍 Public

Last edited Oct 17, 2017

Created on Oct 17, 2017

This block displays a closing stock price time series as a blue line with circular markers for each data point. It uses D3.js to render the visualization as SVG, with axes, tooltips on hover, and a smooth color/size transition on mouseout. The chart reads from a CSV file and parses the date column using a time format.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/9abcbd7dde3ebbc12d6d0eabf2ee2843'>My first block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A single blue line traces Amazon's daily closing stock price from July to February, showing a gradual rise with notable dips and peaks. The SVG chart includes labeled axes for date and price in dollars. Built with D3.js v3, it loads data from a CSV file, uses `d3.time.scale` and `d3.svg.line` to map the temporal and linear values, and renders the line and axes via SVG paths within a viewBox.

KKacieW

77% match

Loading thumbnail…

Simple d3.js Graph

This simple d3.js graph displays a time series of closing stock prices from a CSV file, with dates on the x-axis and values on the y-axis. Rendered as an SVG line chart, it uses d3.svg.line, d3.time.scale, and d3.scale.linear to map the data, while d3.svg.axis generates the axes. The data.csv file contains 26 daily entries from March to May 2012, positioned within a 600×270 pixel canvas with margins. The code also applies a steelblue stroke to the line and grey axis lines via CSS.

Dd3noob

75% match

Loading thumbnail…

fresh block

The visualization shows a time-series area chart of stock prices, with the area colored red for values above 150 and blue for values below 150, highlighting threshold crossings. It uses D3.js (v3) with `d3.svg.area()`, `d3.time.scale()`, and `d3.svg.axis()` to render the SVG. Data is loaded from an external TSV file and parsed with `d3.time.format`. The code splits the dataset into contiguous segments based on the price threshold, then draws each segment as a separate colored area path. Axes are added for time and price, with the y-axis labeled “Price ($)”.

AAaronWitter

75% match

Loading thumbnail…

Simple Line Graph v7

This chart displays the closing price of a stock over time from late March to early May 2012, using a single blue line. It renders data from a CSV file as an SVG path, with the x-axis showing dates and the y-axis showing price values. The code loads the data via `d3.csv`, parses dates with `d3.timeParse`, scales the axes with `d3.scaleTime` and `d3.scaleLinear`, and draws the line using `d3.line`. It appends axes with `d3.axisBottom` and `d3.axisLeft` to complete the visualization.

Dd3noob

74% match

Loading thumbnail…

Simple line graph in d3.js

This example shows a simple line graph plotting stock closing prices over time, with date values on the x-axis and price on the y-axis. The visualization uses D3.js version 3.5.17, employing `d3.time.scale` for the date range, `d3.scale.linear` for the value axis, and `d3.svg.line` to generate the path. Data is loaded from a local CSV file via `d3.csv`, with the axes created through `d3.svg.axis`. The SVG rendering includes styled axis lines and a steelblue line, providing a minimal teaching example for D3 chart construction.

Dd3noob

71% match

Loading thumbnail…

My First Block

Golodhros' first block is a minimal webpage that loads D3 version 3 and logs a simple greeting to the browser console. The page displays a static title, "Golodhros first block," and a styled header using the Open Sans font, but it does not render any chart or visualization. The JavaScript defines a custom `d3.unconf` function that prints "Golo!" to the console, and then calls it immediately. The example demonstrates how to set up a basic D3 project structure with separate HTML, CSS, and JavaScript files, though it contains no data or visual output beyond the text elements.

GGolodhros

71% match

Loading thumbnail…

fresh block

A line chart displays monthly values over time, with each data point shown as a semi-transparent grey circle. Hovering a circle highlights it in red, displays the numeric value as text, and draws a dashed vertical guide line to the baseline. The visualization uses D3 v4 with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.json` to load and render the dataset, while `d3.select` and `transition` manage the interactive hover effects in an SVG container.

MMilowB

71% match

Loading thumbnail…

fresh block

This example visualizes multiple time-series lines from a weather dataset, with each line representing a different category (`symbol`) and showing how a price-like value changes over time. The visualization uses D3 v3 to load CSV data, parse date strings with `d3.time.format`, and render the lines using `d3.svg.line`. A categorical color scale (`d3.scale.category10`) assigns distinct colors to each line dynamically, and the lines are drawn on an SVG canvas with a time-based x-axis and linear y-axis. The code nests the data by symbol using `d3.nest`, then appends a separate path for each group, highlighting the trend patterns across categories.

DDarienLiang

71% match