Skip to main content
100%

JS Bin

✓ Published0🌍 Public
VValIlya
Last edited Jun 20, 2017
Created on Jun 19, 2017

This interactive visualization combines a slope chart and a timetable to explore scheduling cost data from a JSON dataset. The main line chart plots cost against tick values for process 3, with blue circles marking each data point. Users can hover over individual points to highlight them in red and display a tooltip with the exact cost, or move the mouse across the chart to see the cost at the nearest tick. A linked table updates dynamically, showing details of the selected data point. The visualization is built with D3.js, uses SVG and includes smooth transitions for hover effects.

AI-generated description

forked from <a href='http://bl.ocks.org/ValIlya/'>ValIlya</a>'s block: <a href='http://bl.ocks.org/ValIlya/4db61bbfdb53f2de9cf3188af487648a'>Timetables</a>

mit Licensed

Similar vizzes

Loading thumbnail…

JS Bin

A grid-based visualization displays a binary schedule matrix, where each row represents a time slot and each column represents an employee, with green cells indicating active assignments and white cells indicating idle periods. The chart renders as a small SVG heatmap (200x400 pixels) with top and left axes showing slot and employee indices, and a text label beneath displaying the total cost of the schedule (e.g., 77916.13). The data is loaded from a JSON file containing an array of schedule solutions, and the visualization presents the 21st solution.

VValIlya
77% match
Loading thumbnail…

Activity8_Task4

This visualization displays the cost of sales from 2000 to 2013 using an area chart with a smoothed basis curve line. The SVG chart uses D3 v5 scales (scaleTime, scaleLinear) and axes (axisLeft, axisBottom) to map the temporal and cost dimensions. Data is loaded from a CSV hosted on GitHub, with year values parsed as dates. The code demonstrates local ES6 module imports and D3's line and area generators with curveBasis to create the filled region and overlaid stroke.

AArun Pratap
70% match
Loading thumbnail…

Line chart scroller II

This interactive line chart visualization displays 100 randomly generated financial time series, each represented by a colored line. Users can navigate by scrolling over the chart to zoom, hovering over the table rows to highlight individual series, or scrolling the table to scroll through the data. The visualization uses the Visvalingam line simplification algorithm to dynamically adjust line detail based on zoom level, with opacity and stroke-width emphasizing the currently selected series. The y-axis rescales based on the visible data, and all interactions are animated via SVG transitions.

AAndresAnayaIsaza
69% match
Loading thumbnail…

Q2_task9,10

This area chart from Msahith123 visualizes yearly cost data from a CSV file. The blue-green filled path, generated with `d3.area()`, shows a clear trend across years, reaching its peak in 2007. Interactive invisible circles, rendered with D3’s data join, trigger a lightsteelblue tooltip on mouseover to display the year and cost. The visualization uses linear scales for both axes, with SVG rendering and D3 v6. An accompanying README notes the design is responsive, though the version here uses fixed dimensions.

Mmanisahiths54321@gmail.com
69% match
Loading thumbnail…

Interactive and attempting to be more DRY with the code

This interactive D3 visualization displays Washington Metropolitan Area Transit Authority (WMATA) fare card transactions from a CSV file, plotting entry and exit times across two linked SVG charts. The left scatterplot uses `d3.scaleTime` and `d3.scaleLinear` to map timestamps against time of day, with `d3.brush` enabling rectangular selections that filter the dataset. The right stacked bar chart reconstructs station-level entry and exit counts using `d3.nest` and updates dynamically through a shared data-binding pattern. The code applies a DRY approach via a reusable `createSVG` class and `Object.defineProperty` to synchronize both charts while retaining an animation feel through the CSS grid layout.

AAjayyy
69% match
Loading thumbnail…

simple line chart from dataset

This line chart visualizes a small dataset of monthly values, mapping dates on the x-axis and numeric values on the y-axis, with a steelblue stroke for the line. It also includes an interactive tooltip: moving the mouse over the chart reveals a focus circle and a label showing the price formatted as currency. The visualization uses D3 v3 with `d3.time.scale`, `d3.svg.line`, `d3.svg.axis`, and `d3.bisector` for mouse-based lookup. Data is loaded via `d3.tsv` from a local JSON file, and the rendering is SVG-based.

LLRobergeon
69% match
Loading thumbnail…

Activity8_Task3

This visualization presents the cost of sales from 2000 to 2013 using a line chart rendered as an SVG. The code loads data from a CSV file and employs D3’s scaleBand for the x-axis and scaleLinear for the y-axis, drawing the line with d3.line. The chart includes axes, labels, and a thick light-green stroke to highlight the trend over time.

Ssaikrishnabussa
69% match
Loading thumbnail…

Untitled

This interactive histogram displays the distribution of a single numeric variable from a CSV dataset of prices. A slider dynamically adjusts the number of bins from 1 to 100, with smooth 1000ms transitions updating both the bar widths and the y-axis scale. The visualization uses d3.histogram to compute bin values, d3.scaleLinear for axes, and d3.axisBottom/axisLeft for rendering scales. Bars are drawn as SVG rectangles with a teal fill, while d3’s data join pattern handles entering and exiting elements during updates.

AAbhishek Kumar
68% match