Skip to main content
Log in
N

Naimisha-M

@Naimisha-M·102 public vizzes

Loading thumbnail…

Fork of ICE8 USA Map

This example renders a choropleth-style map of the United States using React and D3 v5. It displays land areas as red paths, state borders as green strokes, and a blue circle mark, all projected with the Albers equal-area projection (_geoAlbers_). The map loads TopoJSON data from the us-atlas states-10m.json dataset via _d3.json_, then converts it to GeoJSON features using the _topojson.feature_ and _topojson.mesh_ functions. The SVG output is generated through _d3.geoPath_ within a React component.

Jul 9, 2022
Loading thumbnail…

Fork of World Map with D3.js!

This example renders a world map using the D3.js library. It draws an equirectangular projection of the globe with a blue sphere and green landmasses, and it highlights countries in orange when hovered over. The map is generated from TopoJSON data loaded from the world-atlas package, which is converted to GeoJSON using the `feature` method. The visualization uses `d3.geoEquirectangular` for the projection, `d3.geoPath` to generate SVG paths, and CSS hover styles for interaction.

Jul 9, 2022
Loading thumbnail…

Fork of World Map IC8

This example renders a world map using a natural Earth projection with D3’s `geoNaturalEarth1` and `geoPath`. Country outlines and filled regions are drawn as SVG paths from TopoJSON data loaded via `d3.json` and processed with `feature` from topojson. The map displays pink for the sphere, blue countries with semi-transparent yellow strokes, set against a black background. It demonstrates basic geographic visualization with D3 v5 in a React-less HTML setup, using asynchronous data fetching and SVG rendering.

Jul 9, 2022
Loading thumbnail…

Fork of World Map

This example uses D3 to render a fork of a world map, displaying country boundaries as light green vector shapes on a white background through an SVG canvas. The visualization applies a Natural Earth projection using `d3.geoNaturalEarth1` and generates the geographic paths with `d3.geoPath`. It loads GeoJSON data from the `world-atlas` package, parses the countries using `topojson`, and draws each feature onto the SVG. The output is a static equirectangular-style map highlighting national borders with subtle black strokes.

Jul 9, 2022
Loading thumbnail…

Fork of Social Network Graph ICE-8

This interactive social network graph visualizes connections between people using a force-directed layout. Nodes represent individuals and links depict their relationships, with arrowhead markers indicating direction. Users can drag nodes to reposition them, and hovering highlights a node with a green outline. The visualization is built with React, D3 v6, and SVG, utilizing `d3.forceSimulation` with link, charge, collision, and center forces. Data is loaded from a local `data.json` file containing explicit node and link definitions, while CSS styles control colors, strokes, and hover effects.

Jul 9, 2022
Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This fork of a D3.js social network graph visualizes connections between people as a force-directed network. Yellow circular nodes represent individuals, while labeled, arrowed links depict friendship relationships with varying weights. The visualization uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. Users can drag nodes to explore the network, and hovering highlights a node with a green outline. Data is loaded from a local JSON file and rendered as SVG elements.

Jul 9, 2022
Loading thumbnail…

Fork of ICE8 - Social Network Graph

This interactive social network graph visualizes relationships between people, with nodes representing individuals and lines indicating friend connections. The visualization uses a force-directed layout via `d3.forceSimulation`, combined with drag interactions and hover effects to highlight nodes. Node labels display names, and link arrowheads are defined with SVG markers. Data is loaded from a JSON file containing nodes and links, and the graph is rendered as SVG elements, using D3 v6 and a yellow color scale for all nodes.

Jul 9, 2022
Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive collapsible tree visualization displays hierarchical data from a JSON file, with each node rendered as a colored rectangle based on its type. The tree expands and collapses with animated transitions when users click on nodes, allowing exploration of the family-styled dataset with labeled links and directional arrows. Built with D3.js v3 and jQuery, the visualization uses SVG for rendering and supports zooming and panning through custom behaviors. Node colors correspond to four distinct data types, while link colors change when selected. The code implements breadth-first traversal for dynamic sizing and collision detection.

Jul 9, 2022
Loading thumbnail…

Fork of World Map with D3.js!

This example displays an interactive world map using a D3.js equirectangular projection, rendered as an SVG. Each country is drawn as a green path with black strokes using the `d3.geoPath` and `d3.geoEquirectangular` APIs, based on GeoJSON data converted from a TopoJSON source via the `topojson.feature` method. Hovering over a country changes its fill color to orange through a CSS `:hover` rule. The map also includes a blue sphere outline generated from a GeoJSON sphere object.

Jul 9, 2022
Loading thumbnail…

Fork of World Map IC8

This example visualizes a world map with countries filled in red and a yellow sphere background, using a natural Earth projection to render geographic features as SVG paths. It loads world data from a remote JSON file via `d3.json` and processes it with `topojson.feature` to extract country boundaries. The code uses `d3.geoPath` with `d3.geoNaturalEarth1` to project coordinates, appending each country path to an SVG element within a React-based setup.

Jul 9, 2022
Loading thumbnail…

Fork of Social Network Graph ICE-8

This static SVG network graph visualizes friendships between eight individuals, with nodes positioned by a force-directed simulation and edges representing "Friend with" relationships. The interactive visualization uses d3.forceSimulation with link, many-body charge, collision, and center forces to layout the graph. Nodes are draggable, and hovering highlights them with a green stroke. The data is loaded from a JSON file, and the graph is rendered using D3 v6 with a fixed 960 by 600 pixel viewBox, using circles and lines.

Jul 8, 2022
Loading thumbnail…

Fork of Social Network graph

This fork of a social network graph visualizes nine individuals ("Rohith" through "ravi") as labeled nodes connected by weighted green links, with node positions determined by a force-directed layout. The example loads data from `graph.json` and renders it as SVG using D3’s legacy `d3.layout.force` API from d3.v2/v4, setting gravity, charge, and link distance parameters. Each node appears as a circle with a blue text label, and link stroke-width reflects the `weight` value from the JSON data. Users can click and drag nodes to reposition them, with the `force` tick handler updating link coordinates and node transformations.

Jul 8, 2022
Loading thumbnail…

Fork of ICE 8 geo map

This fork of the ICE 8 geo map renders a world map using D3.js (v5) and the TopoJSON library. It displays countries as green filled paths with white stroke outlines on a light blue sphere, using the Natural Earth 110m dataset loaded from the world-atlas package. The visualization employs D3’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON features, with the map output embedded as static SVG. The code explicitly calculates the sphere’s outline and fills each country path without interactivity or animation.

Jul 8, 2022
Loading thumbnail…

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

This example renders a world map using D3.js v5 and the topojson library. It projects geographic data from the world-atlas 110m GeoJSON dataset with the Natural Earth projection, drawing each country as a filled path with a subtle stroke. The visualization also displays a blue sphere representing the globe background. The code employs `d3.geoPath` and `geoNaturalEarth1` for map projection and path generation, while `topojson.feature` converts the raw topology into usable features. Styling is applied via CSS classes for the sphere and countries.

Jul 7, 2022
Loading thumbnail…

Fork of Polished World Map

This map visualizes world country boundaries and landmasses using a natural Earth projection, styled with teal landmasses, gray graticules, and highlighted interior borders. It loads TopoJSON data from the World Atlas via `d3.json`, converts it with `topojson.feature` and `topojson.mesh`, then renders SVG paths using `d3.geoPath` and `d3.geoNaturalEarth1`. The React-based application uses `useEffect` for asynchronous data fetching and displays a loading state until the geography is ready.

Jul 7, 2022
Loading thumbnail…

Fork of ICE 8 Family Tree

This example renders a hierarchical family tree as an interactive SVG visualization using D3.js v5 within a React framework. The tree layout positions nodes by depth, with colored labels—crimson root, orange children, indigo grandchildren, and blue leaves—displayed in a brush script font. The code uses `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to generate the structure and paths, while `d3.zoom` enables panning and scaling. Data comes from a local `data.json` file, and white text shadows improve label readability against the black link strokes.

Jul 7, 2022
Loading thumbnail…

ICE 8 Family Tree

This interactive family tree visualization displays the ICE 8 lineage, using a hierarchical layout to organize three generations of relationships. Each node is labeled with a family member's name and colored according to their generational level. The implementation uses D3 v5’s `tree` layout, `linkHorizontal` path generator, and `hierarchy` function to structure the data from a nested JSON file, with SVG rendering. Pan and zoom capabilities are added via D3’s `zoom` event, while text styling and custom fonts are applied through CSS.

Jul 7, 2022
Loading thumbnail…

Fork of Assignment 9: Choropleth Map

This choropleth map displays the percentage of adults with a bachelor’s degree or higher across U.S. counties, using a blue color scale to show geographic variation. The visualization renders county boundaries as SVG paths via `d3.geoPath` and `topojson`, with state outlines overlaid. It loads data from `education.csv` and the `us-10m.v1.json` TopoJSON file, mapping each county’s FIPS code to its value. A color legend with an axis indicates the percentage ranges, and tooltips show county names and exact values on hover.

Jul 7, 2022
Loading thumbnail…

Fork of Fork of Polished World Map

This example presents a stylized world map with country boundaries and graticules, rendered as SVG using React and D3. It employs the `d3.geoInterruptedBoggs` projection with `d3.geoPath` to draw land, sphere, and interior mesh outlines, while `d3.geoGraticule` generates the grid lines. Country data comes from the World Atlas TopoJSON, fetched and processed with `topojson.feature` and `topojson.mesh`. The visualization is polished through a clean color palette and minimal design, with all geographic layers composed in a single SVG group.

Jul 7, 2022
Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This 3D bar chart visualizes the total number of speakers for seven languages across six Indian regions, with each series representing a region. The chart uses the Highcharts library with the highcharts-3d module to render vertical, stacked columns in a three-dimensional space, configured with alpha, beta, and depth options. Data is hardcoded as arrays of coordinate-value pairs, with categories on the x-axis, totals on the y-axis, and a z-axis labeled "Various languages." The visualization employs grouped, padded columns to distinguish regional datasets.

Jul 7, 2022
Loading thumbnail…

Fork of Fork of 3D Scatter Plot Dataset

This 3D scatter plot visualizes a dataset of flower measurements using two marker styles to represent different attribute combinations. The visualization uses Plotly's `scatter3d` trace type, with one series plotting flower length against itself and another plotting length against width. Data is loaded via D3's CSV parser from a GitHub-hosted dataset, and the chart renders inside a designated HTML division using `Plotly.newPlot`. The interactive plot supports rotation and zooming for exploring the three-dimensional point distribution.

Jul 6, 2022
Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example displays six months of car manufacturer sales data as a multi-series 3D bar chart, using the d3-x3d library to render the scene in X3DOM. It loads CSV data via `d3.csv`, parses rows into key-value pairs, and feeds the result into `d3.x3d.chart.barChartMultiSeries()`. The chart updates its display by re-binding the parsed data to the chart holder with `datum()`. The page includes D3 v5, d3-3d, and X3DOM scripts, with axes and bars rendered in a 3D space.

Jul 6, 2022
Loading thumbnail…

Fork of Fork of Bar chart with D3.js

A static bar chart visualizes survey data on language proficiency across ten languages, with values represented as percentages. Built with D3.js v5 and rendered as SVG, the chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. Interactive mouse events trigger transitions that highlight a selected bar, display divergence labels relative to the hovered value, and draw a dashed threshold line using `d3.select` and `.transition()`. The visualization is styled with an Open Sans font and a dark blue background, with grid lines generated via `d3.axisLeft` and `.tickSize`.

Jul 6, 2022
Loading thumbnail…

Fork of Bar chart with D3.js

A fork of a D3.js bar chart displays the most-loved programming languages from the Stack Overflow 2018 survey, showing each language's "love meter" percentage. Built with d3.v5, the SVG chart uses d3.scaleBand and d3.scaleLinear for axes and bars with horizontal grid lines, while mouseenter and mouseleave events trigger transitions that highlight bars and compute divergence values against a reference language. The chart includes labeled axes, a title, and color-coded bars based on survey data.

Jul 6, 2022
Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the most loved programming languages from the 2018 Stack Overflow survey. It uses D3.js v5 with SVG rendering to display the percentage values for each language. The chart includes horizontal grid lines and value labels. Interactive animations occur on mouseenter, which highlights the selected bar, draws a dashed limit line, and displays divergence percentages showing how other languages compare to the selected one. The text labels, axes, and title are all implemented using D3’s scale and axis APIs.

Jul 6, 2022
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, encoding petal length and sepal length on the x- and y-axes while coloring each circle by species (setosa, versicolor, virginica). The visualization cycles through different column pairings every two seconds, animating between sepal width, petal length, and other measurements. Built with D3 v6, the example uses `d3.csv` for data loading, `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` for scales and axes, and SVG circles for rendering. It also demonstrates a reusable chart pattern with a custom `scatterPlot` factory function.

Jul 5, 2022
Loading thumbnail…

Fork of 3D Bar Plot AISHWARYA-M

This example shows a 3D bar plot of UN Population data for 2019, rendering the top 10 countries as extruded cubes arranged along a grid. The visualization uses d3-3d to project 3D geometry into SVG paths, with each cube colored distinctly and labeled with its population value. Users can drag to rotate the scene, adjusting the cube orientations through d3.drag and the d3-3d rotation methods. The initial dataset is loaded via d3.csv from a GitHub gist, while the separate index.js file demonstrates an alternative Plotly-based scatter3d approach using different data.

Jul 5, 2022
Loading thumbnail…

Fork of Fork of d3-x3d : 3D Bar Chart Example

This example visualizes 2021 quarterly vehicle sales for major American automotive brands as an interactive 3D bar chart, rendered within a standard HTML page. It uses the d3-x3d library to bridge D3.js v5 with X3DOM, creating a three-dimensional multi-series bar layout where each manufacturer is grouped by quarter. The chart loads CSV data from a GitHub Gist, parses the values, and binds them to the visualization. The page also includes a background image of car logos, with the chart displayed in a fixed-height div.

Jul 5, 2022
Loading thumbnail…

Fork of Fork of 3D Bar Chart using D3.js

This visualization presents six months of car manufacturer data as an interactive 3D bar chart. It was built using the D3.js v5 library, along with the `d3-3d` and `d3-x3d` extensions, which leverage the X3DOM framework for browser-based 3D rendering. The chart is populated from a CSV file containing manufacturer-specific monthly values. The code assigns the parsed data to a `barChartMultiSeries` component, which is then attached to the HTML chart holder, displaying the multi-series bars in a three-dimensional space.

Jul 5, 2022
Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This visualization displays car manufacturer sales data for the first six months of a year as a 3D multi-series bar chart. It uses the D3.js v5 library alongside the d3-3d and d3-x3d extensions, which leverage X3DOM for rendering interactive 3D scenes directly in the browser. The chart is generated by loading CSV data from a GitHub gist containing monthly values for each manufacturer, then transforming those rows into a structured dataset. The `barChartMultiSeries` component renders the bars, with month labels on one axis and manufacturers on another, creating a volumetric representation of the tabular data.

Jul 5, 2022
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart displays two years of personal electricity consumption, broken down by account number and month, using green and blue bars to distinguish between the two accounts. Built with D3.js, it uses `d3.stack()` to restructure the data by date, `scaleBand` and `scaleLinear` for positioning, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. The visualization renders as an SVG with animated opacity changes on mouse hover and includes hover tooltips via `<title>` elements, with data sourced from a personal electricity consumption dataset.

Jul 5, 2022
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between two quantitative variables, "Marks" and "time_study," with each point’s tooltip revealing the value of "Marks." The visualization is built using the Vega-Lite API, which generates a specification that is registered with Vega and Vega-Lite for rendering. Data is loaded asynchronously via a CSV file from the UCI Auto MPG dataset, fetched using d3’s `csv` function. The chart’s layout adapts to the browser window using autosize with fit, and custom axis styling is applied via a config object.

Jul 3, 2022
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of student data, plotting marks against time spent studying, with color and size encoding the number of courses and an integer attribute, respectively. The tooltip reveals each student’s name. Built with Vega-Lite API and D3, it loads CSV data from the UCI Auto MPG dataset, renders an SVG via Vega, and customizes axes and label styling through a config object.

Jul 3, 2022
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays student performance data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting exam marks against study time as circles colored by number of courses and sized by an integer attribute. Built with the Vega-Lite API and D3 v5, it renders an interactive scatter plot with tooltips showing student names. The code uses `vl.markCircle`, `vl.x().fieldQ`, and `vl.y().fieldQ` to encode variables, while fetching data via `d3.csv`. The chart fills the browser window and employs a custom config for improved label readability.

Jul 3, 2022
Loading thumbnail…

Fork of Fork of Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, weight, and origin for cars from the UCI Auto MPG dataset. Using the Vega-Lite API with D3.js for data loading, it renders a scatter plot with circles sized by weight and colored by origin, featuring interactive tooltips that reveal car names. The code integrates Vega, Vega-Lite, and Vega-Tooltip libraries within a D3 framework, customizing axis styles and plot dimensions to fit the full browser viewport.

Jul 3, 2022
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between vehicle horsepower, miles per gallon, weight, and country of origin using U.S. Auto MPG data from the UCI Machine Learning Repository. Each circle’s position, size, and color encode these attributes, with tooltips revealing car names. The visualization is built with the Vega-Lite API, registered through vega, vega-lite, and vega-tooltip, while d3.csv loads the external dataset. A custom dark-themed configuration adjusts axis and label styling for readability.

Jul 3, 2022
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between horsepower, miles per gallon, weight, and origin for cars from the UCI Auto MPG dataset. Built with the Vega-Lite API and rendered via Vega, it encodes each car as a circle positioned by acceleration and engine displacement, with color indicating country of origin and size reflecting vehicle weight. Tooltips display car model names. The visualization uses D3's csv loader to fetch data from a Gist URL, and the chart resizes to fit the browser window.

Jul 3, 2022
Loading thumbnail…

pie

This example renders a pie chart of fictional car brand values using D3 v4 and React. The chart displays ten slices in a circular SVG layout, with each slice colored via d3.scaleOrdinal and d3.schemeCategory10. Hovering over a slice triggers mouseover and mousemove events that show a tooltip with the brand name and value, while reducing the opacity of other slices. A separate legend div is built alongside the SVG, and the chart uses d3.arc and d3.pie for geometry and data binding.

Jul 2, 2022
Loading thumbnail…

pie

This interactive pie chart displays the relative proportions of the top 10 US states by GDP. Using D3 v4 within a React application, the chart renders as an SVG. The code loads data from a CSV file and presents it with a color-coded legend. Hovering over a section highlights that slice, dims the others, and displays a tooltip showing the state name and GDP value, with the chart built using `d3.arc` and `d3.pie` for the visual representation.

Jul 2, 2022
Loading thumbnail…

Fork of Fork of Fork of ICE 7question 3 Line Chart

This line chart visualizes automobile sales from the year 999 to 007, sourced from a CSV file hosted on GitHub. A blue path traces the data through time, with a time-scaled x-axis for years and a linear y-axis for sales figures, all rendered as an SVG via D3 v5. The visualization uses D3’s `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` functions to generate the plot, with purple title and rotated axis labels. The React-based rendering appends elements directly to the SVG container, leveraging D3’s `csv` loader to parse the external dataset.

Jul 2, 2022
Loading thumbnail…

Fork of Fork of Fork of Fork of Pie Chart

This visualization displays 2022 US auto sales by brand as a pie chart, with a legend showing each brand’s name, percentage of total sales, and sales volume in thousands. Built with D3 v5, it loads CSV data from a GitHub gist via `d3.csv`, computes pie arcs using `d3.pie`, and renders paths with `d3.arc`. A sequential color scale (`d3.scaleOrdinal`) assigns colors, while custom legend text is positioned using SVG groups and transforms.

Jul 2, 2022
Loading thumbnail…

Fork of Fork of Fork of Pie Chart

This example shows 2022 US auto sales by brand as a pie chart with a legend listing each brand, its percentage of total sales, and its sales volume in thousands. The chart renders as an SVG using D3 v5, with sales data loaded from a CSV file via a helper function that uses `d3.csv`. Slices are generated with `d3.pie` and `d3.arc`, while `d3.scaleOrdinal` assigns colors to each brand. The legend displays brand names and computed percentages and volumes, with values formatted using `d3.format`.

Jul 2, 2022
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This example presents a scatter plot of the Iris dataset, visualizing the relationship between student marks and study time, with an option to rotate through different data columns at regular intervals. The visualization uses D3.js version 6.7.0, employing scaleLinear, axisLeft, axisBottom, and a custom reusable scatterPlot function that manages the SVG rendering. Each circle’s position maps to the selected x and y values, and the axes update dynamically every five seconds as the x-value changes among Marks, time_study, and number_courses. The chart fills the viewport and applies a custom Share Tech font.

Jul 2, 2022
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, displaying student marks against study time and number of courses, with circles animating through different column pairings every five seconds. The visualization is built using D3 v6, implementing a reusable chart pattern with `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and SVG circles for data points. Data is loaded from a remote CSV file via `d3.csv`, and updates are triggered by `setInterval` calling a custom scatter plot function that rejoins elements.

Jul 2, 2022
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot animates through the Iris Dataset, cycling the x-axis between Marks, time_study, and number_courses every five seconds. It uses the reusable `scatterPlot` module built with D3 v6's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The plot updates smoothly by re-calling the chart function with a new x-value mapping.

Jul 2, 2022
Loading thumbnail…

Fork of Fork of Pie Chart

A pie chart displays 2022 US auto sales by brand, with each slice sized by year-to-date sales and a legend showing brand names, percentage of total sales, and sales figures in thousands. The visualization loads CSV data from a GitHub gist using `d3.csv` and renders with `d3.pie` and `d3.arc`, applying a fixed color scale via `d3.scaleOrdinal`. Labels are formatted with `d3.format`, and the SVG is generated entirely in the browser.

Jul 2, 2022
Loading thumbnail…

Fork of Pie Chart

A pie chart visualizes 2022 US auto sales by brand, displaying each brand’s market share as a percentage and raw sales in thousands. The chart renders as an SVG using D3 v5, loading CSV data from a GitHub Gist via `d3.csv`. The code employs `d3.pie()` to compute arc angles, `d3.arc()` for segment paths, and `d3.scaleOrdinal` for categorical colors. Legends show brand names, percentage, and sales values, formatted with `d3.format`, while interactions are minimal, focusing solely on static data presentation.

Jul 2, 2022
Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart 11515092

This chart shows the top 10 countries by deaths attributed to air pollution in 2020, using a pie chart with a legend and value labels. It loads CSV data from a GitHub gist via `d3.csv` and renders SVG arcs with `d3.pie` and `d3.arc`. A `d3.scaleOrdinal` maps death counts to a fixed set of colors, while text labels use `d3.format` to abbreviate values as thousands (e.g., "1.2K"). The legend is built manually with appended SVG rectangles and text elements, all styled with CSS.

Jul 2, 2022
Loading thumbnail…

Fork of Piechart ICE - 7 Rohith Arabati

This D3.js pie chart visualizes annual car sales of different companies in India, with each slice representing a company and its market share. The visualization uses the `pie()` layout algorithm to compute arc segments, `arc()` to generate the path geometry, and `scaleOrdinal()` to map categorical data to a custom color palette. Sales values are labeled on each slice in thousands, while a legend on the right identifies companies and their corresponding values. The chart loads CSV data asynchronously from a GitHub raw URL, and the data is processed to calculate the total before rendering.

Jul 2, 2022
Loading thumbnail…

Fork of Fork of Area Chart

This visualization displays monthly car sales data as a combined line and area chart, using a smoothed curve to emphasize trends. The chart plots sales volume over time, with the area beneath the curve filled in orange to highlight the magnitude of sales. The implementation uses D3 v5 with `d3.line()` and `d3.area()` generators, both configured with a `curveBasis` interpolation. Scales are created with `d3.scaleTime()` and `d3.scaleLinear()`, while axes are rendered using `d3.axisBottom()` and `d3.axisLeft()`. Data is loaded as CSV from a GitHub gist and parsed with `d3.timeParse()`.

Jul 2, 2022
Loading thumbnail…

Fork of Area Chart

This visualization presents annual car sales data as a colored area chart overlaid with a bold black line, using a smooth basis curve to connect data points. The chart includes labeled axes for year and sales, with the sales axis formatted using compact notation. Built with D3 v5, the code loads CSV data from a GitHub gist, parses dates, and renders the visualization as SVG using d3.line, d3.area, and d3.curveBasis. Axes are generated via d3.axisBottom and d3.axisLeft, with scales created using d3.scaleTime and d3.scaleLinear.

Jul 2, 2022
Loading thumbnail…

Fork of Fork of ICE 7 Reusable D3 Scatter Plot

This example presents a reusable D3 scatter plot that visualizes the Iris Dataset. The chart displays data points with different symbols corresponding to species, mapping petal width against sepal length. Axes are drawn using `axisLeft` and `axisBottom` from D3, with scales created by `scaleLinear` and symbol types generated by `symbol` and `symbols`. The visualization cycles through different data columns for the x-axis every 15 seconds, using `setInterval`, updating the plot dynamically while the page renders as an SVG.

Jul 2, 2022
Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This fork of the ICE 7 reusable D3 scatter plot visualizes the Iris dataset, rendering each flower as a symbol whose shape encodes species and position encodes petal width and sepal length. It uses D3 v6 modules including `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom` within a custom reusable chart function. The plot animates every 15 seconds by cycling the x-axis through four different numeric columns using `setInterval`, updating the scales and re-rendering the SVG dynamically.

Jul 2, 2022
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot animates through three attributes of the Iris Dataset—Marks, time_study, and number_courses—by cycling the x-value every five seconds while keeping time_study fixed on the y-axis. Built with D3 v6, it uses scaleLinear, axisLeft, axisBottom, and data joins to render SVG circles, whose positions recompute as the axis domains update to the current column's extent.

Jul 1, 2022
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying study time and marks with animated transitions that cycle through different axes every five seconds. Users see the correlation between marks, study time, and number of courses as points reposition smoothly. Built with D3 v6, it uses scaleLinear, axisLeft, axisBottom, and a reusable chart factory pattern. SVG circles animate between states using JavaScript's setInterval, while the code imports utilities like csv and select for data loading and DOM manipulation.

Jul 1, 2022
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through three dimensions of the Iris Dataset—Marks, time_study, and number_courses—on the x-axis while keeping time_study on the y-axis. Built with a reusable D3 chart factory pattern, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `selection.join` to render circles in SVG. A `setInterval` updates the `xValue` accessor every five seconds, triggering a redraw via `svg.call(plot)`. The data loads from a CSV fetched with `d3.csv`, and the visualization adapts to the full browser viewport.

Jul 1, 2022
Loading thumbnail…

Fork of Animated Scatter Plot

This interactive scatter plot visualizes the Iris dataset, letting users compare measurements of sepal and petal dimensions across species. Dropdown menus dynamically change the x- and y-axis variables, and points (drawn as SVG circles) animate smoothly to their new positions via `d3.transition` with staggered delays. The chart is built with a reusable `scatterPlot` component that leverages `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` for axes. Data is loaded from a remote CSV using `d3.csv`, and the scene adapts to the browser window size.

Jul 1, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the classic Iris dataset, displaying petal width against sepal length for each sample. The chart uses a reusable D3 module with a fluent interface, built on `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`axisBottom` for scaled axes. Rendered as an SVG, the visualization cycles through four different feature pairings every two seconds via `setInterval`, updating the x-axis and circle positions in place. The code leverages D3 6.7.0 and fetches the dataset from a GitHub Gist, with a custom "Share Tech" font applied to the axis labels.

Jul 1, 2022
Loading thumbnail…

Fork of Fork of ICE 7question 3 Line Chart

A single blue line traces automobile sales from 1999 to 2013, with the year on a time-scaled x-axis and sales on a linear y-axis. The chart uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the SVG rendering. Data is loaded as CSV from a GitHub gist, with parsed year and sales values. The visualization includes labeled axes, a title, and a grid of tick marks.

Jul 1, 2022
Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This line chart visualizes automobile sales from 1999 to 2007 using data loaded from a CSV file hosted on GitHub. It plots years on the x-axis and sales figures on the y-axis, with blue gridlines and a labeled title. The visualization is built with React and renders as an SVG using d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line. The code fetches data via d3.csv, sets margins for layout, and applies custom styling through CSS classes.

Jul 1, 2022
Loading thumbnail…

Fork of Fork of Fork of ICE - 7 Pie Chart

A pie chart visualizes the top 10 countries by COVID-19 deaths in 2020, with each slice labeled with the death count in thousands. The chart uses `d3.pie` to compute arc angles and `d3.arc` for path generation, colored via `scaleOrdinal`. A legend on the right lists countries with corresponding color swatches and death values. Data is fetched as CSV from a GitHub gist, and the SVG is rendered with D3 v5, using `select` and `append` for elements and `format` for tick labels.

Jul 1, 2022
Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart

This example visualizes the top 10 countries by COVID-19 deaths in 2020 using a pie chart rendered as SVG. Each slice is labeled with its death count in thousands, and a legend on the right pairs country names with their corresponding values and color swatches. The chart is built with D3 v5, using `d3.pie` and `d3.arc` to generate the sectors, `d3.scaleOrdinal` for color mapping, and `d3.csv` to load the data from a GitHub gist. The visualization highlights relative mortality contributions across countries with a clean, annotated layout.

Jul 1, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart

This pie chart displays the top 10 countries by air pollution deaths in 2020, using a colorful segmented circle with each slice labeled in thousands and a legend pairing colors with country names. The code loads CSV data via `d3.csv`, converts death counts to numbers, and renders the chart using `d3.pie` and `d3.arc` to compute segment paths, with `d3.scaleOrdinal` assigning colors. Text labels are positioned using `arc.centroid`, and the legend is built manually with appended `rect` and `text` elements. The SVG canvas is selected with `d3.select`, and the visualization is generated asynchronously through an `async` function.

Jul 1, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart

This D3.js v5 pie chart visualizes the top 10 countries by deaths from air pollution in 2020. The SVG rendering uses `d3.pie` and `d3.arc` to generate the segments, with a custom `scaleOrdinal` color scheme. Each segment displays a death count formatted in thousands, and a legend pairs each country with its corresponding color and value. Data is fetched asynchronously from a CSV file using the `d3.csv` API, and the chart is centered within a 960x500 pixel SVG canvas.

Jul 1, 2022
Loading thumbnail…

Fork of Fork of Pie Chart

This example presents a pie chart of internet usage deaths by country, using a dataset loaded from a GitHub gist via `d3.csv`. The chart displays each country’s share of total deaths as a colored arc segment, with a legend listing country names and matching color swatches. The visualization is rendered entirely in SVG, using `d3.pie` to compute the arc data, `d3.arc` to generate path segments, and `d3.scaleOrdinal` for the categorical color mapping. The page layout and styling are defined in HTML and CSS, with the chart drawn on a 960×450 SVG canvas.

Jul 1, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart Naimisha

This pie chart visualizes student records, showing the proportion of deaths per student using color-coded slices and a legend with student names and values. The code loads CSV data from a GitHub gist and uses d3.pie to compute arc angles, d3.arc to generate SVG paths, and scaleOrdinal for color mapping. Each slice displays its value formatted in thousands, while the legend uses SVG rects and text elements. The visualization is built with D3 v5 and rendered entirely as SVG, with a fixed chart width of 960 pixels.

Jul 1, 2022
Loading thumbnail…

Fork of Fork of ICE 7 Area Chart 11515092

This area chart visualizes student records, plotting Results over Maths scores using a smooth basis curve. The SVG rendering uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `line`, and `area` generators. Data is loaded from a CSV file via `d3.csv` and parsed with `d3.timeParse` to handle date formatting. The chart features orange-filled areas beneath black lines, with labeled axes and rotated y-axis text, all styled through an external CSS file.

Jul 1, 2022
Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart naimisha

This pie chart visualizes student records, showing the distribution of math scores as proportional slices. The chart renders in SVG using D3 v5, with a scaleOrdinal color scheme and pie/arc generators to create segments. Each slice displays its value as a text label, and a legend on the right pairs color swatches with student results and corresponding numeric values. Data is loaded as CSV from a remote URL and processed asynchronously, with percentages formatted using d3.format.

Jul 1, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by deaths due to air pollution in 2020. Each slice represents a country, with its size proportional to the number of deaths, and the chart includes labeled values and a legend mapping colors to country names. The visualization uses d3.pie, d3.arc, and d3.scaleOrdinal to construct the chart and apply colors. Data is loaded from a CSV file via d3.csv, and the text labels are formatted using d3.format. The entire graphic is rendered as SVG elements within a fixed 960x500 canvas.

Jul 1, 2022
Loading thumbnail…

Fork of Fork of ICE 7 Line Chart 11515092

This example visualizes student records by plotting mathematics scores on the x-axis against results on the y-axis as a line chart. The SVG rendering uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate the path. Data is loaded from an external CSV file via `d3.csv`. The chart includes styled grid lines, rotated axis labels, and a red line path, with data formatted using `d3.timeParse` for date handling.

Jul 1, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates through columns of the Iris Dataset, switching the x-axis mapping every two seconds among petal width, sepal width, petal length, and sepal length. Using D3 v6 APIs such as `scaleLinear`, `axisLeft`, and `axisBottom`, it renders SVG circles and updates axes via a reusable chart function pattern. The visualization also applies the Share Tech font and loads data from a CSV URL, with the animation driven by `setInterval`.

Jul 1, 2022
Loading thumbnail…

Fork of Fork of countries

This example displays a pie chart of sales records, with each slice representing data grouped by country. The visualization renders using SVG and reads its data from a CSV file hosted online via `d3.csv`. The code uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the slices and assign colors to each segment. Each slice is labeled with its value, and a legend is drawn on the right side. The chart is generated by fetching data with `d3.csv` from a provided URL, then iterating through the records to sum the `orderdate` values for the total.

Jul 1, 2022
Loading thumbnail…

Fork of countries

This visualization is a pie chart illustrating the top 10 countries by deaths from air pollution in 2020, with each slice labeled with the death count in thousands. The chart uses d3.pie, d3.arc, and d3.scaleOrdinal to generate the slices and their colors, while d3.select appends SVG elements for the pie and a legend. Data is fetched from a CSV URL via d3.csv, and the code formats the numeric labels using d3.format. The visualization clearly shows the proportional death tolls, with a legend mapping each country to its corresponding slice color.

Jul 1, 2022
Loading thumbnail…

Fork of ICE 7 Line Chart 11515092

This visualization shows car sales across different sales channels in India from 2009 to 2019, using a line chart to display the trend over time. The chart plots order dates on the x-axis and sales values on the y-axis, with grid lines and axis labels styling the SVG. The implementation uses d3.csv to load the data, then d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to create the visualization. The code includes custom tick formatting, margin calculations, and rotated axis labels for clarity.

Jul 1, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a fork of a reusable D3 scatter plot that visualizes the Iris dataset, with four attributes available for cycling on the x-axis. A timer updates the plot every two seconds, switching which column is mapped to the x-axis while the y-axis remains fixed to sepal length. The chart uses `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.extent` from D3 v6, rendering points as SVG circles with a fixed radius. The animation is driven by `setInterval`, re-invoking the scatter plot function to update the axis and circle positions.

Jul 1, 2022
Loading thumbnail…

Fork of ICE 7 Area Chart 11515092

This visualization shows the total sales of cars in India from 2009 to 2019, using a combined line and area chart. The black line traces the sales trend while the orange area fills the space beneath it, with a time-scaled x-axis and linear y-axis. The code uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.line, and d3.area with curveBasis to smooth the paths. Data is loaded from a remote CSV file and parsed with d3.csv and d3.timeParse, rendering as SVG with custom axis labels and tick formatting.

Jul 1, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart 11515092

A pie chart displays the top 10 countries by deaths from air pollution in 2020, using D3 v5 to fetch CSV data and render SVG arcs. The chart uses `d3.pie` and `d3.arc` to generate segments, `d3.scaleOrdinal` for color mapping, and `d3.format` to abbreviate values like “1.2K”. Legends show country names with corresponding values, and a title is centered above the visualization.

Jun 30, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example displays the Iris Dataset as an interactive scatter plot, cycling through four flower measurements every two seconds while maintaining a fixed y-axis of sepal length. Reusable chart logic sits inside the `scatterPlot` function, which uses d3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles and axes. The animation is driven by `setInterval` updating the x-value accessor and re-invoking the chart, all rendered in an SVG with Google’s Share Tech font.

Jun 30, 2022
Loading thumbnail…

Fork of Pie Chart

This visualization displays a pie chart comparing the pollution levels across 10 US states, with each slice labeled by its population value and accompanied by a color-coded legend. It uses D3.js (v5) to fetch CSV data from a GitHub gist, then renders the chart as SVG elements. The code employs D3's `pie` layout, `arc` for generating the pie segments, `scaleOrdinal` for assigning categorical colors, and `format` for tick label formatting. A legend group is constructed with rectangles and text elements to identify each state and its corresponding population.

Jun 30, 2022
Loading thumbnail…

D3 SCATTER PLOT

This interactive scatter plot visualizes the Iris Dataset, displaying four flower measurements. A D3 v6 reusable chart module animates between different axes every two seconds, cycling through petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. The plot uses d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft, rendering circles with SVG. Raw CSV data is fetched via d3.csv, with the entire figure dynamically resizing to the viewport.

Jun 30, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization demonstrates a reusable scatter plot displaying the Iris dataset, cycling through four attribute combinations every two seconds to compare petal and sepal measurements. Built with D3.js v6, the chart uses `scaleLinear` and `extent` for scales, `axisLeft` and `axisBottom` for axes, and SVG circles for data points. The code implements a reusable chart pattern with configurable accessors, and the animation transitions between different x-axis variables using `setInterval` while maintaining a fixed y-axis of sepal length. The implementation includes a custom font and full-window responsive sizing.

Jun 30, 2022
Loading thumbnail…

Fork of ICE - 6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and petal width as x and y coordinates while encoding species type with color. It uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom for tick marks. Circle marks are generated with d3.selectAll and .join, sized with a fixed radius, though sepal dimensions are computed but not visually used. The SVG canvas fills the window, with axis labels styled via inline attributes.

Jun 25, 2022
Loading thumbnail…

Fork of Fork of Fork of Fork of Sports List

This visualization presents a ranked bar chart of popular sports in 2021, sourced from a CSV dataset and rendered as an SVG via React. The code uses d3.csv for data loading, d3.scaleBand and d3.scaleLinear for positioning, and d3.max for domain calculation. Horizontal bars display each sport’s match count, with axis ticks and labels generated manually using d3.ticks. The chart is built with React hooks (useState, useEffect) and ReactDOM rendering, with D3 selections integrated for scaling and formatting.

Jun 25, 2022
Loading thumbnail…

Fork of Fork of Fork of ICE - 6 Scatter Plot

This D3.js scatter plot visualizes the Iris dataset, mapping petal length and width for each sample. Points are color-coded by species (setosa, virginica, and versicolor) using a custom marker function. The code loads CSV data via `d3.csv`, applies linear scaling with `d3.scaleLinear`, and renders circles as SVG elements. Axis labels are added with rotated text elements, and the visualization uses `d3.axisLeft` and `d3.axisBottom` for axes, with the plot filling the browser window.

Jun 25, 2022
Loading thumbnail…

Fork of Fork of ICE - 6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for each sample while using color to distinguish species. The circles also encode sepal measurements through their horizontal and vertical radii, creating a multi-dimensional view. Built with D3 v6, the visualization loads CSV data from a GitHub repository and uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the plot. Custom styling sets tick font sizes and axis labels, while the SVG output fills the entire browser window.

Jun 25, 2022
Loading thumbnail…

Fork of Fork of Fork of Sports List

A horizontal bar chart displays the popularity of sports in 2021, ranking eleven sports by match count. The visualization uses React with D3.js v5, loading data from a CSV file and rendering the chart as an SVG. D3's `csv` function parses the data, while `scaleBand` and `scaleLinear` position bars and axes. The bars themselves are SVG rectangles filled with purple, and the chart includes axis ticks and labels generated with D3's `scaleLinear` and `scaleBand` methods.

Jun 25, 2022
Loading thumbnail…

Fork of Fork of Sports List

This visualization displays the top 10 famous sports in 2021, with each sport's popularity measured by the number of matches played. The horizontal bar chart renders as an SVG using React and d3.js, with the data loaded from a CSV file via d3.csv. The chart uses d3.scaleBand for the y-axis sport categories, d3.scaleLinear for the x-axis match counts, and d3.max to compute the scale domain. The code also utilizes React's useEffect and useState hooks for fetching and storing the data.

Jun 25, 2022
Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual flowers. The visualization is built with D3 version 6, using `scaleLinear` for both axes, `extent` to compute data domains, and `axisLeft`/`axisBottom` for tick marks. The code retrieves data from a CSV file via `d3.csv`, then renders circles with a fixed radius of 5 pixels. The SVG canvas fills the entire browser window, with axes labeled at 24-pixel font size.

Jun 25, 2022
Loading thumbnail…

Fork of D3 Scatter Plot

This example shows a scatter plot of the Iris Dataset, with sepal length plotted on the y-axis and petal length on the x-axis. The visualization uses D3 v6 and renders circles as SVG elements, with axes created using `axisLeft` and `axisBottom`. The code loads CSV data via `d3.csv`, scales the values with `scaleLinear`, and computes the domain from the data’s extent using `d3.extent`. The plot’s width and height are set to the full window size, with margins defining the axis positions.

Jun 25, 2022
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual data points. The SVG visualization uses `d3.csv` to load data, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` to render axes. Circles are drawn using a `join` operation to bind data attributes to SVG circle elements. The chart is responsive, filling the browser window with margins applied around the plot area.

Jun 25, 2022
Loading thumbnail…

Fork of Sports List

This example displays the 11 most popular sports of 2021 ranked by number of matches, rendered as a horizontal bar chart using SVG. The chart uses React with hooks to load and manage the CSV data, while D3 v5 provides the scales, axes, and shape rendering. The bars are colored purple and include labeled tick marks for both axes, with the x-axis scaled linearly by match count. The code uses `scaleBand` for the categorical sports names and `scaleLinear` for the numeric values.

Jun 25, 2022
Loading thumbnail…

Fork of company list

This visualization displays a horizontal bar chart of company data, showing the top 11 entries from a CSV file loaded via `d3.csv`. Each bar represents a company’s serial number, with company names listed on the y-axis using `scaleBand` and numeric values on the x-axis via `scaleLinear`. The chart is rendered in React using SVG elements, with purple bars and orange gridlines produced by `xScale.ticks()`. The data is fetched from a GitHub gist and displayed with axis labels.

Jun 25, 2022
Loading thumbnail…

Fork of Fork of company list

A bar chart displays the top 11 rows from a CSV of company data, plotting each company’s "Serial_Number" as a purple horizontal bar against its "Leave" label on the y-axis. The React app fetches the data via D3’s `csv` function, then uses D3’s `scaleBand` and `scaleLinear` for axes, with `d3.max` to scale the x-axis. SVG rendering is handled through React’s `ReactDOM.render`, producing tick marks, labels, and the bars themselves. The chart’s title, "Famous Sports in 2021," appears as an HTML heading.

Jun 25, 2022
Loading thumbnail…

Fork of company list

This bar chart displays the top 11 companies from a CSV dataset, ranked by their “2021” matches, with a main title “Famous Sports in 2021.” Built with React and D3, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering the bars as SVG `rect` elements with a purple fill.

Jun 24, 2022
Loading thumbnail…

company list

This example displays a horizontal bar chart of the top 11 companies from a dataset titled “Famous Sports in 2021,” ranked by their serial number. The visualization uses React with hooks to fetch CSV data via d3.csv, then renders SVG rectangles whose lengths encode the serial number values. D3 scales, including scaleBand and scaleLinear, position the bars, while custom tick marks and labels are drawn manually rather than using d3.axisBottom or d3.axisLeft. The chart is styled with a purple fill for each bar.

Jun 24, 2022
Loading thumbnail…

Fork of Sports List

This visualization presents a bar chart of the most famous sports in 2021, using horizontal bars ordered by rank to display the number of matches for each sport. It loads data from a CSV file via `d3.csv` and renders the chart with React, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The SVG output includes grid lines and axis tick labels generated by D3’s scale methods, with bars filled in purple.

Jun 24, 2022
Loading thumbnail…

Fork of company List

This visualization displays sports-related data from a CSV file as a horizontal bar chart, ranking the top 11 entries by their 2021 match counts. The chart uses React for component-based rendering and D3 v5 for data loading and scale construction. Specifically, it employs `d3.csv` for data fetching, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. The SVG rectangles are colored purple and rendered directly within a React component, with axes and tick labels generated manually using D3's scale methods.

Jun 24, 2022
Loading thumbnail…

Fork of company List

This example visualizes the most famous sports of 2021 using a horizontal bar chart. The chart displays the number of matches for each sport, with sports ordered alphabetically along the vertical axis and match counts on the horizontal axis. The code uses D3 v5 utilities like scaleBand, scaleLinear, and max to create the scales, while CSV data is loaded via d3.csv. The visualization is rendered as SVG elements within a React component using the react and react-dom libraries, with purple bars representing each sport's match count.

Jun 24, 2022
Loading thumbnail…

Fork of ICE-5

This example displays a dataset of 500 attributes, summarizing its size in kilobytes, row count, and column count in a large red text block. The page also presents a bold blue title and an embedded star SVG image. Built with D3.js v7, it uses the `d3.csv` method to fetch and parse a remote CSV file from a GitHub gist, then formats the data with `d3.csvFormat` to compute its byte size for the summary. Static HTML and CSS structure the layout, while JavaScript handles the asynchronous data loading and DOM updates.

Jun 22, 2022
Loading thumbnail…

hello world

This example displays a centered "Hello World!" message in large, 15em text against a blue background. The page is built with a minimal HTML structure and styled using CSS, with the message class controlling font size and alignment. The code demonstrates basic web rendering techniques without external libraries or data sources.

Jun 21, 2022
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that renders a centered “Hello World!” message using CSS styling. The page consists of a single `div` element with the class `message`, styled with a large 13em font size and text alignment through CSS. The code uses plain JavaScript and HTML without any external libraries or frameworks, making it a basic starter template for web development projects.

Jun 21, 2022
Loading thumbnail…

Fork of Smiley Face Part I

A smiling clown face rendered in SVG uses React to construct the visual and D3's arc generator to define the mouth and eye shapes. The face includes a red-stroked head, green nose, asymmetrical eyes with dashed outlines, and colored blush ellipses. Two D3 arc paths, rotated and positioned, form the clown’s hair or hat on either side. The drawing is centered within a 960 by 500 viewport, with static, geometric styling.

Jun 18, 2022