Skip to main content
Log in
E

Ellednera

@Ellednera·22 public vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings from multiple cities around the world, with each city represented by a distinct colored line plotted over time. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `curveBasis`, and `d3.nest` to group data by city. A color legend built with `d3.scaleOrdinal` and `schemeCategory10` identifies each line. The data comes from a CSV file loaded via `d3.csv` and rendered with custom axes, grid lines, and a title.

Nov 20, 2020
Loading thumbnail…

Line Chart with Multiple Lines Matching The legend

This example shows a week of temperature readings from multiple cities as smooth, overlapping line paths, with a color legend matching each line to its city. The chart uses D3 v6 with `scaleTime`, `scaleLinear`, and `scaleOrdinal`, and nests the CSV data by city via `d3.nest`. Lines are generated with `d3.line` and `curveBasis`, while a custom `colorLegend` component renders the legend with SVG circles and text.

Nov 17, 2020
Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends for scatterplot-like data. A color legend uses an ordinal scale to map fruit names to distinct colors, displayed with evenly spaced circles and labels. A size legend uses a square-root scale to map numeric values to circle radii, showing larger circles at the top with tick marks. Both legends are built with D3 v6 selections, using `.enter().append()`, `.merge()`, and `.exit()` to manage groups, with SVG circles and text rendered in an HTML page.

Nov 17, 2020
Loading thumbnail…

World Countries Tree - Incomplete

This visualization displays an empty, rounded SVG canvas that fills the browser viewport. The code sets the SVG dimensions to match the document body’s client width and height, then appends a rectangle with a 40-pixel corner radius as the background. Built with D3 v6, the example uses `select` to target the SVG element and dynamically sizes the scene, but no data or chart elements are rendered yet—only the prepared blank slate.

Nov 15, 2020
Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the browser viewport, adapting to the full dimensions of the window. The visualization is a minimalist canvas, rendered as a single SVG rectangle with no data plotted. It uses D3 v6's `select` and `attr` methods to size the SVG element against the body’s `clientWidth` and `clientHeight`, directly appending a `rect` with rounded corners. The piece demonstrates a foundational, empty state for a data-driven graphic.

Nov 15, 2020
Loading thumbnail…

Cheap Trick for Interactions

This example shows an interactive world map with zoom and pan capabilities, where country boundaries are drawn in light green and highlight in red on hover with name tooltips. It uses d3.geoNaturalEarth1 projection, d3.geoPath for rendering, and d3.zoom for the pan/zoom interaction. Country data comes from the world-atlas TopoJSON dataset, paired with TSV names, and the tooltips are implemented with SVG title elements. Styling uses simple CSS for hover effects and sphere coloring.

Nov 13, 2020
Loading thumbnail…

Making a Map

This example displays a world map as a set of light green countries against a blue sphere, rendered as SVG. The visualization uses the D3 library’s `geoNaturalEarth1` projection and `geoPath` generator, while the `topojson` package’s `feature` function converts the world-atlas TopoJSON data into geographic features for drawing. The sphere path is generated by passing a `Sphere` object to the same path generator. The map is fully drawn from the included `world-atlas` data source.

Nov 10, 2020
Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit rendered as SVG circles transitions between five apples, shrinking to four after one second, then swapping a lemon into place, and finally removing another apple. Hovering over any fruit selects it with a black outline, and moving the mouse away deselects it. The example uses D3 v6 with a selection-join pattern, `scaleOrdinal` for color and radius, and `transition().duration(1000)` to animate circle positions and radii. State changes are triggered by `setTimeout` calls, while mouseover and mouseout events update the selected fruit via a callback.

Nov 10, 2020
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of five apples is rendered as SVG circles; clicking any fruit selects it with a black stroke, while the remaining fruit animate into position over one second. The example demonstrates enter, update, and exit selections with `d3.selectAll` and `transition`, using `scaleOrdinal` for color and radius by fruit type. As timers fire, apples are removed, and one apple transforms into a lemon. The `fruitBowl` function handles click events via an `onClick` callback, and `d3.v6` powers the data joins.

Nov 10, 2020
Loading thumbnail…

Temperature in San Francisso

A smooth, pink area chart visualizes one week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. Rendered as an SVG using D3 v6, the chart employs `d3.area` with a basis curve and `d3.scaleTime` and `d3.scaleLinear` for axes. Grid lines from `d3.axisBottom` and `d3.axisLeft` support the data, which is loaded via `d3.csv` from a VizHub-hosted CSV file.

Nov 4, 2020
Loading thumbnail…

Bowl of Fruit - Nested Elements

This example demonstrates how D3.js can manage dynamic updates to nested SVG elements within a fixed container. Five fruits are initially displayed as colored circles with text labels, representing apples in red and a lemon in yellow, all layered over a bowl-shaped rectangle. Over three seconds, the visualization reacts to data changes: an apple is removed, another apple transforms into a lemon, and a second apple is deleted. The code uses D3’s scaleOrdinal for color and radius mapping, selection merging via `.merge()` to update existing elements, and a simple `setTimeout` sequence to trigger re-renders. The SVG rendering approach is visible throughout the process.

Nov 4, 2020
Loading thumbnail…

Bowl of Fruit - Update Pattern

Five apples appear as red circles in an SVG bowl, then shrink and disappear as the dataset changes over time. A lemon replaces one apple, turning yellow and changing radius, while another apple is removed entirely. The example demonstrates the D3 update pattern using `selection.data`, `enter`, `merge`, and `exit` with `d3.scaleOrdinal` for color and size. Transitions animate position and radius over one second via `transition().duration`.

Nov 4, 2020
Loading thumbnail…

Temperature in San Francisso

This example shows a week of temperature readings in San Francisco, plotted as a smooth, curving line chart against time. The visualization uses D3.js (v6) with SVG rendering, employing `scaleTime` and `scaleLinear` to map the data, and `line` with `curveBasis` to create the smoothed path. The chart includes labeled axes, grid lines, and a title, with data loaded from a CSV hosted on vizhub.com.

Nov 3, 2020
Loading thumbnail…

Car Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository Auto MPG dataset. Red semi-transparent circles represent individual car models, with each axis labeled and grid lines extending across the plot. The visualization is built using D3.js v6 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the scales and axes. Data is loaded asynchronously via `csv()` from a remote URL before being parsed and rendered.

Nov 3, 2020
Loading thumbnail…

World Population Area Chart

This area chart visualizes world population by year, with time on the x-axis and population on the y-axis. The chart uses a pink filled area with a smooth curve, created via d3.area with curveBasis. Axes are generated using d3.axisBottom and d3.axisLeft, with gridlines and formatted tick labels showing billions. Data is loaded from a CSV file (world-population-by-year-2015.csv) and rendered as SVG.

Nov 2, 2020
Loading thumbnail…

Car Scatter Plot

This scatter plot displays temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. Each deeppink, semi-transparent circle represents a single measurement. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for scales, axisBottom and axisLeft for axes, and SVG circles for rendering. The grid lines and axis labels are styled through CSS, with a title and labeled axes included.

Nov 2, 2020
Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the ten most populous countries, with each country positioned along the y-axis and its population scaled along the x-axis. The visualization uses d3.csv to load the data, d3.scalePoint for the categorical country axis, and d3.scaleLinear for the population values. Circles are rendered as SVG elements, with grid lines extending across the plot from tick marks. The code applies a custom tick formatter using d3.format to abbreviate large numbers, and follows the Sunlight Foundation color and style guidelines for the chart’s typography and grid styling.

Oct 30, 2020
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top ten most populous countries, with population values in billions and country names as categorical labels. The visualization customizes both axes by removing default domain lines, styling tick marks and labels via CSS, and formatting tick values with D3’s `format(".3s")` to convert gigabytes into billions. Using `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, it renders SVG rectangles with a steelblue fill, a title, and an x-axis label, all positioned within computed margins.

Oct 29, 2020
Loading thumbnail…

Bar Chart

This bar chart displays population estimates for ten countries, from China’s 1.4 billion down to Mexico’s 130 million. The visualization uses D3 v6 with SVG rendering, employing `d3.csv` to load data, `scaleLinear` for the value axis, `scaleBand` for categorical spacing, and `axisLeft`/`axisBottom` to label countries and counts. Margins prevent label clipping, and bar heights come from `yScale.bandwidth()`.

Oct 29, 2020
Loading thumbnail…

Face - D3.js

A smiling yellow face is drawn with SVG shapes and animated eyebrows that bounce up and down. The code uses D3.js v6 selections and the `arc` generator to create the mouth, positioning elements relative to the SVG center. A React-ready setup renders via a static HTML page with D3 transitions driving the eyebrow movement over timed intervals.

Oct 22, 2020
Loading thumbnail…

HTML Starter

This example displays a minimal HTML page with the text “Hello HTML” centered on the screen. The page uses a plain HTML file with inline CSS to style the text and a script tag that logs “Hello JavaScript!” to the browser’s console. The visualization demonstrates the basic structure of an HTML document, with no external libraries or data sources. It highlights the simplicity of a static web page, where the rendering is handled entirely by the browser’s default HTML and CSS processing.

Oct 22, 2020
Loading thumbnail…

Shapes with SVG

This example showcases a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged and transformed to illustrate foundational vector graphics concepts. The visualization demonstrates how a single SVG canvas can compose primitive elements, use grouping to apply consistent styling and translations, and employ transforms like scaling and translation to position and resize shapes. The code uses raw SVG markup within a React framework, with styling handled by an external CSS file that defines a class for the line group and modifies stroke attributes on the path. This serves as a minimal demonstration of rendering structured vector graphics directly in a web browser.

Oct 22, 2020