Tell us what works and what could be better. We read every submission.
@adry34160·30 public vizzes
This visualization shows a dual-encoding time series of quantities across dates, combining a purple line chart with overlaid scatter points to highlight individual data values alongside the overall trend. The chart uses a time-based x-axis with four-interval ticks and a measure-based y-axis, rendered as SVG. It loads tab-separated data via d3.tsv and constructs the chart with dimple.js, adding both dimple.plot.line and dimple.plot.scatter series to a single dimple.chart instance, with the series color styled through CSS.
A world map rendered as a light blue Mercator projection with black country borders, overlaid with orange bubbles that summarize attendance at World Cup matches by year. Each bubble is positioned at the average coordinates of the matches in that year, and its size encodes the total attendance using a square-root scale. The visualization uses D3 v3 to load GeoJSON country boundaries and a TSV dataset of match locations, aggregates attendance by year via nested rollups, and plots the resulting bubbles on an SVG map.
This visualization displays World Cup match attendance on a Mercator projection world map. The geographic outlines are rendered as SVG paths from a GeoJSON file, with each country filled in light blue. Attendance data from a TSV file is grouped by year, and for each year, the geographic coordinates of host cities are averaged to determine a central point. The total attendance for that year is then represented as an orange bubble, with its radius scaled using a square-root scale proportional to attendance. Bubbles are semi-transparent with black strokes, allowing viewers to compare attendance across World Cup years at a glance. The visualization uses a fixed map scale and translates the projection to center the map within the SVG canvas. Data is loaded asynchronously using D3 v3, with geographic boundaries drawn from a GeoJSON world map and attendance values parsed from a tab-separated file. The bubble positions are calculated as the mean projected coordinates of the host cities for each tournament year.Mercator Map with Bubbles is an SVG-based D3 visualization that combines a light-blue Mercator world map with orange, semi-transparent bubbles. Each bubble represents total attendance for a World Cup tournament year, positioned at the average coordinates of the host cities. Bubble size is scaled by the square root of attendance, allowing quick comparison of relative magnitudes across tournaments. The map is rendered using D3 v3 and data from a GeoJSON world map and a TSV of World Cup attendance.
A world map rendered with a blue fill and black country borders, generated using a D3 Mercator projection. The visualization loads a GeoJSON file of world countries and draws each country as an SVG path element, with the projection scaled and translated to center the map. The example demonstrates a minimal setup for D3 v3 geo mapping, using `d3.geo.mercator()` and `d3.geo.path()` to convert geographic coordinates into SVG paths.
This visualization plots World Cup match attendance from 1934 onward as a scatterplot, with date on the x-axis and attendance on the y-axis. Each circle represents a match, with red and enlarged circles indicating games where the host nation was one of the competing teams, while blue smaller circles represent all other matches. The chart includes a legend distinguishing home-team games from others, along with labeled axes. Data is loaded from a TSV file and rendered using D3.js for the SVG layout and scales, while dimple.js is loaded but not used for the chart construction. The visualization highlights attendance patterns over time and emphasizes matches involving the host country.
This visualization plots World Cup match attendance over time, with each match represented as a circle positioned by date on the x-axis and attendance on the y-axis. Red, larger circles indicate matches involving the host country’s team, while blue circles represent all other matches. A legend distinguishes home-team matches from others. The chart uses D3.js to load and parse a TSV dataset and to render the SVG axes and circles, with a custom D3 time scale and linear scale mapping dates and attendance values.
This example combines a bar chart and a scatter plot on a shared time axis to display daily quantity measurements from a tab-separated data file. The bars show the raw quantity values, while the overlaid scatter points highlight individual data points. Using the Dimple.js library with D3 v3, the code defines a time-based x-axis and a measure-based y-axis, then adds two series with `dimple.plot.bar` and `dimple.plot.scatter`. The chart is rendered as SVG, with a custom purple fill applied to the first series via CSS.
This example combines a line chart and a sortable HTML table to display financial data from a CSV file. The line chart plots the closing price over time using D3 v3’s `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` with SVG rendering. The table lists dates, close and open values, plus a calculated difference column, and sorts its rows by closing price using `d3.descending`. Data is loaded via `d3.csv` from two separate CSV files, with only the second file used for both the chart and table.
This example demonstrates a Sankey diagram built with D3 v3, visualizing the flow of "Widgets" between five nodes. The SVG-based layout uses d3.sankey to compute node positions and link thicknesses, with node rectangles colored by name via a categorical scale and semi-transparent black links. Users can drag nodes vertically to rearrange the flow, triggering a relayout that updates link paths. The diagram includes hover tooltips showing source, target, and value for each link, plus node labels and value titles. Data is loaded from a small JSON file describing five nodes and seven directed weighted links.
A simple bar chart displays monthly values from a local CSV file, with dates parsed using `d3.time.format` and an ordinal x-scale with `rangeRoundBands`. The SVG rendering uses `d3.svg.axis` for rotated month labels and a linear y-scale, with steelblue rectangles sized from the data. The example loads data via `d3.csv`, applies margins, and defines axes with tick formatting for year-month values, showing a clear upward trend in the metrics across 2013 and early 2014.
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.
Two SVG text elements display "d3.js" and "letitbi.net" at fixed positions. A range input controls a rotation angle from 0 to 360 degrees, and an HTML label shows the current value. Dragging the slider rotates the first text by that angle while the second text rotates by the complementary angle (360 minus the value), using D3 v4’s `d3.select` and the `input` event listener. The code updates each text’s `transform` attribute via `holder.select` and `attr`, demonstrating interactive text rotation with plain SVG and D3’s data-binding-free approach.
A single SVG text element displays the string “letitbi.net” at the center of a 600 by 300 canvas. An HTML range input controls its rotation angle from 0 to 360 degrees, with the current value shown in a label. The d3.v4 selection API updates the text’s `transform` attribute on input events, rotating it around the fixed point (300, 150). The example demonstrates basic interactive binding between a form control and SVG attribute updates.
Two range sliders control the height and width of a blue-outlined rectangle centered in an SVG canvas. The visualization demonstrates how user input directly updates geometric attributes, with each slider labeled and displaying its current numeric value. Built with D3 v4, the code uses `d3.select` to attach `input` event listeners and `selectAll("rect").attr` to modify the rectangle’s dimensions and position. The rectangle’s center remains fixed as its size changes, with height and width adjusted independently via separate update functions.
A single blue-outlined circle is centered in an SVG canvas, with its radius controlled by a slider input labeled "radius." Dragging the slider updates the circle's size in real time. The example uses D3 v4 to bind the input event and dynamically set the circle's `r` attribute, while the slider's value and displayed text are updated in the same handler. The SVG is rendered directly in the HTML body, and the initial radius is set to 120.
This example demonstrates how to toggle the visibility of line chart elements by clicking on legend text. The visualization displays two time-series lines—a blue line for closing values and a red line for opening values—plotted against dual Y axes on an SVG canvas using D3 v3. The data is parsed from a small CSV-like array of dates and numeric values. Clicking on the “Blue line” or “Red line” legend labels toggles the opacity of the corresponding line and its associated axis, effectively hiding or showing that data series. The interaction is implemented with D3’s click event handler, which checks the active state of each line and updates the opacity of both the path and the matching axis. This example demonstrates how to add simple interactive show/hide functionality to a multi-series line chart.
Two line charts compare stock opening and closing prices over time, each with its own independent Y axis scaled to the respective value range. The left axis measures closing prices in blue, while the right axis measures opening prices in red. The visualization uses d3.v3 with SVG rendering, creating time-scaled x positions and linear y scales for each series. The code draws both lines via d3.svg.line, styles the opening-price line with a red dashed stroke, and labels the series directly. Data comes from a local CSV file with date, close, and open columns.
This example shows a line chart of stock closing prices over time, where the line is colored by value using an SVG linear gradient. The gradient maps price levels to colors: low values appear red, middle values black, and high values lawngreen. A light gray line and axis frame the chart, while the data is loaded from a CSV with dates and closing prices. Although tooltip and scatterplot code are present, they are commented out, so the visualization displays only the gradient-colored line without animation. The gradient is defined vertically over the y-axis range, creating a smooth color transition that highlights the price thresholds directly on the line.
This example shows a line chart with an area fill whose color transitions from red to black to green as the y-value increases, providing a visual gradient tied to the data’s magnitude. The area is rendered as an SVG path using `d3.svg.area`, while the gradient is defined as a linearGradient element with multiple stop points. The code loads date and closing-value data from a CSV file, scales the axes with `d3.time.scale` and `d3.linear.scale`, and draws the axes via `d3.svg.axis`. The gradient’s color stops are explicitly set for specific vertical positions, creating the segmented color effect.
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.
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.
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.
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.
This example demonstrates how D3 v3 applies clipping and styling to SVG elements. A clipped region, defined by an ellipse-shaped `clipPath`, reveals a grey rectangle, while a text label reading “Hello World” is positioned over it. The code uses `d3.select` to append an SVG container, creates the clip path with `holder.append("clipPath")`, and applies it to the rectangle via the `clip-path` attribute. Text styling uses the `style("fill")` method, with data loaded from CSV files, though only static values are shown here.
A line chart displays stock closing prices over time, automatically swapping between two datasets every five seconds using a `setInterval` loop. The visualization uses D3 v3 to load CSV data via `d3.csv`, parse dates with `d3.time.format`, and render SVG paths with `d3.svg.line`. Smooth transitions animate the line and both axes using `transition().duration(750)`, updating the scales (`d3.time.scale`, `d3.scale.linear`) to match the new data range. Grid lines and an area fill under the curve support the primary line chart.
Two buttons, Update and Revert, toggle between two CSV datasets that share the same date range but have different closing values. A single line chart animates smoothly as the path and both axes transition to the new data, with the y-axis rescaling to accommodate the changed price range. The example uses d3.svg.line for the path, d3.svg.axis for the axes, and transition() with a 750-millisecond duration to animate the updates. It demonstrates how to reuse the same scales and axes across multiple data loads while preserving a consistent visual context.
A line chart displays stock closing prices over time, with an area fill beneath the line. A button press triggers an update that swaps the plotted dataset from one CSV file to another, re-scaling the x and y axes accordingly. The visualization uses d3.svg.line and d3.svg.axis, with transitions on the line and axis elements via .transition().duration(750). The data comes from two local CSV files, parsed with d3.time.format, and the chart is rendered in SVG.
A line chart displays stock closing prices over time, with dates parsed from a CSV file. The x-axis labels are rotated −65 degrees using `d3.svg.axis` and a `transform` attribute to prevent overlapping text. The chart uses `d3.time.scale` for the date range and `d3.scale.linear` for the price values, rendering a smooth polyline via `d3.svg.line`. The y-axis uses five ticks, while the x-axis shows ten date ticks formatted as `%Y-%m-%d`.
This example shows a dual line chart comparing close and open values over time, using data loaded from two CSV files. Two lines are drawn with D3 v3's SVG line generator: one solid steelblue line for the close values and one dashed red line for the open values. The chart includes a time-scaled x-axis, a linear y-axis, background grid lines, and labeled axes for Date and Value. A white shadow effect behind the title text improves readability, and the visualization demonstrates how to plot multiple series with distinct styles on the same axes.
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.