Untitled

100%

✓ Published0🌍 Public

Last edited Apr 18, 2020

Created on Apr 13, 2020

This interactive visualization maps the transmission of electricity over time, displaying power lines and load data on a geographic canvas. Users upload CSV files for lines and loads via file inputs, then scrub through a time slider to see changing network conditions. The code uses PapaParse for CSV parsing and d3-fetch for file handling, while D3’s slider and DOM manipulation update the displayed time and redraw the line elements based on a threshold value.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive line chart displays energy consumption data across multiple building sites, allowing users to switch between locations via a dropdown menu. The visualization employs an SVG-rendered multi-series plot with a smooth animated transition when a new site is selected. The code uses `d3.csv` for data ingestion, `d3.scaleLinear` for axes, `d3.line` for plotting, and `d3.transition` to animate changes. A color scale assigns distinct hues to each site. The chart reveals periodic patterns in usage, with site 7 showing notable gaps where zero consumption was recorded.

KKeerthiKandadai

75% match

Loading thumbnail…

Untitled

An interactive time-series line chart displays daily, weekly, and monthly aggregations of value and quantity data from a CSV file. Buttons allow switching between these temporal resolutions, with the line path redrawing accordingly. Tooltips appear on mouseover, and the chart uses D3 v3 APIs including `d3.csv`, `d3.time.scale`, `d3.bisector`, and `d3.svg.axis`, with an SVG canvas and smooth animation during transitions.

Ggabrielribeirob

75% match

Loading thumbnail…

Untitled

This interactive visualization displays a network of named individuals across five linked columns, organized as vertical station lines. Each node is draggable, and the connecting paths update in real time. Using d3.csv to load the data, the code renders SVG paths with d3.line and the Catmull-Rom curve generator, while d3.drag enables node movement. The layout uses a fixed horizontal spacing with randomized angular offsets for each station line.

Ffnfbraga

74% match

Loading thumbnail…

Untitled

This interactive line chart displays temperature data in either Fahrenheit or Celsius from a CSV file, with a dropdown menu to switch between metrics. The visualization uses D3.js v5 to render SVG paths with cardinal curve smoothing, and includes a hover tooltip that reveals exact dates and values using bisector-based mouse tracking. The chart updates its y-axis domain and line paths dynamically when the metric changes, with CSS transitions providing smooth animations.

RResl411

73% match

Loading thumbnail…

Untitled

This interactive line chart visualizes time-series data, comparing two different datasets loaded by default and via an update button. It displays the data as a single line, with the x-axis representing dates and the y-axis representing values. The chart uses D3.js to render an SVG, with axes and a line path updated smoothly using a transition. The code employs `d3.time.scale` and `d3.scale.linear` for scaling, and transitions to animate the line and axes when new data is loaded.

Ttracy3057

73% match

Loading thumbnail…

Untitled

This example visualizes the progression of a line chart tracking a signal over time using D3.js. It reads CSV data files containing time-series measurements and displays them as multiple filtered lines on an SVG canvas. The code uses D3 v3’s `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` to render the chart with a date-based x-axis and linear y-axis. Interactive mouse-over effects are partially implemented, though the mouse-line overlay is not fully functional.

HHariprashanth75

73% match

Loading thumbnail…

Untitled

A small-multiple area chart displays monthly energy consumption across different sites, with each panel representing a distinct location. The visualization uses D3.js v4 to load data from a CSV file, parse the time series, and render a separate small SVG chart for each site. The code employs d3.nest() to group data by site, d3.line() for path generation, and d3.scaleOrdinal() for color encoding, with axes rendered per chart.

Mmab3105

72% match

Loading thumbnail…

Untitled

This example visualizes a dataset from a CSV file using D3.js force simulation, rendering nodes and links in an SVG container. The code loads data.csv and applies d3.forceSimulation with forces for charge, center, and link to position elements. Nodes are drawn as circles with fill colors and labels, while links appear as lines. The visualization updates positions on each simulated tick, demonstrating a standard network graph layout.

TTetizera

72% match