Skip to main content
Log in
J

jsong

@jsong93·14 public vizzes

Loading thumbnail…

Temperature in San Francisco (Line)

This example visualizes a week of temperature readings in San Francisco, plotting timestamps against temperature on linear and time-based scales. The chart displays the data as a filled area curve beneath a smooth, stroke-less line, with labeled axes and a title within an SVG canvas. It uses D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `area`, and `curveBasis` to render the visualization. Data is loaded from a CSV file hosted at `vizhub.com/curran/datasets/temperature-in-san-francisco.csv`.

Feb 1, 2020
Loading thumbnail…

Temperature in San Francisco

A line chart shows temperature readings over one week in San Francisco, with circular points connected by axes labeled “Time” and “Temperature.” The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to map timestamps and temperature values, rendering SVG circles and gridlines. Data loads from a CSV file on VizHub, and styling is applied via external CSS.

Jan 29, 2020
Loading thumbnail…

Temp in SF Scatter Plot

A scatter plot displays San Francisco's temperature over time, with each circle representing a daily temperature reading. The visualization uses D3's `scaleTime` and `scaleLinear` for the axes, `axisLeft` and `axisBottom` for grid lines and labels, and draws circles via SVG. Data is loaded from a CSV file containing timestamps and temperature values, rendered with a steelblue fill.

Jan 29, 2020
Loading thumbnail…

Drag & Drop

This example demonstrates a drag-and-drop interaction where a single draggable image can be moved into any of ten empty placeholder boxes. Using the native HTML5 drag-and-drop API, the JavaScript code listens for `dragstart`, `dragend`, `dragover`, `dragenter`, `dragleave`, and `drop` events to manage the image’s visual state (such as adding a highlight or making it invisible) and to append it to the targeted container. The visual style, including the salmon background and dashed hover indicator, is defined in the accompanying CSS, while the image itself is loaded from a random Unsplash URL.

Jan 29, 2020
Loading thumbnail…

d3-voronoi-treemap usage

This visualization uses the `d3-voronoi-treemap` plugin to display global GDP shares by country and continent, based on data from a `globalEconomyByGDP.json` file. A clipped Voronoi treemap partitions a circular region into labeled cells sized by each economy’s relative weight, with continent grouping indicated by distinct colors. The rendering is built with `d3.hierarchy` and `d3.voronoiTreemap`, producing an SVG output where hovered cells are highlighted with a thick white stroke. The title and legends are drawn within the same SVG container.

Jan 25, 2020
Loading thumbnail…

Line chart

This line chart visualizes a week of temperature data in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses SVG rendering with D3 v5, employing scales like `scaleTime` and `scaleLinear`, along with `axisBottom` and `axisLeft` for the axes. The line is drawn using D3’s `line` generator with a basis curve to smooth the path. Data comes from a CSV file loaded via `csv`, and the chart includes labeled axes and a title.

Jan 25, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each circle representing a car model. Built with D3.js v5, it renders as an SVG using the `select` and `csv` helpers to load data from the UCI Auto MPG dataset. The visualization employs `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while circles are positioned using the scaled x and y values. The chart includes axis labels and a title, with styling applied via the included CSS.

Jan 25, 2020
Loading thumbnail…

Untitled

This example demonstrates an interactive flowchart editor that parses user-provided text input into a styled diagram, supporting custom states, colors, and hyperlinks on nodes. The visualization uses the flowchart.js library with Raphael for rendering, while D3 v5 handles DOM manipulation and layout of the interface. Users can edit the flowchart syntax in a textarea, click a button to draw the chart onto a canvas, and interact with nodes to trigger alerts or log events. The code defines custom flow states like "past," "current," and "approved" to visually distinguish different processing stages.

Jan 15, 2020
Loading thumbnail…

Interactable time table

This interactive visualization combines a world bubble map with a time-series histogram to explore migrant deaths and disappearances. The map uses a natural Earth projection via `d3.geoPath` to plot circles scaled by the number of dead and missing, while the histogram below aggregates the same data by reported date using `d3.bin` and `scaleTime`. A brush on the histogram filters the map’s circles, dynamically updating the visualization. Built with React and D3 v5, it sources data from a Missing Migrants CSV and country boundaries from TopoJSON.

Jan 15, 2020
Loading thumbnail…

Working stuff out - zz

This example presents an interactive scatter plot of the auto-mpg dataset, where users can select which numeric column to display on the x- and y-axes via dropdown menus. The visualization uses React for UI components and d3.v5 for rendering SVG circles, axes, and grid lines. Data points are colored based on their x-axis position using a custom color scale, and circles pulse with a brief transition animation when the axis selection changes. The code leverages d3’s `scaleLinear`, `extent`, `axisBottom`, `axisLeft`, and `transition` APIs to update the chart smoothly.

Jan 15, 2020
Loading thumbnail…

axes and stuff

This bar chart displays population figures for the ten most populous countries, sorted by country name. A linear scale maps population values to bar widths, while a band scale positions the categorical country labels. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render axes. Custom tick formatting abbreviates large numbers, and gridlines extend from the bottom axis. The chart is rendered as SVG with a steel-blue fill for bars and includes a title.

Jan 15, 2020
Loading thumbnail…

Bar chart

This bar chart displays the population of ten countries, with the United States listing 326,767 thousand people. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values to horizontal bar lengths and country names to vertical positions. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles with steelblue fill. The chart includes axis labels generated by `axisLeft` and `axisBottom`, and the population values are multiplied by 1000 in a preprocessing step.

Jan 14, 2020
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population by country, using a CSV dataset with ten nations. The visualization renders as SVG within a React framework, with bars displayed in steel blue and axes labeled. The code builds the chart using D3 v5 APIs including `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and `axisLeft` and `axisBottom` for tick marks. Data is loaded asynchronously with `csv`, then population values are multiplied by 1,000 before being mapped to bar widths.

Jan 9, 2020
Loading thumbnail…

Let's make a face with D#.js

A yellow face with black eyes, eyebrows, and a mouth is drawn in SVG using D3 v5. The code builds the face from basic shapes—circles, rectangles, and a path generated with the `arc` API—centered within a 960×500 viewport. The right eyebrow animates with chained `transition` calls that move it down and back up. Static elements are created first, followed by the animated eyebrow.

Jan 8, 2020