Skip to main content
Log in
E

eravellisaimeghana

@eravellisaimeghana·138 public vizzes

Loading thumbnail…

America Map

This map of America displays the 50 states as cyan-filled regions with black borders, which turn maroon when hovered over. It uses the D3 library's `geoPath` and `geoAlbersUsa` projection to transform geographic data. The state boundaries are loaded from a TopoJSON source, and the map is rendered as SVG paths with interactive hover effects.

Apr 4, 2022
Loading thumbnail…

Network chart

This network chart visualizes a small social graph of seven individuals across four groups, with links between them weighted to indicate relationship strength. The visualization uses a force-directed layout to position nodes, with each node rendered as a circle accompanied by a text label. The code employs the `d3.layout.force` API from D3 v4 to simulate the physical forces that arrange the nodes, and users can click and drag nodes to reposition them. Links are drawn as lines with stroke widths proportional to the weight data from the `graphFile.json` source, and the SVG canvas is styled with a tan background and green node circles.

Apr 4, 2022
Loading thumbnail…

Fork of WORLD MAP FOR ICE-8

This visualization displays a world map rendered as green countries against a blue spherical backdrop. The map is built using D3.js v5 and the topojson library, with the geoNaturalEarth1 projection and geoPath function generating country boundaries. Country data comes from the world-atlas countries-110m.json dataset loaded via JSON. The React framework is not visibly used in the code; instead, the SVG rendering appends country paths directly after fetching and processing the geographic features.

Apr 4, 2022
Loading thumbnail…

Fork of VizHub Count Over Time

This line chart shows the cumulative growth of registered VizHub users from August 2018 to March 2022. The visualization uses d3.v4 with SVG rendering, a time-scaled x-axis and linear y-axis, and includes annotated notes marking significant events like the VizHub 1.0 launch and a Kickstarter campaign. Data comes from a CSV file with date and user count columns, and the chart employs d3.line and d3.axisBottom/axisLeft for the plot and axes.

Apr 4, 2022
Loading thumbnail…

Network chart

This network chart visualizes a small social graph of seven individuals across four groups, with links between them weighted to indicate relationship strength. The visualization uses a force-directed layout to position nodes, with each node rendered as a circle accompanied by a text label. The code employs the `d3.layout.force` API from D3 v4 to simulate the physical forces that arrange the nodes, and users can click and drag nodes to reposition them. Links are drawn as lines with stroke widths proportional to the weight data from the `graphFile.json` source, and the SVG canvas is styled with a tan background and green node circles.

Apr 4, 2022
Loading thumbnail…

Family tree

A family tree visualization maps a ten-person genealogy dataset with D3.js v6, using ancestor relationships to position nodes across four generations. Distinct colors (blue, lawngreen, magenta, white) encode each generation’s depth. The rendering uses SVG elements with animated transitions: paths draw over two seconds to form connections between parents and children, while circles grow to size 40 and labels appear with bold black text. The code leverages d3.stratify and d3.tree to compute hierarchical layout and link data.

Apr 4, 2022
Loading thumbnail…

Family tree

A family tree visualization maps a ten-person genealogy dataset with D3.js v6, using ancestor relationships to position nodes across four generations. Distinct colors (blue, lawngreen, magenta, white) encode each generation’s depth. The rendering uses SVG elements with animated transitions: paths draw over two seconds to form connections between parents and children, while circles grow to size 40 and labels appear with bold black text. The code leverages d3.stratify and d3.tree to compute hierarchical layout and link data.

Apr 4, 2022
Loading thumbnail…

Fork of ICE - 8 Family Tree (Generations) Maanas Katta

This example displays a family tree spanning four generations, with each generation assigned a distinct color (red, skyblue, orange, lightgreen) and nodes represented as lime-outlined circles. The code uses d3.stratify() to convert flat parent-child data into a hierarchy, then d3.tree() to compute node positions. SVG paths connect nodes with animated transitions, and circle radii grow via transition().duration(). The visualization renders on a black background, with bold black text labels for each family member’s name. The dataset is hardcoded in the script, listing relationships from Arun as the root down to grandchildren like Meena.

Apr 4, 2022
Loading thumbnail…

Fork of Fork of D3.js collapsibleRRR tree with boxes

This interactive visualization displays a hierarchical tree structure using collapsible nodes rendered as colored boxes, with each box representing a data node and its associated properties. Built with D3.js v3 and jQuery, the visualization loads JSON data to populate the tree and supports collapsing/expanding branches with smooth SVG animations. The implementation includes features such as tooltips, arrow markers on links, and zoom-and-drag functionality via `d3.behavior.zoom`.

Apr 4, 2022
Loading thumbnail…

Fork of D3.js collapsibleRRR tree with boxes

This interactive D3.js v3 visualization displays a hierarchical tree structure with collapsible nodes, rendered as colored boxes. It shows linked data with node names, types, and synchronous or asynchronous connection details. The tree uses `d3.layout.tree` to compute the layout and SVG rendering for nodes and links, with animations for expand and collapse actions. Custom styling, tooltips, and zoom-and-drag support are implemented alongside the core tree visualization in the `treeBoxes` function.

Apr 4, 2022
Loading thumbnail…

Fork of Fork of ICE-8 Family Tree

This family tree visualization uses a hierarchical tree layout to display a root node ("Sandeep") with two children, each branching into their own leaf nodes. The code constructs a D3.js tree using `d3.tree()` and `d3.hierarchy`, then renders the structure as SVG paths and circles. Node radius is scaled by the data’s `value` attribute, while stroke and fill colors are driven by the `type` and `level` properties within the JSON source. Curved links between nodes are drawn as cubic Bézier paths via the `attr("d", ...)` string concatenation.

Apr 4, 2022
Loading thumbnail…

Fork of ICE-8 Family Tree

This example renders a hierarchical family tree as an SVG using D3.js v5’s `d3.tree()` layout and `d3.hierarchy()`. Node circles are sized by a `value` property and colored by both a `level` fill and a `type` stroke, while curved link paths between parents and children are stroked with each child’s level color. The data is a hardcoded JavaScript object with nested `children` arrays, and the visualization highlights the branching structure of names and relationships across three generations.

Apr 4, 2022
Loading thumbnail…

America Map

This map displays the United States with individual states rendered as cyan shapes with black outlines, and hovering over a state changes its color to maroon. D3’s geoAlbersUsa projection and d3.geoPath define the geographic layout, while the feature method from topojson converts TopoJSON data. State names appear as tooltips via appended title elements. The map uses a countrymap.csv data source and includes Alaskan and Hawaiian territories through the geo-albers-usa-territories plugin.

Apr 4, 2022
Loading thumbnail…

WORLD MAP FOR ICE-8

This example displays a world map using the Natural Earth projection, with countries rendered as green paths and the globe’s sphere filled in blue. The code loads geographic data from the world-atlas TopoJSON dataset, converts it to GeoJSON with `topojson.feature`, and draws each country using `d3.geoPath`. It relies on D3 v5’s `geoNaturalEarth1` projection, React for the component structure, and renders the visualization as SVG within a fixed 980×550 viewport.

Apr 4, 2022
Loading thumbnail…

WORLD MAP FOR ICE-8

This example displays a world map using the Natural Earth projection, with countries rendered as green paths and the globe’s sphere filled in blue. The code loads geographic data from the world-atlas TopoJSON dataset, converts it to GeoJSON with `topojson.feature`, and draws each country using `d3.geoPath`. It relies on D3 v5’s `geoNaturalEarth1` projection, React for the component structure, and renders the visualization as SVG within a fixed 980×550 viewport.

Apr 4, 2022
Loading thumbnail…

Fork of ICE 8 Making Maps (World Map) Maanas Katta

This map visualization displays the countries of the world as light green polygons with black borders on a dark blue background, projected using a natural Earth projection. It fetches geographic data from the world-atlas countries-110m.json file, then uses d3.geoNaturalEarth1 and d3.geoPath to generate and render the SVG paths for each country. The topojson library’s feature function extracts the country boundaries from the JSON topology data.

Apr 4, 2022
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map as an SVG, with countries shown in light green on a blue sphere background. It uses D3.js v5 for map projections and rendering, specifically the `geoNaturalEarth1` projection and `geoPath` to convert geographic coordinates into SVG paths. The map data comes from the world-atlas package, loaded as TopoJSON and processed with the `topojson` library’s `feature` function. The page is built with a React starter template, though the main logic runs through a bundle.js file that fetches country boundaries and draws them, including a background sphere path drawn first.

Apr 4, 2022
Loading thumbnail…

Fork of Area Chart for ICE 7

This example displays a smooth, curved area chart showing yearly car sales over time. It uses D3.js v5 APIs including `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to render the path in an SVG. The data is loaded from a CSV file via `csv` from D3, with years parsed as dates. Axes, labels, and a title are generated using `axisLeft` and `axisBottom`, and the chart is styled with magenta fill.

Mar 29, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot.

This interactive scatter plot displays the Iris dataset, using colored circles to represent three species. The visualization iterates through four flower measurements, changing the x-axis variable every few seconds while keeping petal width on the y-axis. Built with D3 v6, the example uses `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes, while a `setInterval` callback updates the data bindings. The reusable `scatterPlot` module manages the chart’s dimensions, margins, and scales, and the SVG circles are colored green, brown, and magenta based on species.

Mar 29, 2022
Loading thumbnail…

Line Chart for ice 7

This example shows a line chart of car sales from 2001 to 2010, with the year on the x-axis and sales figures on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` APIs to render a maroon line and gridlines as SVG. Data is loaded from a CSV file using `csv()`, then parsed and plotted, with axis labels and a title included.

Mar 29, 2022
Loading thumbnail…

Fork of Line Chart for ice 7

This fork shows sales figures from 2001 to 2010 as a single thick maroon line plot. It uses D3 v5 to map time-series data from a CSV file onto a Cartesian coordinate system, with a linear y-axis for sales and a time-based x-axis for years. The SVG output features gridlines from axis ticks, axis labels, and a title, all styled via an external CSS file.

Mar 29, 2022
Loading thumbnail…

Pie Chart

This pie chart displays the percentage and price of various car models in February 2021, using a dataset loaded from a GitHub gist via `d3.csv`. The visualization, built with D3 v5 and rendered as SVG, uses `d3.pie` to compute arc segments, `d3.arc` for drawing, and `d3.scaleOrdinal` for color mapping. A legend on the right shows each car model, its corresponding percentage of February's total, and its price in thousands.

Mar 29, 2022
Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes February car prices from a CSV dataset, showing each car model’s proportional share via colored slices and a legend with both percentage and dollar values. The code uses D3 v5’s `pie`, `arc`, `scaleOrdinal`, and `csv` loading functions to render the SVG, with legends positioned manually and formatted using `format`. Interactive selection and tooltips are absent; the display is static, relying on hard-coded color ranges and a centered layout.

Mar 29, 2022
Loading thumbnail…

Reusable D3 Scatter Plot.

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal and sepal dimensions for three species (setosa, versicolor, virginica) with distinct colors. A setInterval animation cycles through different x-axis attributes (petal_width, sepal_width, petal_length, sepal_length) every few seconds, updating the axes and point positions. Built with d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom, the plot renders as an SVG with circles and includes custom legends and axis labels. The data comes from a CSV loaded via d3.csv.

Mar 29, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot.

This interactive scatter plot displays the Iris dataset, using colored circles to represent three species. The visualization iterates through four flower measurements, changing the x-axis variable every few seconds while keeping petal width on the y-axis. Built with D3 v6, the example uses `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes, while a `setInterval` callback updates the data bindings. The reusable `scatterPlot` module manages the chart’s dimensions, margins, and scales, and the SVG circles are colored green, brown, and magenta based on species.

Mar 29, 2022
Loading thumbnail…

Area Chart for ICE 7

This area chart visualizes yearly car sales, with the x-axis showing time and the y-axis representing sales figures. The graph is rendered as an SVG using D3 v5, employing `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the filled region, and `axisBottom`/`axisLeft` with gridlines. Data is loaded from a CSV file via `csv`, and the chart includes a title and axis labels.

Mar 29, 2022
Loading thumbnail…

Area Chart for ICE 7

This area chart displays car sales from 2001 to 2010. The visualization uses a smooth, curved area to represent the sales trend over time, with axes for year and sales count. The chart is rendered as SVG using D3 v5 and leverages the `area` and `curveBasis` APIs to create the filled shape, along with `scaleTime` and `scaleLinear` for axis scaling. Data is loaded from a CSV file containing year and sales values.

Mar 29, 2022
Loading thumbnail…

Fork of Area Chart for ICE 7

This visualization displays car sales from 2001 to 2010 as a smooth, magenta-filled area chart with time-based x-axis and linear y-axis scales. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `area` with `curveBasis`, and `axisBottom`/`axisLeft` to render the SVG output. The data is loaded from a CSV file via `csv`, with year values parsed into JavaScript `Date` objects and sales figures converted to numbers before generating the chart.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This visualization displays US cancer cases per year from 2009 to 2022, using an area chart to emphasize the total volume over time. The chart combines a smooth, black line with a purple filled area beneath it, both generated using D3's `area` and `line` generators with a basis curve. The SVG rendering relies on `scaleLinear` for both axes, `axisLeft` and `axisBottom` for ticks, and loads data from a CSV file hosted on GitHub. The visualization populates the chart by mapping year values to the x-axis and case counts to the y-axis, with bold blue axis labels.

Mar 29, 2022
Loading thumbnail…

Area Chart for ICE 7

This area chart visualizes car sales from 2001 to 2010, with time on the x-axis and sales on the y-axis. The chart uses smoothed curves via `d3.area()` with `curveBasis` to render the filled region, and includes labeled axes with gridlines. Data is loaded from a CSV file using `d3.csv`, with scales and axes built using `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The SVG output is generated using D3 v5, with styling applied from an external stylesheet.

Mar 29, 2022
Loading thumbnail…

Area Chart

This area chart shows car sales from 2001 to 2010, with the year on the x-axis and sales on the y-axis. The chart uses D3 v5 to load CSV data, apply time and linear scales, and render SVG axes with grid lines. An `area` generator with `curveBasis` creates a smoothed filled region below the sales line, styled in blue. The title and axis labels are added as SVG text elements.

Mar 29, 2022
Loading thumbnail…

Fork of ICE 7 Area Chart

This example visualizes car sales in India from 2009 to 2019 using a combined line and area chart rendered in SVG. The orange area chart highlights sales volume over time, while a black line traces the same data for clarity. It uses d3.csv to load data from a GitHub gist, d3.scaleTime and d3.scaleLinear for axes, and d3.line and d3.area with curveBasis to generate the smooth paths. Axis labels and gridlines are styled via CSS.

Mar 29, 2022
Loading thumbnail…

Area Chart

This area chart visualizes car sales in India from 2009 to 2019, using a smooth curved line and an orange shaded region to emphasize the upward trend. The chart loads CSV data asynchronously, parses dates with `d3.timeParse`, and renders an SVG with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.area` using `curveBasis`. Axis labels and gridlines are generated via `d3.axisLeft` and `d3.axisBottom`, with custom tick formatting via `d3.format`. The styling applies black strokes and bold blue labels through an external CSS file.

Mar 29, 2022
Loading thumbnail…

Forkof Fork of ICE 7 Area Chart

This visualization displays US cancer cases from 2009 to 2022 using a combined line and area chart. The line emphasizes the trend over time, while the filled area beneath it highlights the magnitude of case counts. Data is loaded from an external CSV and rendered as SVG using d3.csv, d3.scaleLinear for both axes, d3.line with curveBasis for smoothing, and d3.area to generate the filled region. Axis formatting uses d3.axisBottom, d3.axisLeft, and d3.format with abbreviated tick labels.

Mar 29, 2022
Loading thumbnail…

Fork of Area Chart

This area chart displays total US auto sales from 2005 to 2022, with a smooth curve generated via the `d3.area` generator with `curveBasis`. The x-axis uses `d3.scaleTime` for years, while the y-axis uses `d3.scaleLinear` for sales figures, both rendered with SVG axes and gridlines. Data is loaded from a CSV file, and the chart includes axis labels and a title, with styling applied via external CSS. The visualization uses D3 v5 and SVG rendering.

Mar 29, 2022
Loading thumbnail…

Ice 7

This visualization shows the sales of cars in India from 2009 to 2019 using a combined line and area chart. The black line traces the sales trend over time, while the orange area beneath it emphasizes the magnitude of sales. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for the axes, with `line` and `area` generators applying a basis curve to smooth the data. Data is loaded from a CSV file, and sales values are parsed as numbers while years are formatted as dates.

Mar 29, 2022
Loading thumbnail…

Fork of I

This visualization shows India’s annual CO2 emissions per capita over time, with a maroon filled area chart beneath a line path. The x-axis maps years using d3.scaleTime, while the y-axis uses d3.scaleLinear; both axes include gridlines via d3.axisBottom and d3.axisLeft. The area shape is generated with d3.area and d3.curveBasis. Data is loaded from a CSV file using d3.csv, and the SVG rendering is driven by d3.select and d3.append.

Mar 29, 2022
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to render a simple text message in the browser using D3.js and local ES6 modules. The code imports the `select` function from D3 and a `message` constant from a separate `myMessage.js` module, then sets the text content of a `#message` div. The page loads D3 v5 from UNPKG and applies centered, large-font styling from an external CSS file.

Mar 29, 2022
Loading thumbnail…

area

This area chart displays temperature data for one week in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses d3.area with curveBasis to create a smooth filled region between the line and the baseline, with orange fill. Axes are generated using d3.axisBottom and d3.axisLeft, with scales from d3.scaleTime and d3.scaleLinear. The rendering is SVG-based, and the code imports utilities from D3 v6, including extent, max, and format for tick labels.

Mar 29, 2022
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to render a simple text message in the browser using D3.js and local ES6 modules. The code imports the `select` function from D3 and a `message` constant from a separate `myMessage.js` module, then sets the text content of a `#message` div. The page loads D3 v5 from UNPKG and applies centered, large-font styling from an external CSS file.

Mar 29, 2022
Loading thumbnail…

Area chart

This area chart displays Facebook’s annual user growth from 2008 to 2017, using a smooth curved line and a filled area beneath it to emphasize the rising trend. The visualization loads CSV data via `d3.csv`, applies `d3.scaleLinear` for both axes, and renders axes with `d3.axisLeft` and `d3.axisBottom`. The line and area paths are generated using `d3.line` and `d3.area` with `d3.curveBasis`, while styled grid ticks and labels appear in green and orange. The SVG output includes custom tick formatting with `d3.format`.

Mar 29, 2022
Loading thumbnail…

Fork of Area chart

This example renders a static, full-screen message reading “Hello HTML!” in large, centered text. It demonstrates a basic webpage using Cascading Style Sheets (CSS) for styling and layout, with the text set at a font size of 13em and aligned to the center. The implementation relies on a simple HTML document structure and an embedded `<style>` block, with no JavaScript or data processing involved. It serves as a minimal starter template for web-based visualization projects.

Mar 29, 2022
Loading thumbnail…

Area chart

This example displays a single centered message reading “Hello HTML!” styled with a 13-em font size. The visualization demonstrates a minimal setup using plain HTML and CSS within a React starter project, with no data or rendering logic beyond static text. It relies on standard HTML elements and CSS properties, showing the simplest possible output for a web-based chart.

Mar 29, 2022
Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes car sales in India from 2009 to 2019, using a smooth curved line to show yearly trends and an orange filled region beneath it to emphasize volume. The SVG rendering relies on D3 v5’s `area`, `line`, `scaleTime`, `scaleLinear`, and `axisBottom`/`axisLeft` APIs, with data loaded via `csv` from a GitHub gist. The chart includes labeled axes, gridlines from tick marks, and a formatted y-axis using `format('.3s')` for compact number display.

Mar 29, 2022
Loading thumbnail…

ICE 7 Area Chart

This area chart from a D3 v5 visualization shows the number of US cancer cases from 2009 to 2022, with both a filled area and a black line plotted over time. The chart uses `d3.csv` to load the dataset and `scaleLinear` for both axes, while `d3.area` and `d3.line` with `curveBasis` generate the smooth filled region and line path. Axis labels and tick formatting are handled via `axisLeft` and `axisBottom`, with the SVG rendered inside a 930×450 viewport.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This visualization displays US cancer cases per year from 2009 to 2022, using an area chart to emphasize the total volume over time. The chart combines a smooth, black line with a purple filled area beneath it, both generated using D3's `area` and `line` generators with a basis curve. The SVG rendering relies on `scaleLinear` for both axes, `axisLeft` and `axisBottom` for ticks, and loads data from a CSV file hosted on GitHub. The visualization populates the chart by mapping year values to the x-axis and case counts to the y-axis, with bold blue axis labels.

Mar 29, 2022
Loading thumbnail…

Line Chart for ice 7

This example displays a line chart tracking car sales from 2001 to 2010, with the year on the x-axis and sales figures on the y-axis. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render the SVG path, with gridlines from tick sizes and labeled axes. The data is loaded via `csv` from a GitHub gist, and the blue line emphasizes the sales trend over time.

Mar 29, 2022
Loading thumbnail…

Line Chart for ice 7

This example displays a line chart tracking car sales from 2001 to 2010, with the year on the x-axis and sales figures on the y-axis. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render the SVG path, with gridlines from tick sizes and labeled axes. The data is loaded via `csv` from a GitHub gist, and the blue line emphasizes the sales trend over time.

Mar 29, 2022
Loading thumbnail…

Line Chartfor ice 7

A line chart visualizes car sales from 2001 to 2010, plotting yearly values as a red path over a time-based x-axis and linear y-axis. The D3 v5 code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate an SVG rendering. Data is loaded as CSV from a GitHub gist, with year and sales values parsed before scaling. The chart includes labeled axes, grid lines via tick sizing, and a title, all styled through an external stylesheet.

Mar 29, 2022
Loading thumbnail…

ICE 7question 3 Line Chart

This line chart shows automobile sales in India from 1999 to 2012, with the x-axis mapping years and the y-axis representing sales figures. The visualization uses d3.csv to load data from a GitHub-hosted CSV file, then applies d3.scaleTime and d3.scaleLinear to create the axes, with d3.axisBottom and d3.axisLeft for tick marks. A d3.line generator creates the path, which is rendered as an SVG stroke with a blue color. The chart includes custom axis labels and a title, with margins defined to position the plot within the 960×500 SVG viewport.

Mar 29, 2022
Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This line chart displays automobile sales in India from 1999 to 2012, with the year on the x-axis and sales volume on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map data from a CSV file loaded via d3.csv, with d3.line generating the path. Axes are rendered using d3.axisBottom and d3.axisLeft, and the chart includes labeled axes and a title. The SVG is styled with CSS, and the data is parsed as Date objects and numeric values before rendering.

Mar 29, 2022
Loading thumbnail…

Line_chart_facebook_users

A line chart displays Facebook's annual user counts from 2008 to 2017, with years on the x-axis and user numbers on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for the date axis, `scaleLinear` for the value axis, and a `line` generator to create the path. Data loads from a CSV hosted on GitHub Gist using the `csv` function, and the chart includes labeled axes, grid lines, and a title.

Mar 29, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot animates through different pairings of the Iris dataset’s four measurements, cycling every two seconds. It reuses a custom `scatterPlot` module that relies on `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`axisBottom` to render axes and circles. The main script imports `csv` from D3 v6 to load the data and updates the plot’s x-value accessor via `setInterval`. Styling uses the Share Tech font, with SVG output filling the viewport.

Mar 29, 2022
Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This line chart displays automobile sales in India from 1999 to 2012, with the year on the x-axis and sales volume on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map data from a CSV file loaded via d3.csv, with d3.line generating the path. Axes are rendered using d3.axisBottom and d3.axisLeft, and the chart includes labeled axes and a title. The SVG is styled with CSS, and the data is parsed as Date objects and numeric values before rendering.

Mar 29, 2022
Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This line chart visualizes automobile sales in India from 1999 to 2012, with the x-axis representing years and the y-axis showing sales figures. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map data, along with d3.axisBottom and d3.axisLeft for labeled axes. A d3.line generator creates the blue sales trend line, while the data is loaded asynchronously from a GitHub-hosted CSV file using d3.csv. The chart includes axis labels, a title, and grid lines, with styling applied via external CSS.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of Line Chart

This chart displays the annual total US automotive sales from 2005 to 2022 as a single red line. Built with D3 v5, it uses `scaleTime` for the year axis, `scaleLinear` for the sales axis, `axisBottom`, and `axisLeft`, with the line generated by the `line` function. Data is loaded from a CSV file using the `csv` function and rendered as SVG.

Mar 29, 2022
Loading thumbnail…

Fork of Line Chart

This line chart visualizes US automotive sales from 2005 to 2022, displaying annual sales figures over time. The chart uses D3 v5’s `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and a `line` generator to render the SVG path. Axes are drawn with `axisBottom` and `axisLeft`, while gridlines are created via tick sizing. Data is loaded as CSV from a GitHub gist, with sales values parsed as numbers and years as Date objects.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of ICE 7question 3 Line Chart

This line chart shows automobile sales in India from 1999 to 2012, with the year on the x-axis and sales values on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while a `line` generator creates the blue sales curve. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and the SVG is rendered within a React component. The chart includes labeled axes and a title, with a clean grid background provided by the tick lines.

Mar 29, 2022
Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This line chart displays automobile sales in India from 1999 to 2012, with the year on the x-axis and sales volume on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map data from a CSV file loaded via d3.csv, with d3.line generating the path. Axes are rendered using d3.axisBottom and d3.axisLeft, and the chart includes labeled axes and a title. The SVG is styled with CSS, and the data is parsed as Date objects and numeric values before rendering.

Mar 29, 2022
Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of the ICE 7 Area Chart visualizes annual car sales in India from 2009 to 2019, using a smooth curve to show the sales trend over time. The chart combines a black line and an orange filled area beneath it, with labeled axes for year and sales. It loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and builds the visualization using `d3.line` and `d3.area` generators with `curveBasis` smoothing. Axes are rendered with `d3.axisBottom`, `d3.axisLeft`, and scales from `d3.scaleTime` and `d3.scaleLinear`, output as SVG.

Mar 29, 2022
Loading thumbnail…

Pie Chart

A pie chart displays car prices for February 2021 from a CSV file, with each slice sized by the monthly price value and a legend showing car names, percentage of total, and price in thousands. The visualization uses D3 v5 APIs including `d3.pie` and `d3.arc` to generate SVG paths, `d3.scaleOrdinal` for color mapping, and `d3.format` for tick labels. Data loads asynchronously via `d3.csv` from a Gist URL, and the chart renders with custom legend styling.

Mar 29, 2022
Loading thumbnail…

Pie Chart

This pie chart visualizes February car prices from a 2021 dataset, with each slice-sized proportionally to a car’s February price and paired with a legend showing car names, percentage shares, and dollar amounts. The chart uses `d3.pie` to compute segment angles and `d3.arc` for SVG path generation, with `d3.scaleOrdinal` assigning colors to slices. Legends are manually appended as rectangles and text elements, while values are formatted using `d3.format`. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, and the SVG rendering is handled directly in the browser.

Mar 29, 2022
Loading thumbnail…

Pie Chart

This pie chart shows the distribution of 2022 U.S. auto sales by brand, with each slice sized proportionally to the brand’s year-to-date sales total. The chart renders an SVG with colored arcs and a legend listing each brand’s name, percentage share, and sales volume in thousands. The code uses d3.pie, d3.arc, and d3.scaleOrdinal to generate the chart, and loads CSV data from a GitHub gist via d3.csv. Percentages are calculated by dividing each brand’s sales by the total.

Mar 29, 2022
Loading thumbnail…

Fork of D3 Starter

This example shows a minimal D3 starter page that displays the text "Hello D3 version 7" centered on a blank canvas. It uses the D3 v7 library, specifically the `select` API to target the body element and set its text content. The page loads D3 from a CDN, while the main JavaScript file imports the `select` function to perform the update. The HTML is styled with large font size and centered alignment for visual emphasis.

Mar 29, 2022
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to render a simple text message in the browser using D3.js and local ES6 modules. The code imports the `select` function from D3 and a `message` constant from a separate `myMessage.js` module, then sets the text content of a `#message` div. The page loads D3 v5 from UNPKG and applies centered, large-font styling from an external CSS file.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a pie chart of YTD sales by brand, with a legend displaying each brand's share as a percentage and a value in thousands. The visualization is built with D3 v3, using `d3.pie` to generate segment data, `d3.arc` for path construction, and `d3.scaleOrdinal` for categorical colors. Data is loaded asynchronously from an external source via a helper function `getData`, and the chart renders with a fixed SVG viewport.

Mar 29, 2022
Loading thumbnail…

Untitled

This animated scatter plot explores the Iris dataset, cycling through four different variable pairings on the x-axis every two seconds while keeping sepal length on the y-axis. Built with D3.js, it uses the reusable chart pattern from `scatterPlot.js`, which leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render circles with a fixed radius. The data is loaded as CSV from a GitHub Gist and parsed into numeric values. The animation is driven by `setInterval` in `index.js`, which updates the chart’s x-value accessor and re-invokes the plot function.

Mar 29, 2022
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal static HTML page that renders the text “Hello HTML!” centered at a very large font size. The page is styled with a CSS rule that sets the font size to 13em and uses text-align to center the message. The implementation relies solely on plain HTML and CSS, with no JavaScript, data, or external libraries. It serves as a bare-bones starter template for understanding the basic structure of a web page, contrasting with more complex frameworks like React.

Mar 29, 2022
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal static HTML page that renders the text “Hello HTML!” centered at a very large font size. The page is styled with a CSS rule that sets the font size to 13em and uses text-align to center the message. The implementation relies solely on plain HTML and CSS, with no JavaScript, data, or external libraries. It serves as a bare-bones starter template for understanding the basic structure of a web page, contrasting with more complex frameworks like React.

Mar 29, 2022
Loading thumbnail…

Fork of PIE Chart Aishwarya M

This example shows the top 10 countries by deaths from air pollution in 2020 using a pie chart. Each slice is labeled with its value in thousands, and a legend lists country names alongside colored swatches and corresponding death counts. The visualization is built with D3.js version 5, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths and labels. Data is loaded as CSV from a GitHub gist, and the chart is rendered in an SVG container.

Mar 29, 2022
Loading thumbnail…

Fork of Pie Chart

This donut chart displays 2022 US auto sales by brand, using a 2021 car prices dataset loaded from a GitHub gist via the `csv` function. The chart is rendered as an SVG using `d3.pie` and `d3.arc`, with color encoding via `scaleOrdinal` and a custom legend showing each brand’s percentage of total sales and absolute sales in thousands. Data is aggregated by summing the `YTD` field, and text is formatted with `format`.

Mar 29, 2022
Loading thumbnail…

Fork of Line_chart_facebook_users

A line chart tracks the annual number of Facebook users from 2008 to 2017, with the x-axis showing time as dates and the y-axis representing user counts. The chart, rendered as SVG, loads data from a CSV file using `d3.csv`. The code uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.line` to generate the path. Point labels are omitted, but axis tick text and lines are styled with green and bold characters, while the line itself is blue and thick.

Mar 29, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, cycling through different pairings of sepal and petal measurements every two seconds to reveal correlations. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map the data to SVG circles, while a reusable chart function encapsulates the rendering logic. The plot animates by updating the x-axis value and re-invoking the chart, with axes and points redrawn dynamically.

Mar 29, 2022
Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart shows the sales of cars in India from 2009 to 2019. It combines a smooth line and a shaded area under the curve, with a time-scaled x-axis for years and a linear y-axis for sales figures. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` with `curveBasis` smoothing. Data is loaded from a CSV file hosted on GitHub Gist, and the chart is rendered as an SVG with styled grid lines and axis labels.

Mar 29, 2022
Loading thumbnail…

Fork of Area_Chart_facebook_users_anually

This visualization shows Facebook’s annual user growth from 2008 to 2017 using a combined line and area chart. A smooth curved line traces the rising user counts, while a pink filled area underneath emphasizes the cumulative growth trend. Built with D3 v5, the example uses `scaleLinear`, `line`, and `area` generators with `curveBasis` to create the smoothed paths, along with `axisLeft` and `axisBottom` for labeled axes. Data is loaded from a remote CSV file and rendered as an SVG, with custom styling applied via CSS classes.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of ICE-7 pie chart

This visualization presents a pie chart showing the number of car units sold for different car models. The chart uses a donut-style layout with a central hole, and each slice is colored distinctly to represent a different car. A legend on the right side lists each car name with its corresponding color and the exact unit count. The visualization is built using D3.js version 5, fetching data from a CSV file hosted on GitHub. The code uses D3's `arc`, `pie`, and `scaleOrdinal` functions to generate the chart and legend, with custom section colors and formatted tick values for the legend text.

Mar 29, 2022
Loading thumbnail…

Fork of ICE-7 pie chart

This chart visualizes the number of car units sold per car model as a donut pie chart, with each segment sized proportionally to its value and a corresponding legend that pairs each car category with its numeric sales figure. The visualization is built using D3 version 5, employing `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the arcs and color scheme, while data is loaded asynchronously from a CSV file via `d3.csv`. The SVG output positions the donut centered at the left, with the legend displayed on the right, and uses a custom text formatting function for axis tick labels.

Mar 29, 2022
Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart shows the sales of cars in India from 2009 to 2019. It combines a smooth line and a shaded area under the curve, with a time-scaled x-axis for years and a linear y-axis for sales figures. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` with `curveBasis` smoothing. Data is loaded from a CSV file hosted on GitHub Gist, and the chart is rendered as an SVG with styled grid lines and axis labels.

Mar 29, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart

This gallery example presents a pie chart visualizing sales percentages for different items, sourced from a CSV dataset by Ramyapriya Putta. The chart uses D3 v5’s `pie()` and `arc()` generators to render SVG paths, with categorical colors assigned via `scaleOrdinal`. A legend, built with appended rectangles and text, labels each item and its percentage using `format('.4~g')`. The visualization iterates through the data asynchronously via `d3.csv`.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

This example visualizes the top ten cricketers and their career runs as a pie chart, with each slice sized proportionally to the player’s total runs and colored using the d3.schemeCategory10 scale. A legend on the right lists each player’s name and formatted run total. The code loads data from a JSON file using d3.json, then employs d3.pie and d3.arc to compute and draw the SVG segments, while d3.scaleOrdinal assigns colors and d3.format displays the numerical labels.

Mar 29, 2022
Loading thumbnail…

Fork of 3D Bar Plot AISHWARYA-M

This fork of a 3D bar plot visualizes population data from the United Nations 2019 dataset using the d3-3d library to render cubes as bars with height representing population values. The chart supports interactive rotation through d3.drag() events, allowing viewers to rotate the cube field along X and Z axes. Coded with D3 v4, the visualization renders as SVG with transitions animating cube faces and value labels, while also including a separate React-based bar chart component that reads the same UN population CSV data.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of Pie Chart

This example shows the amount of protein in grams present in various cereals as a pie chart, with a legend identifying each cereal and its corresponding protein value. The visualization loads a CSV dataset from a GitHub gist using `d3.csv` and renders the chart as SVG. It uses `d3.pie` to compute the arc angles, `d3.arc` to generate the path segments, and `d3.scaleOrdinal` to assign colors from a fixed palette. A separate legend group is built by appending rectangles and text labels for each data entry.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of Fork of Fork of ICE7 Pie Chart

This pie chart visualizes the total runs scored by ten top cricketers, with each slice sized proportionally to a player’s run total and colored using d3.schemeCategory10. A legend on the right lists each player’s name and formatted run count. The visualization loads data from a JSON file, processes it with d3.json, and renders SVG paths using d3.pie() and d3.arc(). Color mapping and legend generation rely on d3.scaleOrdinal and d3.format for numeric tick labels.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

This example visualizes the top ten cricketers and their career runs as a pie chart, with each slice sized proportionally to the player’s total runs and colored using the d3.schemeCategory10 scale. A legend on the right lists each player’s name and formatted run total. The code loads data from a JSON file using d3.json, then employs d3.pie and d3.arc to compute and draw the SVG segments, while d3.scaleOrdinal assigns colors and d3.format displays the numerical labels.

Mar 29, 2022
Loading thumbnail…

Fork of Pie Chart

This D3.js example visualizes 2022 US auto sales by brand as a pie chart, displaying each brand's market share as a percentage and total sales in thousands. The chart uses D3's `pie` function to compute arc segments, `arc` to render the paths, and `scaleOrdinal` to assign a custom color palette. The visualization is drawn as SVG, with a legend showing brand names, market share percentages, and sales volumes. The data is loaded from a CSV file hosted on GitHub Gist using D3's `csv` method.

Mar 29, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by deaths from air pollution in 2020, displaying each country’s death count both on the slices and in a legend. The chart uses d3.pie and d3.arc to generate the segments, with d3.scaleOrdinal assigning slice colors from a predefined array. Data is loaded as CSV from a remote gist, and death values are formatted in thousands (e.g., “54.3K”) using d3.format. The legend pairs colored rectangles with country names and values, all rendered as SVG elements within a fixed 960×500 canvas.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

This example visualizes the top ten cricketers and their career runs as a pie chart, with each slice sized proportionally to the player’s total runs and colored using the d3.schemeCategory10 scale. A legend on the right lists each player’s name and formatted run total. The code loads data from a JSON file using d3.json, then employs d3.pie and d3.arc to compute and draw the SVG segments, while d3.scaleOrdinal assigns colors and d3.format displays the numerical labels.

Mar 29, 2022
Loading thumbnail…

Fork of Pie Chart

A pie chart visualizes 2022 U.S. auto sales by brand, with each slice’s color, area, and legend entry representing the year-to-date sales figures. The legend lists brand names alongside their percentage of total sales and raw sales values in thousands. The code loads CSV data from a GitHub gist using `d3.csv`, then uses `d3.pie` and `d3.arc` to generate SVG paths, with `d3.scaleOrdinal` for colors and `d3.format` for tick labels. Legends are appended as SVG groups with rectangles and text elements.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of Fork of Fork of Pie Chart

This example visualizes 2022 US auto sales by brand as a pie chart, showing each brand’s market share as a percentage and sales volume in thousands. The chart uses d3.pie and d3.arc to generate SVG paths, with d3.scaleOrdinal assigning distinct colors to each segment. Legends display brand names, percentages, and sales figures, computed from the total YTD sales. Data is loaded asynchronously from a CSV file using d3.csv, and the rendering is done with d3.select and SVG elements.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of Fork of Pie Chart

This pie chart displays 2022 US auto sales by brand, showing each brand’s share as a percentage and raw sales in thousands. The visualization uses a static SVG rendered with D3 v5, where slices are generated via `d3.pie` and `d3.arc`, with colors assigned using `d3.scaleOrdinal`. Legends are manually appended, listing each brand, its percentage, and sales volume. Data is loaded asynchronously from a CSV file hosted in a GitHub gist using `d3.csv`, with numeric sales values parsed before rendering.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of Pie Chart

This example shows 2022 US auto sales by brand as a pie chart, with each slice representing a brand’s year-to-date sales as a share of the total. The chart displays color-coded segments, a legend with brand names, and both percentage and raw sales (in thousands) labels. Using d3.csv to load data from a GitHub gist, the code employs d3.pie, d3.arc, and d3.scaleOrdinal to compute and render the SVG paths, and d3.format to abbreviate numeric tick labels.

Mar 29, 2022
Loading thumbnail…

Fork of Pie Chart

A fork of a pie chart visualization displays 2022 US auto sales by brand, sourced from a CSV file hosted on a gist. The chart uses d3.pie and d3.arc to generate SVG segments, with d3.scaleOrdinal assigning a custom color palette. Each brand’s slice is accompanied by a legend showing the brand name, its percentage of total sales (computed from the summed YTD values), and the sales figure in thousands. The code loads data asynchronously using d3.csv, then renders the chart and legends via SVG groups, with text formatted using d3.format.

Mar 29, 2022
Loading thumbnail…

Fork of Pie Chart

A fork of a pie chart visualization displays 2022 US auto sales by brand, sourced from a CSV file hosted on a gist. The chart uses d3.pie and d3.arc to generate SVG segments, with d3.scaleOrdinal assigning a custom color palette. Each brand’s slice is accompanied by a legend showing the brand name, its percentage of total sales (computed from the summed YTD values), and the sales figure in thousands. The code loads data asynchronously using d3.csv, then renders the chart and legends via SVG groups, with text formatted using d3.format.

Mar 29, 2022
Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes 2022 U.S. auto sales by brand, showing each brand’s market share as a percentage of total year-to-date sales and its corresponding sales volume in thousands. The chart uses d3.pie and d3.arc to generate the segments, with d3.scaleOrdinal assigning colors. Data is loaded from a CSV via d3.csv, and legends display brand names, percentage shares, and sales figures. The chart is rendered as an SVG with d3.select, and text formatting uses d3.format.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of ICE-6:Sai Meghana

This bar chart displays the top 10 car prices from a CSV file, with each bar sized according to the car’s price. The chart uses React to build the user interface and D3.js to handle data loading, scaling, and rendering. The visualization’s axes and bars are constructed using D3’s `scaleBand`, `scaleLinear`, and `max` functions, drawing elements as SVG rectangles. The data is fetched from a remote CSV URL and the chart includes grid lines and tick labels for readability.

Mar 29, 2022
Loading thumbnail…

Reusable D3 Scatter Plot.

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal and sepal dimensions for three species (setosa, versicolor, virginica) with distinct colors. A setInterval animation cycles through different x-axis attributes (petal_width, sepal_width, petal_length, sepal_length) every few seconds, updating the axes and point positions. Built with d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom, the plot renders as an SVG with circles and includes custom legends and axis labels. The data comes from a CSV loaded via d3.csv.

Mar 29, 2022
Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through four different x-axis attributes (petal width, sepal width, petal length, sepal length) on an interval timer while the y-axis remains fixed on sepal length. The plot uses D3 v6's `scaleLinear`, `axisLeft`, and `axisBottom` APIs to render axes and SVG circles for data points, colored by species (setosa, versicolor, virginica). A legend and title are drawn directly into the SVG, with data loaded from a remote CSV via `d3.csv`.

Mar 29, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot visualizes the Iris dataset, cycling through different feature pairings on the x-axis (petal width, sepal width, petal length, and sepal length) while keeping sepal length on the y-axis. D3.js v6 is used for data loading via `csv()`, custom scatter plot creation with `scaleLinear()`, `axisLeft()`, and `axisBottom()`, and SVG rendering. Points are colored by species (setosa, versicolor, virginica) and animated with `setInterval()`, which updates the x-axis mapping and redraws the plot, including a manual legend.

Mar 28, 2022
Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This animated scatter plot cycles through different iris flower measurements, plotting petal width, sepal width, petal length, and sepal length every two seconds. The visualization uses the D3.js library's `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll` APIs to render SVG circles and axes. Data comes from the classic Iris dataset loaded via D3's `csv` function. Circle colors encode species—blue for setosa, red for versicolor, yellow for virginica—while a black background and white axis labels maintain high contrast throughout the animation.

Mar 28, 2022
Loading thumbnail…

maggi

This visualization displays a 3D bar chart comparing gemstone prices (diamond, emerald, ruby) across four unspecified value categories. The chart uses AnyChart's `bar3d` method with a Cartesian 3D layout. The code maps data through `anychart.data.set` and `mapAs` to create four series, applies dollar formatting to the y-axis labels, and configures tooltips, legends, and interactive hover modes. The chart is rendered in a full-page container using AnyChart's standard API.

Mar 12, 2022
Loading thumbnail…

Untitled

A 3D bar chart displays the prices of gemstone categories (diamond, emerald, ruby) across four unnamed series. The visualization uses AnyChart’s `bar3d` chart type with data mapped from a static dataset. The chart includes animated rendering, a dollar-formatted y-axis, rotated x-axis labels, a legend, and custom tooltips showing values in dollars. The bar series are styled with depth and perspective via `zAspect`, `zAngle`, and `zDistribution` settings.

Mar 12, 2022
Loading thumbnail…

Fork of interactive bar chart

This interactive column chart displays GEMSTONES data, with bars representing values for categories like Diamond, Bluesaphire, Emerald, and others. The chart uses a 3D perspective effect with configurable rotation parameters. Built with the Highcharts JavaScript library and jQuery, the code configures a column chart with stacked, grouped bars and custom depth settings. The y-axis is labeled "Most effected Countries with Covid," though the series data appears to represent prices.

Mar 12, 2022
Loading thumbnail…

interactive bar chart

This interactive bar chart displays gemstone prices using a 3D column layout, with each bar representing a different gem type such as Diamond, Emerald, and Ruby. The chart employs Highcharts within a jQuery interface, configured with 3D rendering options including alpha, beta, and depth settings. The data values, shown on the y-axis labeled with COVID-related context, are presented in a single series titled "Total Price." The visualization uses categorical x-axis labels and stacked column formatting to compare the gemstone values.

Mar 12, 2022
Loading thumbnail…

sai meghana.e

This 3D scatter plot visualizes measurements from a classic iris dataset, plotting sepal length, sepal width, and petal length in a three-dimensional space. Each black marker represents a data point, rendered with subtle gray outlines and partial opacity to reveal overlapping points. The visualization loads its CSV data using D3’s `d3.csv` method and constructs an interactive 3D scene through Plotly’s `Plotly.newPlot` function with a `scatter3d` trace type, while the underlying rendering relies on Three.js via the Plotly webgl backend. The chart includes labeled axis titles for the two sepal dimensions, though the z-axis retains a generic placeholder label.

Mar 12, 2022
Loading thumbnail…

Sai Meghana

A 3D scatter plot displays the classic Iris dataset, plotting sepal length, sepal width, and petal length as black markers with subtle gray outlines. The visualization uses Plotly’s `scatter3d` trace type within an interactive WebGL-rendered scene, offering rotatable and zoomable exploration. Data is loaded asynchronously via D3’s `d3.csv` from a remote GitHub gist, with axes labeled accordingly. The layout minimizes margins and sets explicit axis titles, while marker size, opacity, and line styling are configured directly in the trace definition, creating a clean, focus-driven view of the multivariate flower measurements.

Mar 12, 2022
Loading thumbnail…

Untitled

This 3D scatter plot visualizes the iris dataset, showing sepal length, sepal width, and petal length as black markers with subtle gray outlines. Built with Plotly.js and D3.js, the code loads CSV data via d3.csv, unpacks columns into x, y, and z coordinates, and renders an interactive WebGL scatter plot. The scene includes labeled axes for the first two variables and a generic "Z AXIS TITLE" placeholder, with markers sized at 12 and 0.9 opacity.

Mar 12, 2022
Loading thumbnail…

Fork of 3D Bar Chart AISHWARYA-M

This example displays a 3D bar chart using D3.js and SVG, showing the frequency of car models from a tab-separated data file. The bars are drawn as three visible faces (front, top, left, or right) selected by a perspective projection function that maps 3D coordinates to 2D. Using D3 scales and axes, the chart sorts bars by distance from the center to manage overlap, and includes hover states that change bar colors. The animation and transitions update polygon paths for each bar face.

Mar 12, 2022
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart displays two years of personal electricity consumption across multiple accounts in a three-family building. It uses d3.stack to aggregate kilowatt-hour readings by monthly read dates, with green and blue bars representing different account numbers. The visualization is rendered with SVG rectangles scaled by d3.scaleBand and d3.scaleLinear, while d3.scaleOrdinal assigns colors from d3.schemeCategory10. Axes are generated using axisLeft and axisBottom, and hover interactions adjust bar opacity with native title tooltips showing kWh values.

Mar 12, 2022
Loading thumbnail…

Sai Meghana

This example visualizes six years of gemstone price data across multiple gem types using an interactive 3D bar chart. The visualization renders the dataset as a multi-series bar chart in three-dimensional space, with each bar’s height representing a yearly value. The code loads CSV data via `d3.csv`, parses it with a custom row function, and renders the chart using the `d3.x3d.chart.barChartMultiSeries` API, which integrates D3 with X3DOM for WebGL-based 3D graphics. The chart is displayed within an HTML div using D3’s selection and `.datum()` method.

Mar 12, 2022
Loading thumbnail…

Fork of Fork of ICE-6:Sai Meghana

This bar chart displays the top 10 car prices from a CSV file, with each bar sized according to the car’s price. The chart uses React to build the user interface and D3.js to handle data loading, scaling, and rendering. The visualization’s axes and bars are constructed using D3’s `scaleBand`, `scaleLinear`, and `max` functions, drawing elements as SVG rectangles. The data is fetched from a remote CSV URL and the chart includes grid lines and tick labels for readability.

Mar 12, 2022
Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This horizontal bar chart displays the top 10 cosmetic products by revenue, with revenue values on the x-axis and product names on the y-axis. The chart uses D3 v5’s `scaleLinear` and `scaleBand` for scaling, `axisBottom` and `axisLeft` for axes, and formats tick labels with `format` to abbreviate large numbers. Data is loaded via `d3.csv` from a GitHub gist, and the SVG rendering includes custom axis label and title text.

Mar 11, 2022
Loading thumbnail…

Fork of Fork of ICE-6:Sai Meghana

This bar chart displays the top 10 car prices from a CSV file, with each bar sized according to the car’s price. The chart uses React to build the user interface and D3.js to handle data loading, scaling, and rendering. The visualization’s axes and bars are constructed using D3’s `scaleBand`, `scaleLinear`, and `max` functions, drawing elements as SVG rectangles. The data is fetched from a remote CSV URL and the chart includes grid lines and tick labels for readability.

Mar 8, 2022
Loading thumbnail…

Fork of scatter plot

This example presents a scatter plot of the Iris Dataset, mapping petal length and width for each flower. Points are colored green, yellow, or black to indicate the species (setosa, versicolor, or virginica). The visualization uses D3’s `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions. The SVG circles also encode sepal dimensions via the `rx` and `ry` attributes, though their visual effect is minimal. Data is loaded from a CSV URL, and axes are labeled with custom font styling.

Mar 8, 2022
Loading thumbnail…

Fork of ICE-6:Sai Meghana

This visualization displays the top 10 car prices from a CSV dataset, rendered as a horizontal bar chart using React and D3 v5. It loads the data with `d3.csv`, scales the numeric price values with `d3.scaleLinear`, a categorical car names with `d3.scaleBand`, and draws SVG rectangles for each bar. The chart includes grid lines and axis tick labels generated from the scales, and updates reactively once the dataset has loaded.

Mar 8, 2022
Loading thumbnail…

ICE-6:Sai Meghana

A bar chart displays the top 10 car prices from a CSV file, using a linear x-scale and a categorical y-scale. The chart visualizes the price of each car as a horizontal bar, with labels on the y-axis and tick marks on the x-axis. Built with React and D3 v5, it uses `d3.csv` to fetch data, `d3.scaleBand` for the categorical axis, and `d3.scaleLinear` for the numeric axis, rendering as SVG.

Mar 8, 2022
Loading thumbnail…

Fork of ICE-6:Sai Meghana

This example visualizes the top 7 SUV car prices using a horizontal bar chart. It loads CSV data from a GitHub gist and displays the first 10 records, mapping car names to the y-axis and price to bar width. The chart is built with React for component structure and d3.js for scales and axes. SVG is used for rendering, with d3.scaleBand and d3.scaleLinear creating the layout, and orange gridlines marking tick values.

Mar 8, 2022
Loading thumbnail…

ICE-6:Sai Meghana

This example shows a horizontal bar chart of the top 7 SUV cars ranked by price, with each bar labeled by car name and value. The visualization uses React to manage the component state and render SVG elements, while D3 v5 provides scales and data loading through `d3.csv` and `d3.scaleBand`/`d3.scaleLinear`. Data comes from a CSV file of car prices, filtered to the first 10 entries, with grid lines and tick labels generated from `xScale.ticks()`.

Mar 8, 2022
Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6:Sai Meghana

This visualization displays the top 7 SUV cars ranked by price as a horizontal bar chart. The chart uses React to render an SVG, with D3 scales (`d3.scaleBand` and `d3.scaleLinear`) positioning the bars and axis ticks. Data is loaded asynchronously via `d3.csv` from a GitHub gist, with the price field parsed as a number for the horizontal axis. The visualization includes orange gridlines and labels for each car model.

Mar 8, 2022
Loading thumbnail…

Fork of Fork of Fork of ICE-6:Sai Meghana

A horizontal bar chart displays the top 7 SUV cars ranked by price, with each bar labeled by car name and value on a linear price scale. The visualization uses React to manage state and render SVG elements, while D3 v5 handles data loading via `d3.csv` and scales (`d3.scaleBand`, `d3.scaleLinear`). Grid lines appear in orange for each price tick, and bars have fixed heights within a band layout. Data comes from a remote CSV file, processed asynchronously and sliced to ten entries.

Mar 8, 2022
Loading thumbnail…

Fork of Fork of ICE-6:Sai Meghana

This example displays a horizontal bar chart of the top 7 SUV cars based on their price. The visualization is built with React and D3 v5, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Data is loaded asynchronously from a CSV file via `d3.csv` and rendered as SVG rectangles within a React component. The chart includes gridlines, axis ticks, and car name labels, with margins defined to accommodate the layout.

Mar 8, 2022
Loading thumbnail…

scatter plot

This D3 scatter plot displays the Iris Dataset, using petal length and width for the x- and y-axes while encoding species membership through circle colors (green, yellow, and black). It also maps sepal measurements to each point’s `rx` and `ry` attributes, though these elliptical properties are overridden by a fixed radius. Data loads via `d3.csv` and parses numeric columns. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, while scales use `d3.scaleLinear` and domains derive from `d3.extent`. SVG rendering creates responsive, full-viewport visuals with rotated axis labels.

Mar 8, 2022
Loading thumbnail…

Fork of Fork of Iris Dataset Scatter Plot

This visualization displays the classic Iris Dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis. Individual data points are colored by species—green for setosa, yellow for versicolor, and black for virginica—using D3’s scaleLinear and extent functions to set the scales. The SVG rendering uses D3 v6 to append circles, with axes added via axisLeft and axisBottom. Although sepal length and width values are read from the CSV, they are assigned as rx and ry attributes on circles, which does not affect their circular appearance since the radius remains fixed.

Mar 8, 2022
Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This example visualizes the classic Iris dataset with a scatter plot, mapping petal length and width as the x and y coordinates for each data point. Each of the three iris species is distinguished by a unique fill color, and the plot includes labeled axes for both dimensions. The code uses D3 version 6.7.0, loading data from a remote CSV via `d3.csv`, then employing `d3.scaleLinear` for scaling and `d3.axisLeft` and `d3.axisBottom` for the axes. The visualization is rendered as an SVG appended to the body, with circles representing each flower, and all elements are positioned using functions from the D3 API.

Mar 8, 2022
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x and y axes while colors denote the three species (setosa, versicolor, and others). It also embeds sepal length and width as additional attributes on the circles. The code loads CSV data via `d3.csv`, scales the values with `d3.scaleLinear`, and renders SVG circles using `d3.select` and `.join()`. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, and the visualization fills the browser window using `window.innerWidth` and `window.innerHeight`.

Mar 8, 2022
Loading thumbnail…

Untitled

This interactive D3.js (v6) scatter plot visualizes the classic Iris dataset, mapping petal length and width to the x and y axes. Points are color-coded by species, with setosa, versicolor, and virginica rendered in blue, red, and black respectively. The SVG rendering uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.axisLeft and d3.axisBottom for tick marks. The code loads data via d3.csv from a GitHub gist, parsing numeric fields, and draws circles with a fixed radius, while also storing sepal dimensions as unused properties on each mark.

Mar 8, 2022
Loading thumbnail…

Fork of ICE-6:Sai Meghana

This visualization presents the top 7 SUV cars ranked by maximum speed, displayed as a horizontal bar chart using React and D3 v5. The chart maps car names to the y-axis and their speed values to the x-axis, with blue grid lines and labeled ticks. Data is loaded asynchronously from a CSV file via `d3.csv`, with speed values parsed and transformed into a linear scale for bar widths. The SVG rendering uses `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the continuous speed dimension.

Mar 8, 2022
Loading thumbnail…

ICE-6:Sai Meghana

This interactive bar chart displays the top 7 SUV cars based on maximum speed, sorted in descending order. The visualization uses a horizontal bar layout with labeled axes, where each bar represents a car model and its length corresponds to the max speed value. Built with React and D3.js (v5), the chart loads data from a CSV file hosted on GitHub, mapping the data through D3’s `d3.csv` and `d3.scaleBand` for categorical positioning and `d3.scaleLinear` for the quantitative axis. The bars are rendered as SVG rectangles within a React component, with axis ticks and labels generated from the scales.

Mar 8, 2022
Loading thumbnail…

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

This bar chart shows the top 10 most populous countries in 2019, with each bar's length proportional to the country's population. The visualization is rendered as an SVG using React and D3 v5, with D3's `scaleBand` and `scaleLinear` functions mapping country names and population values to screen coordinates. The chart includes labeled axes for population counts and country names. Data is loaded asynchronously from a CSV file using D3's `csv` function, and the top 10 rows are displayed after sorting.

Mar 8, 2022
Loading thumbnail…

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

This bar chart shows the top 10 most populous countries in 2019, with each bar's length proportional to the country's population. The visualization is rendered as an SVG using React and D3 v5, with D3's `scaleBand` and `scaleLinear` functions mapping country names and population values to screen coordinates. The chart includes labeled axes for population counts and country names. Data is loaded asynchronously from a CSV file using D3's `csv` function, and the top 10 rows are displayed after sorting.

Mar 8, 2022
Loading thumbnail…

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

This example visualizes the top 10 most populous countries as a bar chart, using horizontal bars to compare population counts. The chart employs React for component structure and state management, while D3.js version 5 provides the scaling and layout functions, including `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously from a CSV file via `d3.csv`, and the SVG rendering uses React's declarative syntax to draw the bars and axes.

Mar 8, 2022
Loading thumbnail…

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

A horizontal bar chart displays the top 10 most populous countries, ranked by their 2019 population values. The chart fetches data from a CSV file hosted on GitHub, slices it to 10 entries, and renders the result as an SVG. The code uses React for component structure and state management, combined with D3 v5 APIs such as `scaleBand` and `scaleLinear` for axis scaling, and `csv` for data loading. Blue grid lines and axis ticks are generated from the linear scale, while country names appear along the y-axis.

Mar 8, 2022
Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the prices of various pizzas, with each bar representing a pizza name and its price. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map price values and categories, while `axisBottom` and `axisLeft` generate the axes. Data is loaded from a CSV file via `d3.csv`, and the chart is rendered as an SVG. The code also customizes axis tick formatting and removes gridlines, with the source data based on 2018 United Nations population estimates.

Mar 8, 2022
Loading thumbnail…

Fork of Fork of Representing a volume of dataset .

This example displays metadata about a pizzas dataset from Kaggle, showing the file size in kilobytes, row count, and column count as text on a pink background. The page also embeds a static SVG illustration of pizza-related graphics. The code loads CSV data using `d3.csv` from D3 v7, formats it with `d3.csvFormat`, and updates a `<pre>` element’s text content to present the summary. Styling is handled through inline CSS, and the visualization uses a plain HTML structure with an embedded image.

Feb 26, 2022
Loading thumbnail…

Fork of Fork of Fork of Representing a volume of dataset .

This visualization displays metadata about a pizzas dataset from Kaggle, including file size, row count, and column count. The page renders this information in a styled HTML text container alongside an SVG illustration of a pizza. The code loads the dataset from a GitHub Gist using D3.js v7’s `d3.csv` function, then computes and displays the statistics with `d3.csvFormat`, `data.length`, and `data.columns.length`. The example uses basic HTML, CSS, and JavaScript within a React framework, with the SVG image embedded directly in the page.

Feb 26, 2022
Loading thumbnail…

Fork of Fork of Representing a volume of dataset .

This example displays metadata about a pizzas dataset from Kaggle, showing the file size in kilobytes, row count, and column count as text on a pink background. The page also embeds a static SVG illustration of pizza-related graphics. The code loads CSV data using `d3.csv` from D3 v7, formats it with `d3.csvFormat`, and updates a `<pre>` element’s text content to present the summary. Styling is handled through inline CSS, and the visualization uses a plain HTML structure with an embedded image.

Feb 26, 2022
Loading thumbnail…

Fork of Representing a volume of dataset .

This visualization displays metadata about a pizzas dataset from Kaggle, showing the file size, row count, and column count in a styled text container. The page also includes a decorative SVG illustration and a heading. The code uses D3 v7’s `d3.csv` to load the remote CSV file and `d3.csvFormat` to calculate its size, then updates a `<pre>` element with the computed statistics via JavaScript. The layout is defined in HTML with embedded CSS for styling.

Feb 26, 2022
Loading thumbnail…

Representing a volume of dataset .

This example displays a static SVG illustration of a dataset's volume, paired with a text summary of a pizzas dataset from Kaggle. The page shows the data’s size in kilobytes, row count, and column count, which is loaded via D3’s `d3.csv` and formatted with `d3.csvFormat`. The embedded SVG image and the styled text output are rendered using basic HTML and CSS, while D3 v7 handles the asynchronous data fetching.

Feb 26, 2022
Loading thumbnail…

Fork of homework smiley face

A stylized smiley face is rendered as an SVG graphic, composed of a large blue circle, black-outlined eyes with yellow and purple centers, and a mouth drawn as an arc. The face also includes several black lines that appear to depict hair or decorative marks. The visualization is built by combining React primitives with D3's `arc` function to generate the mouth path, with all elements positioned using SVG coordinates. The code constructs the entire figure procedurally, using hardcoded values for radii, offsets, and stroke widths.

Feb 19, 2022