jpl-web

@jpl-web·6 public vizzes

Fork of D3.js collapsible tree with boxes

This interactive visualization displays a hierarchical tree with collapsible nodes, where each node is rendered as a colored box representing different data types. The tree supports zooming and panning through mouse interactions, with tooltips appearing when hovering over nodes. Built with D3.js v3 and jQuery, it uses the `d3.layout.tree` algorithm to position nodes and SVG for rendering, with animated transitions on node expansion and collapse. The example loads hierarchical JSON data containing nested objects with properties such as node name, type, and version, and color-codes nodes based on their type values.

Jan 29, 2022

Loading thumbnail…

IndicationsTree

IndicationsTree shows a hierarchical dataset of world regions and countries as a horizontal dendrogram. The visualization renders nodes as country and region names, with curved links connecting parent-child relationships. Text size decreases with depth, and zooming is enabled through d3.zoom. The code builds the layout with d3.tree, positions nodes using hierarchy, and draws links via linkHorizontal. It loads data from a JSON file using d3.json. The SVG output uses green strokes for paths and Playfair Display typography.

Jan 25, 2022

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization plots temperature in Celsius against time, using a smooth curved line to connect data points. The code employs D3 v5 functions including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG chart. Grid lines, axis labels, and a title are added, with the data loaded via `d3.csv` from an external CSV file.

Nov 2, 2021

Loading thumbnail…

Fork of Temperature in San Francisco Area Chart

This visualization is an area chart showing one week of temperature data (in Celsius) for San Francisco, from the Data Canvas - Sense Your City dataset. The chart depicts temperature values over time, and it uses a line path with filled shading beneath the curve. The d3 library loads the CSV data, then applies d3.scaleTime and d3.scaleLinear to map the timestamp and temperature values to the SVG canvas. The d3.axisBottom and d3.axisLeft functions generate the axes, and d3.area with the curveBasis curve creates the filled area plot.

Nov 1, 2021

Loading thumbnail…

Fork of Melting Data for Multiple Lines

This visualization shows population trends over time for global regions, with multiple colored lines plotted on axes labeled “Time” and “Population.” The data combines UN population estimates from 1950–2014 with medium-variant projections from 2015–2100, processed through a custom `melt` function. It uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal with schemeCategory10, d3.line with curveBasis, d3.nest for grouping, and axis generators with tick formatting. A custom colorLegend component displays the categorical color scale, while SVG paths are styled with mix-blend-mode for overlapping lines.

Oct 26, 2021

Loading thumbnail…

Untitled

This example renders a minimalist React application using CSS and JavaScript. It demonstrates a basic setup with a single HTML page, importing React and ReactDOM via a Content Delivery Network. The visualization itself is a simple blank canvas, as the code focuses on establishing the foundational structure for a React-based project rather than displaying any specific data or interactive chart.

Oct 7, 2021