D3.js JSON Table

100%

D3.js JSON Table

✓ Published0🌍 Public

Last edited Dec 28, 2023

Created on Dec 27, 2023

This example displays a stacked line chart of weekly website traffic across five marketing channels, using ECharts with a canvas renderer. The chart includes a title, axis tooltip, legend, and image-saving toolbox feature. Data is loaded from a JSON file containing detailed power plant operations, but the visualization focuses on the static array of channel values for Monday through Sunday. The code initializes an ECharts instance bound to a DOM container, sets a configuration object with stacked line series, and updates the chart on window resize.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js Table Example

This example displays a D3.js-generated HTML table that organizes power plant data from a JSON file, including details such as unit names, capacities, and operational statuses. The code uses d3.json to load the dataset and selects a div container to append the table, with d3.select and .append building both the header row and body rows dynamically. Each cell is populated using the .text or .html methods, allowing for inline markup in the source data. The table presents the raw array structure from the JSON’s aaData field, showing grouped entries by energy type with subtotals and annotations.

Yyuting89830@gmail.com

72% match

Loading thumbnail…

ECharts

This example demonstrates a simple line chart of weekly data using the ECharts library. It renders a smooth curve across seven days of the week with values ranging from 820 to 1330. The visualization is initialized on a fixed-size DOM element via the `echarts.init` method, and the chart configuration specifies a category x-axis and a value y-axis. The code loads ECharts from a CDN and uses the `setOption` API to define the line series, showing how the library handles standard chart rendering with minimal setup.

CCenz Wong

71% match

Loading thumbnail…

D3 Graph Example

This example visualizes sales and efficiency data over time from a CSV file. It uses D3.js v5 with a React framework to render an SVG chart with steelblue bars for sales and a line for efficiency. The chart features dual y-axes, with sales on the left and efficiency on the right, using `scaleLinear`, `scaleBand`, `axisLeft`, `axisRight`, and `line` for the visualization.

DDaniel Rivera

71% match

Loading thumbnail…

Stacked Column Chart - Apache ECharts Demo

This stacked column chart from ECharts compares weekly traffic sources, with categories for Direct, Email, and Ad groups stacked, while Search Engine data appears separately with its own stacked sub-sources. The chart uses a category x-axis for days and a value y-axis, with emphasis focus on series selection and a dashed markLine connecting minimum and maximum values. It is built with Apache ECharts 5, initialized on a canvas renderer, and responds to window resize events.

Yyuting89830@gmail.com

70% match

Loading thumbnail…

INFO 3300 - HW5

Two D3.js line-area charts visualize weekly tweet volume from a JSON dataset through SVG paths. The first chart plots three tweet categories over time using shared axes and scales. The second chart displays total tweet volume as an orange area with yellow stroke. Both use `d3.json` for data loading, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisLeft`/`d3.axisBottom` for axes. The time axis uses custom parsing with `d3.timeParse` and tick formatting with `d3.timeFormat`. Data is rendered via area generation, showing trend patterns across weekly dates.

Xxiaoma1002

70% match

Loading thumbnail…

Stacked Area Chart

This stacked area chart shows the daily market share of web browsers over a three-month period, with each browser represented by a colored area stacked to total 100%. The visualization uses D3 v4 to load TSV data from Clicky Web Analytics, parse dates with `d3.timeParse`, compute stacked y-positions with `d3.stack()`, and render areas using `d3.area()`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while colors come from `d3.schemeCategory10` via `d3.scaleOrdinal`. The final SVG output includes labels for each browser placed at the right edge of the chart.

MMattDionis

70% match

Loading thumbnail…

HTML Starter

This example uses D3 v5 to render interactive bar charts from CSV data, displaying multiple series across 26 weekly categories. A custom `makeChart` function builds the visualization with scales (linear and band), axes, and SVG rectangles, while invisible overlay rectangles enable tooltip interactions that show data values for each week. The implementation demonstrates how D3 selections, event handling, and dynamic styling work together to create a coordinated multi-series chart with hover functionality.

Mmauryaamit

69% match

Loading thumbnail…

D3 Layouts - Stacked area chart

A stacked area chart shows monthly U.S. electric vehicle sales from December 2010 to June 2013, with each category rendered as a filled layer. The code uses `d3.stack` with descending order and `d3.area` to generate SVG paths, colored via `d3.schemeCategory10`. It parses dates with `d3.timeParse` and scales axes with `d3.scaleTime` and `d3.scaleLinear`. Data comes from a remote CSV file, and axes are drawn using `d3.axisBottom` and `d3.axisRight`. The chart is fixed at 800×350 pixels.

KKaustav Sen

69% match