Skip to main content
SimilarExport ZIP
100%

Fork of ECharts

✓ Published0🌍 Public
CCenz Wong
Last edited May 3, 2022
Created on May 3, 2022
Forked from ECharts

This example loads a JSON dataset from a remote URL containing salary information and extracts the “Lower Salary” field from each record for further processing. The visualization uses ECharts 5.3.2 with its stat extension (ecStat) and D3.js v7, which retrieves the data via `d3.json`. The code prepares an ECharts-enabled `<div>` container, though no chart is yet configured, focusing instead on data fetching and console inspection.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of A4_Bar-chart

This example displays a bar chart of average salaries by job title, with each bar colored steel blue and highlighted orange on hover. It fetches CSV data from a remote gist using `d3.text`, parses it into job title and salary pairs, and renders the chart as SVG via D3 v6. The visualization uses `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and includes a tooltip div that appears on mouseover showing the job title and formatted salary.

Ppavan vasamsetti
72% match
Loading thumbnail…

Fork of A4_Bar-chart

This bar chart visualizes average salaries across different job titles using data from a CSV file loaded via D3.js. It displays the distribution of salaries with vertical bars, where hovering over a bar highlights it in orange and shows a tooltip with the exact salary amount. The visualization uses D3 v6's `scaleBand` and `scaleLinear` for positioning, with axes labeled and rotated for readability. The chart is rendered as an SVG element inside an HTML page, with the data fetched from an external GitHub Gist containing job title and salary pairs.

JJorge Melchor
72% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This horizontal bar chart displays salary data for employees at different ages, using bars whose lengths encode salary values and y-axis positions encode age. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map data to SVG rectangle marks, with custom axis ticks rendered via D3’s `axisLeft`, `axisBottom`, and `scaleLinear` methods. It loads CSV data from a GitHub gist, filtering the first 15 rows, and renders entirely as SVG within a React component, with loading state managed via React hooks.

NNitheeshSama
72% match
Loading thumbnail…

Fork of Final Project Box Plot

This fork of a final project displays a horizontal box plot of salary distributions across ten job categories, sorted by median salary in descending order. The visualization uses D3 v7 to compute quartiles, medians, and whiskers from a CSV dataset, rendering the chart as an SVG. Interactive checkboxes allow users to toggle the visibility of job categories, and hovering over a box highlights it in orange while displaying a tooltip with the job title and salary statistics.

DDuc Pham
71% match
Loading thumbnail…

Fork of A4_Bar-chart

This bar chart displays average salaries by job title, with a tooltip showing the exact salary on hover. The visualization uses D3 v6 to fetch a CSV file from a GitHub repository, parse the data, and render an SVG with scaled bars and axes. The code leverages `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with mouseover events that change bar color and reveal a tooltip displaying the job title and salary. The chart includes rotated x-axis labels and axis titles for clarity.

Ppavan vasamsetti
71% match
Loading thumbnail…

Fork of Hello VizHub

This area chart visualizes total wages by country using a stacked layout. The code loads CSV data from a GitHub gist with `d3.csv`, processes it with `d3.stack`, and renders layered areas using `d3.area`. It applies `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and colors each series with `d3.schemeCategory10`. SVG output is generated in a React-compatible HTML page, with axes added via `d3.axisBottom` and `d3.axisLeft`.

Ssusarlasruthi2000@gmail.com
70% match
Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows annual income by profession for fifteen job categories using a horizontal bar chart. It renders an SVG with React and D3 v5, sourcing data from a CSV file via `d3.csv`. The chart builds scales with `d3.scaleBand` and `d3.scaleLinear`, and draws grid lines, axis tick labels, and bars for each profession. The code uses React’s `useState` and `useEffect` hooks to load and store the data, then uses `ReactDOM.render` to display the visualization.

Rradhadevarapu
70% match
Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows annual income by profession for fifteen job categories using a horizontal bar chart. It renders an SVG with React and D3 v5, sourcing data from a CSV file via `d3.csv`. The chart builds scales with `d3.scaleBand` and `d3.scaleLinear`, and draws grid lines, axis tick labels, and bars for each profession. The code uses React’s `useState` and `useEffect` hooks to load and store the data, then uses `ReactDOM.render` to display the visualization.

Rradhadevarapu
70% match