12 - If selection in d3.js

100%

12 - If selection in d3.js

✓ Published0🌍 Public

Last edited Oct 31, 2016

Created on Oct 31, 2016

A line chart displays stock closing prices over time, with each data point colored by value: red below 400, orange between 400 and 620, and green above 620. The d3.v3 code parses CSV data and uses `d3.svg.line` for the path, `d3.time.scale` for dates, and `d3.svg.axis` for scales. Hovering over a circle triggers a tooltip showing the date and closing price, linking to a URL.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/adry34160/'>adry34160</a>'s block: <a href='http://bl.ocks.org/adry34160/4e6492eba6a7a5f5958579103b11aeba'>10 - Simple d3.js tooltip</a>

forked from <a href='http://bl.ocks.org/adry34160/'>adry34160</a>'s block: <a href='http://bl.ocks.org/adry34160/5d7fe0af1c6ca50c28aaeb4905bfaba9'>11 - Filtering in d3.js</a>

gnuplot Licensed

Similar vizzes

Loading thumbnail…

11 - Filtering in d3.js

This example shows a time-series line chart of stock closing prices, with red circles highlighting data points below 400. The circles act as interactive tooltips, revealing the date and a link when hovered. Built with d3.js v3, the visualization uses d3.svg.line for the line path, d3.svg.axis for the axes, and d3.time.format for date parsing. The scatterplot circles are filtered using .filter(), and hover interactions trigger tooltip transitions via d3.select and .style. Data comes from a CSV file containing date, close price, and URL columns.

Aadry34160

86% match

Loading thumbnail…

10 - Simple d3.js tooltip

A line chart shows stock closing prices over time, with each data point marked by a circle. Hovering over a circle triggers an animated tooltip that displays the date, price, and a hyperlink to the associated URL. The visualization uses d3.v3 to parse CSV data, build the SVG path and axes, and manage the tooltip’s opacity and position via d3.event.pageX and pageY. The tooltip is styled as a rounded orange div, though mouseout behavior is commented out.

Aadry34160

83% match

Loading thumbnail…

1 - Simple d3.js Graph

This example plots a line chart of closing stock prices over time, with values read from a local CSV file containing date and close columns. The visualization uses D3.js v3 to create an SVG-based graph, employing `d3.svg.line`, `d3.time.scale`, and `d3.scale.linear` to map dates and prices to screen coordinates. It renders axes via `d3.svg.axis` with a bottom time axis and a left linear axis, while the line itself is drawn as a path with a steelblue stroke. The graph includes no interactive features or additional data layers, focusing solely on the basic line chart display.

Aadry34160

82% match

Loading thumbnail…

Using an 'if' statement in v6

This example combines a line chart and scatterplot to show stock closing prices over time, with circles colored red when the price is 400 or below and black otherwise. It uses d3.line to generate the line path, d3.scaleTime and d3.scaleLinear for the axes, and d3.axisBottom and d3.axisLeft to render them. Data is loaded from a CSV file via d3.csv and parsed with d3.timeParse. The coloring logic relies on an if statement inside the fill function.

Dd3noob

82% match

Loading thumbnail…

9 - Simple scatterplot with d3.js

This example visualizes stock closing prices over time using a combined line and scatterplot. The code plots each date’s close value as a small circle, with a steelblue line connecting the points to emphasize the overall trend. It uses d3.v3 with SVG rendering, employing d3.time.scale for the date axis and d3.scale.linear for the price values. The axes are generated via d3.svg.axis, while the line is drawn with d3.svg.line and the points are appended as SVG circle elements. Data comes from a local CSV file containing date and close columns.

Aadry34160

81% match

Loading thumbnail…

if selection in d3.js

This example demonstrates how to use an `if` statement within a D3.js data visualization to conditionally style elements. A scatterplot line graph displays stock closing prices over time from a CSV file, with each data point colored either red or black based on whether its value is below or above 400. The code uses the D3.js library to parse dates, create a time-scaled x-axis, apply a linear y-axis, and render both a line path and circular points via SVG.

Dd3noob

81% match

Loading thumbnail…

20 - Simple graph and table using d3.js

This example displays a time-series line chart of stock closing prices alongside a table of the same data. The SVG line graph uses d3.svg.line to plot dates against close values, with d3.time.scale and d3.scale.linear handling the axes. Below the chart, a table is generated with d3.select and data joins, rendering the raw CSV rows in a Courier font. The visualization reads from data.csv and uses d3.v3, with parsing via d3.time.format.

Aadry34160

80% match

Loading thumbnail…

Simple line graph in d3.js

This simple line graph plots stock closing prices over time from a CSV dataset with date and value columns. The visualization uses d3.v3 with an SVG canvas, a time-scaled x-axis, and a linear y-axis, rendering the data as a single steelblue path. The code demonstrates core D3 concepts including `d3.time.format` for date parsing, `d3.time.scale` and `d3.scale.linear` for coordinate ranges, and `d3.svg.line` to generate the line geometry from the parsed data points.

Aadamfknapp

80% match